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文件夹压缩，移到服务器中。
  

3. 导入压缩包

• 到想要保存压缩包的文件路径下，使用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