nginx 配置域名 ，websocket，https证书

最近项目要上线，简单记录一下配置过程

1. nginx配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #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   html;
        }
    }

    # 前端服务器配置
    server {
        listen 443 ssl;
        server_name ui.com;
        
        # SSL证书配置
        ssl_certificate /usr/local/nginx/cert/order-ui/cert.pem;
        ssl_certificate_key /usr/local/nginx/cert/order-ui/key.key;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        client_max_body_size 2G;
        proxy_buffering off;
        proxy_cache off;
        proxy_read_timeout 86400s;
        
        location = /index.html {
            root /data/design_order/dist;
        }
        
        location / {
            root /data/design_order/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 修改API代理配置，指向api.com
        location /prod-api/ {
            proxy_pass https://api.com/;
            proxy_set_header Host api.aicadesign.com;
            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;
        }

        # 修改WebSocket配置，指向api.com
        location /prod-api/resource/websocket {
            proxy_pass https://api.com/resource/websocket;
            proxy_buffering off;
            proxy_request_buffering off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host api.aicadesign.com;
            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_read_timeout 300s;
            proxy_send_timeout 300s;
        }
    }

    # HTTP重定向到HTTPS - 前端域名
    server {
        listen 80;
        server_name ui.com;
        return 301 https://ui.com$request_uri;
    }

    # 后端API服务器配置
    server {
        listen 443 ssl;
        server_name api.com;
        
        # SSL证书配置
        ssl_certificate /usr/local/nginx/cert/order-api/cert.pem;
        ssl_certificate_key /usr/local/nginx/cert/order-api/key.key;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        # API代理配置
        location / {
            proxy_pass http://127.0.0.1:8120;
            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-Forwarded-Proto $scheme;
        }

        # WebSocket配置
        location /resource/websocket {
            proxy_pass http://127.0.0.1:8120/resource/websocket;
            proxy_buffering off;
            proxy_request_buffering off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            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-Forwarded-Proto $scheme;
            proxy_read_timeout 300s;
            proxy_send_timeout 300s;
        }
    }

    # HTTP重定向到HTTPS - 后端域名
    server {
        listen 80;
        server_name api.com;
        return 301 https://api.com$request_uri;
    }
}

最终效果是：前端页面访问 ui.com，后端接口访问api.com; 项目前端用的vue ，需要配置.env.production文件。

VITE_APP_BASE_API = 'https://api.com'，

VITE_APP_URL = 'api.aicadesign.com'

最后websocket调用地址需要单独处理，线上用https，线下测试环境用http。

let protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
      initWebSocket(
        protocol +
          import.meta.env.VITE_APP_URL +
          "/resource/websocket"
      );
    }, 500);