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镜像并运行