1. dockerfile镜像文件编写

# 拉取 nginx镜像
FROM nginx:1.24.0

# 拷贝 nginx 配置文件到 docker中
COPY nginx.conf /etc/nginx/nginx.conf

# 拷贝vue打包后的文件到 docker中
COPY webapp /usr/share/nginx/html

# 新增时区设置
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone

# 设置对外端口
EXPOSE 80

 以上基于jenkins流水线构造

2. nginx 的配置文件编写

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log error;
pid    /var/run/nginx.pid;
events {
    use epoll;
    worker_connections  65535;
    multi_accept off;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format log_json '{"@timestamp": "$time_local", '
                        '"remote_addr": "$remote_addr", '
                        '"referer": "$http_referer", '
                        '"request": "$request", '
                        '"status": $status, '
                        '"bytes": $body_bytes_sent, '
                        '"agent": "$http_user_agent", '
                        '"upstream_addr": "$upstream_addr",'
                        '"upstream_status": "$upstream_status",'
                        '"up_resp_time": "$upstream_response_time",'
                        '"request_time": "$request_time"'
                        ' }';
    access_log  /var/log/nginx/access.log  log_json;
    server_tokens off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout  65;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers   4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 4;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;
    gzip_proxied any;
    gzip_disable "MSIE [1-6].";
    # include /etc/nginx/conf.d/*.conf;
    server {
      # 监听的端口
      listen  8086;

      # 后端接口
      location /api-inner/mid/ {
        # 此处转发后需要配置成内网前缀地址
        proxy_pass         http://192.168.0.242;
        #proxy_set_header   X-ForWARDed-Proto $scheR_100_11845@e;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
      }
      # 前端
      location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         if (!-e $request_fileName) {
             rewrite ^(.*)$ /index.html?s=$1 last;
             break;
          }
      }
      access_log  /var/log/nginx/default_access.log log_json;
    }
}

3. vue目录