前端vue项目发布到docker的nginx容器

前端项目vue项目打包

执行npm run build指令，生成dist文件，放到服务器的自定义目录下，我是放到/deepin/userdata/weirui/data1/project/hyrenv5/hrsapp/dist/vue/frontend/html目录下的

注意：如果是用vue-admin-template-master等相关框架搭建的vue前端项目，需要修改.env.production文件的VUE_APP_BASE_API为你线上后端发布的地址
vue文件里需要用到VUE_APP_BASE_API时可以使用如下方法

上线部署

首先需要安装好docker，执行docker info可以查看docker的安装情况；然后再拉取nginx镜像，这里就不多赘述了。我这边已经装好了，执行docker images可以看到安装好的镜像

看到有自己拉取的镜像以后，就该通过此镜像运行一个后台容器了

sudo docker run --name my-nginx -d -p 8085:80 -v /deepin/userdata/weirui/data1/project/hyrenv5/hrsapp/dist/vue/frontend/html:/usr/share/nginx/html sw-hyren-nginx:1.16.0

–name my-nginx：–name是给容器起名字。my-nginx是容器名
-p：随机端口映射，容器内部端口随机映射到主机的端口
8085：映射的主机端口号
80：容器端口号
-v：简单的来说就是将主机上指定路径下的文件和容器里指定路径下的文件关联起来，以后只要修改了主机上的文件，他会自动同步修改容器里的相关文件（如需挂载nginx的配置文件需要先把它的配置文件复制到本地docker cp nginx的name:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf）
/deepin/userdata/weirui/data1/project/hyrenv5/hrsapp/dist/vue/frontend/html：主机上存放前端打包文件的路径
/usr/share/nginx/html：容器里存放前端打包文件的路径
sw-hyren-nginx:1.16.0：镜像的名字（镜像名+tag版本号）

执行完成之后，执行 docker ps可以看到启动的容器

页面上访问相应端口也可以看到我们刚刚发布的项目