将vue项目传入到linux的部署nginx中

1、win上创建 vue项目 vue create 项目名
 》
2、然后打包vue项目 npm run build

3、连接Xftp 7 将win(左)传入 连接的虚拟机中(右)(在虚拟机的/usr/创建docker) 然后传入vue项目打好包

4、在虚拟机中 docker安装nginx 
    1、搜索nginx镜像:docker search nginx
    2、拉取nginx镜像:docker pull nginx
    3、运行nginx镜像生成nginx容器:docker run -itd --name nginx-container -p 9999:80 nginx  (nginx默认80)
    4、访问nginx容器,测试nginx服务器是否启动正常:ip:9999,出现welcom to nginx。(在虚拟机中 ip addr查询地址 第二个)
    5、进入nginx容器:docker exec -it nginx01 bash
        然后cd /usr/share/nginx/html/  该目录是用来部署静态网站。
            (复制连接用于部署静态项目)
            (进入到静态部署中 ls查看 如果有相同的文件,且用不到 可删除 rm(删除) -f(强制删除文件)r(目录) 相同的名称 )
    6、然后ctrl+D 退出nginx容器

5、将传入的静态vue项目打包的/dist 部署到 nginx01中  docker cp ./dist nginx01:/usr/share/nginx/html/

6、vue项目部署后 重启nginx  docker restart nginx名

7、到win上查看静态页面  虚拟机的ip地址/nginx设置的端口号/vue打包的项目名  http://192.168.142.128:9999/dist/
        
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值