1. 拉取镜像

docker pull nginx

2.从容器中复制到宿主机，及准备配置文件及文件夹

#  拷贝nginx.conf配置文件 67d8694f2f86:/etc/nginx/nginx.conf配置文件拷贝到宿主机/home/nginx目录下
docker cp 67d8694f2f86:/etc/nginx/nginx.conf /home/nginx/
#  拷贝conf.d文件夹 67d8694f2f86:/etc/nginx/conf.d目录拷贝到宿主机/home/nginx目录下
docker cp 67d8694f2f86:/etc/nginx/conf.d /home/nginx/
#  拷贝html文件夹 247554ba818f:/usr/share/nginx/html目录拷贝到宿主机/home/nginx/目录下
docker cp 247554ba818f:/usr/share/nginx/html /home/nginx/
#  创建logs文件夹
mkdir /home/nginx/logs
#  创建cert证书文件夹，将证书放到该目录下
mkdir /home/nginx/cert
#  创建vue项目目录
mkdir /home/html/ruoyi-html

3. 根据镜像创建容器

docker run -id \
--name=c_nginx \
-p 80:80 \
-p 443:443 \
--restart=always \
-v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf.d:/etc/nginx/conf.d \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
-v /home/nginx/cert:/etc/nginx/cert \
-v /home/html/ruoyi-html:/home/html/ruoyi-html \
nginx

如图home目录下的结构

image.png

修改 /home/nginx/nginx.conf

user  nginx;
worker_processes  auto;

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


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #开启gzip
    gzip  on;
    #低于1kb的资源不压缩
    gzip_min_length 1k;
    #压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
    gzip_comp_level 5;
    #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_disable "MSIE [1-6]\.";
    #是否添加“Vary: Accept-Encoding”响应头
    gzip_vary on;

    include /etc/nginx/conf.d/*.conf;
}

修改conf.d中的配置文件

upstream gt_server {
    server 192.168.110.250:8080;
}
upstream gt_mq_server {
    server 192.168.110.250:8081;
}

server {
    listen 80;
    server_name  www.xyz.com;

    set $rootdir '/gt/wb-vue3/dist';
    root $rootdir;

    index index.html;
    
    location / {
        # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
        try_files $uri $uri/ @router;
        index index.html;
    }

     # 由于路由的资源不一定是真实的路径，无法找到具体文件
     # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
       rewrite ^.*$ /index.html last;
    }

    location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://gt_server/;
    }
    location /socket/ {
          proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
          proxy_pass http://gt_mq_server/socket/;
    }


    client_max_body_size 40m;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

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

    set $rootdir '/gt/wb-vue3/dist';
    root $rootdir;

    #填写证书文件名称
    ssl_certificate   /etc/nginx/cert/www.xyz.com.pem;
    #填写证书私钥文件名称
    ssl_certificate_key  /etc/nginx/cert/www.xyz.com.key;
    
    ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;

    #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
    #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协 议，高版本TLS协议对浏览器的兼容性较差。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

    #表示优先使用服务端加密套件。默认开启
    ssl_prefer_server_ciphers on;

    index index.html;

    location / {
        # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }

    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://gt_server/;
    }

    location /wx-api/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://gt_server/;
    }

    location /socket/ {
          proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
          proxy_pass http://gt_mq_server/socket/;
    }

    client_max_body_size 40m;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}

参考https://blog.csdn.net/BThinker/article/details/123507820