Docker Vue Frontend Deployment Doc

Docker-Vue 前端部署报告

2019/12/29 陈玉洁

[TOC]

开发环境

前端开发

• macOS X 10.13.6
• Vue-cli 3.0 (Webpack 4)

详细步骤

1 打包vue项目

1. 在vue项目根目录打包项目

npm run build

• 如果打包成功，会在根目录下生成一个dist文件夹。

2 具体部署

1. 将dist文件夹下的全部内容拷贝到任一目录 (Optional)(front)
2. 在同目录下创建 Dockerfile

FROM nginx:1.13.7
# 使用Nginx

MAINTAINER LeonLiang <leonnnop@icloud.com> 

RUN rm /etc/nginx/conf.d/default.conf 
# 删除nginx 默认配置

ADD default.conf /etc/nginx/conf.d/ 
# 添加我们自己的配置 default.conf 在下面

COPY dist/  /usr/share/nginx/html/  
# 把刚才生成dist文件夹下的文件copy到nginx下面去

RUN /bin/bash -c 'echo init ok!!!'

• 使用ngix镜像作为基础镜像

3. 在同目录下创建 default.conf

server {
    # 项目中定义的端口号
        # listen       8080;
        # server_name  localhost;
    
        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }
    
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

location @router {
           rewrite ^.*$ /index.html last;
    }

• 这一段用于解决“Vue部署后刷新404"的错误

4. 在上级目录下创建新文件夹 proxy 用于实现负载均衡和之后的路由转发
5. 在 proxy 文件夹里添加Dockerfile

FROM nginx:alpine
RUN rm /etc/nginx/conf.d/*
COPY proxy.conf /etc/nginx/conf.d/

6. proxy.conf 内容如下

server{
    listen 8080;

    resolver 127.0.0.11 valid=5s;

    set $upstream http://front;

    location / {
        proxy_pass $upstream;
    }
#    location ~* ^/api(.*) {
#       proxy_pass http://kg-backend:8080/kg/api$1;
#   }
}

resolver 127.0.0.11 valid=5s;

    set $upstream http://front;

    location / {
        proxy_pass $upstream;
    }

• 这一段，在之后通过 docker-compose scale front=n 命令动态添加或删除容器的时候能够及时处理

#    location ~* ^/api(.*) {
#       proxy_pass http://kg-backend:8080/kg/api$1;
#   }

• 这一段负责路由的转发，当前还没有使用到