docker部署vue项目--nginx
·
docker部署vue项目,在网上搜罗很多教程,但是可能因为我的理解不够深入,都一一失败了。因此,我直接将nginx部署vue项目的步骤套用过来,具体操作就是,创建nginx容器之后,以nginx部署vue的流程进行下去。
1. docker部署nginx
- 拉取nginx镜像
docker pull nginx:1.8.1
- 创建nginx容器
docker run --name nginx -p 8083:80 -d nginx:1.8.1
2. vue项目打包
-
终端输入命令“npm run build”

-
将vue项目的dist文件夹压缩,移到服务器中。

- 导入压缩包
- 到想要保存压缩包的文件路径下,使用rz命令,导入dist.zip压缩包(云服务器ECS最好使用zip压缩文件,具体原因见后。)
- 使用“unzip”命令,解压dist.zip文件夹,生成dist文件夹

- 将文件移动到nginx容器中(进入压缩后的文件,将压缩后的文件都传入nginx容器)

docker cp assets nginx:/etc/nginx/share/html
docker cp index.html nginx:/etc/nginx/share/html
至此,vue可正常运行。

注意事项:
5. vue中服务器ip需要更改,因为vue没有以容器形式部署在docker中,而是借用nginx进行部署,那么ip直接填写服务器的ip地址即可。

6. vue中图片未被打包,图片显示failed,未获取成功的。将图片以引用的形式,在代码中体现

7. 压缩使用zip,是因为ECS服务器中yum的软件库里没有rar解压命令(可能是我没有找到),因此最好将压缩包改为zip形式。并使用unzip 命令,若无解压命令可以进行安装
yum install unzip
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)