vue前端使用Docker部署

在上一篇文章中，我们介绍了如果在CentOS上安装docker环境，本文则是介绍docker的具体项目实践，主要介绍如果通过docker容器来部署vue前端项目。本文需要基于vue项目已经开发完成，并且docker环境已经准备好。思路是Docker镜像中使用nginx反向代理运行vue前端项目。

编译发布vue项目

编译发布vue项目，生成dist目录的待发布前端项目。将dist目录上传到CentOS上的相应项目目录下，这里CentOS上的项目目录叫demo-vue。

编写Dockerfile文件

vue的镜像中我们需要基于nginx，把发布后的vue文件复制到镜像中，自定义镜像中的nginx配置。

# 基于nginx:1.20.1版本，如果不指定版本则拉去最新的nginx版本 FROM nginx:1.20.1 MAINTAINER flyduck "flyduck@flyduck.com" # 将dist文件中的内容复制到 /usr/local/app/ 这个目录下面 # <目标路径>：容器内的指定路径，该路径不用事先建好，路径不存在的话，会自动创建 COPY dist/ /usr/local/app/ # 自定义nginx配置 COPY demo-vue.conf /etc/nginx/conf.d/

自定义vue前端项目的nginx配置放在demo-vue.conf 文件中，将自定义的nginx配置放入/etc/nginx/conf.d/目录下，该目录是nginx加载配置的目录。

server { listen 8080; server_name localhost; root /usr/local/app; gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml; gzip_vary on; gzip_disable "MSIE [1-6]\."; index index.html index.htm; location / { try_files $uri $uri/ /index.html; } location ~ .*\.(js|css|ico|jpg|png|json)$ { index index.html; } location = /index.html { add_header Cache-Control "no-cache, no-store"; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 

将Dockerfile文件以及demo-vue.conf配置文件上传到CentOS上的相应项目目录下，与之前vue发布目录dist同级，这里CentOS上的项目目录叫demo-vue。

生成vue项目镜像

在CentOS上切换到demo-vue目录下，执行下面docker命令编译生成镜像。

docker build -t demo-vue:v1.0 .

运行vue项目容器

demo-vue镜像生成后，直接运行docker命令启动demo-vue容器发布vue前端项目。

docker run --name demo-vue -d -p 8080:8080 demo-vue:v1.0

访问CentOS服务器的8080端口，即可以访问vue前端网站。

参考

vue前端项目打包成Docker镜像并运行

原文链接：https://blog.csdn.net/fly_duck/article/details/125281076?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836883916800184138762%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836883916800184138762&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-10-125281076-null-null.nonecase&utm_term=docker%E9%83%A8%E7%BD%B2