windows下利用Docker部署Vue前端项目

windows下利用Docker部署Vue前端项目

利用Dockerfile方式制作镜像，基础镜像选用最简单的nginx:latest

1. 安装windows版本的Docker Decktop
2. 在vue项目中创建Dockerfile配置文件，与vue项目打包后的dist文件夹同级即可。Dockerfile的内容如下：

# 该镜像是基于 nginx:latest 镜像构建的
FROM nginx:latest
# 将项目根目录下 dist 文件夹下的所有文件复制到镜像中 的/usr/share/nginx/html/ 目录下,在nginx的default.conf配置文件中也可看到相关路径配置。
COPY dist/  /usr/share/nginx/html/
# 将 nginx 目录下的 default.conf 文件复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

3.创建nginx的配置文件nginx/default.conf， dist文件夹同级即可，内容如下：

gzip on; #开启或关闭gzip on off
gzip_disable "msie6";
gzip_buffers 4 16k; 
gzip_comp_level 8; 
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

server {
    listen       10086;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
        add_header 'Access-Control-Allow-Origin' '*';

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/xx {
        proxy_pass   http://ip:port/xx;
    }
    location /prod-api/xxx {
        proxy_pass   http://ip:port/xx;
    }

    #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   /usr/share/nginx/html;
    }
}

4. 打开Docker Desktop，选用 Nginx 镜像为基础来构建vue应用镜像，所以先拉取Nginx镜像到本地，在vscode命令窗口输入如下命令：

docker pull nginx

5. 基于nginx:lastet基础镜像构建Vue应用镜像，命令如下：

docker build -t kbs-ui-docker:1.0.0 .

6. 基于创建的kbs-ui-docker:1.0.0镜像启动一个 Docker 容器，-v 挂载本地的nginx配置方便修改代理，–restart=always设置容器自启动 命令如下：

docker run -p 10086:10086 -d --name xxx -v E:\\project\\docker\\front\\conf:/etc/nginx/conf.d --restart=always xxx-docker:1.0.0

7. 将镜像保存成 tar 归档文件发布版本给到实施人员、命令如下：

docker save -o xxx.tar xxx-docker:1.0.0

8. 具体实施人员将打好的tar包导入docker中，命令如下：

docker load -i xxx.tar

9. 制作一个docker-build.bat文件方便打包更新tar包，内容如下：

@REM 构建镜像
docker build -t xxx-docker:1.0.0 .
@REM 生成tar包
docker save -o xxx-docker.tar xxx-docker:1.0.0

文档参考

开启docker守护进程

windows下利用Docker部署前端项目