使用docker部署前端

部署Cloud Web

npm install --registry=https://registry.npm.taobao.org安装好依赖后，修改根目录下.env.production文件内容：

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '你的接口地址'

将VUE_APP_BASE_API地址改为上面Ingress里配置的地址。

然后双击npm窗口的build:prod，将项目打包：

打包好后，项目根目录会多出个dist文件夹。接着在WebStorm里配置远程Docker服务：

在项目的根目录下创建Dockerfile文件夹：

FROM nginx:1.14.2
MAINTAINER Source 1134496928@qq.com

COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/ /etc/nginx/html

nginx配置：

worker_processes  auto;

error_log   /var/log/nginx/error.log;
pid   /run/nginx.pid;

events {
    worker_connections  1024;
}

http {
        include mime.types;
        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;
        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
        fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     16 8k;
        gzip_http_version 1.1;
        gzip_comp_level 6;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
        limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;


    server {
        listen       80;
        server_name  localhost;

        charset utf-8;

        location / {
            root   html;
            index  index.html index.htm;
        }
        location = /50x.html {
            root   html;
        }
    }
}

然后点击WebStorm的run -> Edit Configurations…，添加Docker配置：

选择Dockerfile，填写镜像名称 point-web，

然后点击保存即可。保存后，点击运行按钮，创建镜像：

从构建日志来看，镜像已经构建成功

回到服务器查看docker镜像：

在/home/web目录下创建cloud-web.yml配置文件：

version: '3'

services:
  point-web:
    image: point-web:latest
    container_name: point-web
    volumes:
      - "/home/manage/log:/log"
    environment:
      - "TZ=Asia/Shanghai"
    ports:
      - 9527:80
    restart: on-failure

启动该容器：

docker-compose -f  cloud-web.yml up -d

之后就是一些Nginx的配置了，配置好后就能直接打开查看了