在上一篇文章中，我们介绍了如果在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前端网站。文章来源：https://www.toymoban.com/news/detail-469582.html
参考
vue前端项目打包成Docker镜像并运行文章来源地址https://www.toymoban.com/news/detail-469582.html
到了这里，关于vue前端使用Docker部署的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
