背景

iview 服务容器化，实质，构建镜像，方便部署，iview 使用打包纯静态服务

iview 构建镜像

前期准备

修改 setting.env.ts

publicPath 路径修改， 这个构建静态文件访问的绝对路径，涉及到NGINX配置

/**
 * Admin Plus 开发配置
 * */

const env = process.env.NODE_ENV;

const Setting = {
    // 是否使用 Mock 的数据，默认 开发环境为 true，生产环境为 false
    isMock: env === 'development',
    // 部署应用包时的基本 URL
    publicPath: '/admin_static/',
    // 生产环境构建文件的目录名
    outputDir: 'admin',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir: '',
    // 开发环境每次保存时 lint 代码，会将 lint 错误输出为编译警告
    // true || false || error
    lintOnSave: true
};

module.exports = Setting;

涉及到证书，通过openssl生成一个，方便本地测试

openssl genrsa 1024 > server.key
openssl req -new -key server.key > server.csr
openssl req -x509 -days 3650 -key server.key -in server.csr > server.crt

nginx.conf

cors 配置

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';

admin.conf

server {
    listen 8090;
    server_name  loc-admin.atomgit.com;
    charset utf-8;
    root   /usr/nginx/wwwroot/admin/;
    index  index.html;
    location ^~ / {
        try_files $uri $uri/ /index.html;
    }
    location ^~ /admin_static {
        alias /usr/nginx/wwwroot/admin;
    }
}

server {
    listen 443 ssl;
    server_name  loc-admin.atomgit.com;
    ssl_certificate /etc/nginx/conf.d/server.crt;
    ssl_certificate_key /etc/nginx/conf.d/server.key;

    charset utf-8;
    root   /usr/nginx/wwwroot/admin/;
    index  index.html;

    location ^~ / {
        try_files $uri $uri/ /index.html;
	}
	location ^~ /admin_static {
        alias /usr/nginx/wwwroot/admin;
    }
}

Dockerfile

两个阶段构建镜像

# build
FROM node:lts-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY . .
RUN npm run build:dev

# deploy
FROM nginx:stable-alpine as deploy
COPY docker/conf/admin.conf /etc/nginx/conf.d/admin.conf
COPY docker/ssl/server.* /etc/nginx/conf.d/
COPY --from=build /app/admin/ /usr/nginx/wwwroot/admin
EXPOSE 443
EXPOSE 8090
CMD ["nginx", "-g", "daemon off;"]

测试

docker build -t xxx/xxx .
docker run xxx/xxx

到此， 镜像构建成功，本地绑定host,测试服务是否正常。 真实环境部署情况一般情况下是外网流量先到网关或者NGINX转到内部地址（服务 pod service等）

外网NGINX转发内网NGINX

外网NGINX

这里需要注意一下 上面修改的 publicPath: '/admin_static/' 前缀需要时保持一致（admin），否则下面一个 location admin 不能匹配成功

server {
    listen       443 ssl;
    server_name  www.xxx.com;

    ssl_certificate      server.crt;
    ssl_certificate_key  server.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    #location ~ ^/admin {
    #    proxy_set_header  Host                    $http_host;
    #    proxy_set_header  X-Real-IP               $remote_addr;
    #    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    #    proxy_set_header  X-Forwarded-Proto $scheme;
    #    proxy_http_version 1.1;
    #    #proxy_pass        https://@admin;
    #    proxy_pass https://loc-admin.atomgit.com;
    #}

    location ~ ^/admin {
        proxy_set_header  Host                    $http_host;
        proxy_set_header  X-Real-IP               $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_pass        http://@admin;
    }
}

upstream @admin {
    server x.x.x.x:8090;
}

浏览器访问 自己定义的域名测试是否正常