基于docker部署vue项目

项目背景

某院项目，基于阿里bizworks项目中台开发，前后端分离项目，上文提到的后端服务，通过设置注解已经部署到bizworks平台中。

前端项目为vue项目，以往部署方式为npm run build，打成dist，放到nginx中进行转发，由于院里环境限制，目前考虑采用两种方式进行部署

一.使用docker容器进行部署vue项目。

docker部署前端

1.docker安装nginx

2.新建配置文件 nginx的配置：default.conf   docker的配置 dockerFile如下

FROM nginx:latest

COPY dist/  /usr/share/nginx/html/

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

3.修改default.conf中的地址为后端地址

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       3000;
    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 ^~/api/ {
            proxy_set_header Host $host;
            proxy_set_header  X-Real-IP        $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
            proxy_set_header Connection "";
            proxy_pass http://sxjcyceshi.com/;
            client_max_body_size    100m;
            proxy_connect_timeout 90;
            proxy_read_timeout 90;
            proxy_send_timeout 90;
        }

    #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.npm run build进行打包

5.docker build -t test-docker:1.0.0 .  新建镜像

6.基于镜像启动一个容器 docker run -p 3000:3000 -d   --name vueApp test-docker:1.0.0

线上环境部署

打包tar：
docker save -o test-docker.tar test-docker:1.0.0

把tar包放到现场服务器中

加载tar包
docker load -i test-docker.tar

启动（-d后台启动，防止关掉xshell后启动断开，后台启动后，如果要停止服务，可以删除对应pod进行停止）
docker run -d --add-host='sxjcyceshi.com:143.24.136.119' -p 3000:3000 -it   --name vueApp test-docker:1.0.0

停止服务
docker ps
docker stop XX
docker rm XX

其他命令：
杂项

docker加host启动 处理nginx转发识别不到host问题
docker run --add-host='sxjcyceshi.com:143.24.136.119' -p 3000:3000 -it   --name vueApp test-docker:1.0.0

基于托管应用设置 ，需要将其设置tag并推送到远程镜像仓库中

设置tag
docker tag test-docker:1.0.0 143.24.136.120:8080/test/test-docker:1.0.0

登录远程docker
docker login -u -p 143.24.136.120:8080

docker push 143.24.136.120:8080/test/test-docker:1.0.0

针对访问ssl报错，设置docker
docker配置
"insecure-registries": [
    "http://143.24.136.120:8080"
]