Nginx配置

nginx配置样板

http {
    # ...
    server {
        # 监听端口号
        listen 443;
        server_name xxxx;
        loaction / {
            root 文件目录
        }
    }
}

注: 需确保服务器防火墙和安全组都放通访问端口

部署webpack打包publicPath为 '/' 的dist

• 访问: http://IP:port

location / {
        root C:\Users\Administrator\Desktop\vue-project\emss\dist;
        index index.html ;
        try_files $uri $uri/ index.html;
}

注: 如果前端路由模式为history, 则必须加try_files $uri $uri/ index.html;

部署webpack打包publicPath为'/app'(即包含自定义后缀)的dist

• 访问: http://IP:port/app

location /app {
         alias C:\Users\Administrator\Desktop\vue-project\app\dist;
}

注: 此时如果前端项目中需要访问public目录下的文件, 访问路径应改为: /app/public目录下的文件

后端serve转发(一)

• 后端服务运行在30000端口上, api路由为: /api/v1/xxxx
• 访问api: http://IP:port/api/v1/xxxx

location /api {
        proxy_pass http://127.0.0.1:30000/api;
        # 或者proxy_pass http://127.0.0.1:30000
        }

注: 如果仅写到端口号, 则端口号后不加 /

后端serve转发(二)

• 后端服务运行在8803端口上, api路由为: /api/v1/xxxx
• 访问api: http://IP:port/dmt/api/v1/xxxx

location /dmt/api {
        proxy_pass http://127.0.0.1:8803/api;
}

后端serve转发(三)

• 后端服务运行在30003端口上, api路由为: /aa/bb/xxx
• 访问api: http://IP:port/chinaTalk/aa/b...

location /chinaTalk/ {
        rewrite ^/chinaTalk/(.*)$ /$1 break;
        proxy_pass http://119.45.102.83:30003;
}

转发文件资源访问

• 后端serve运行在30000端口下, 后端启动静态资源在uploads目录下
• 访问静态资源: http://IP:port/uploads/文件名

location /uploads {
        proxy_pass http://127.0.0.1:30000/uploads;
}

使用https域名替换ip端口访问

• https必须在443端口下
• 需要拿到https证书文件并放在nginx-1.xx.xx/conf目录下(即nginx.conf所在目录)

server {
       #SSL 访问端口号为 443
       listen 443 ssl;
       #填写绑定证书的域名
       server_name wzctest.wzc520pyf.cn;
       #证书文件名称
       ssl_certificate 1_wzctest.wzc520pyf.cn_bundle.crt;
       #私钥文件名称
       ssl_certificate_key 2_wzctest.wzc520pyf.cn.key;
       ssl_session_timeout 5m;
       #请按照以下协议配置
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
       #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
       ssl_prefer_server_ciphers on;
       location / {
            root C:\Users\Administrator\Desktop\vue-project\emss\dist;
            index index.html ;
            try_files $uri $uri/ index.html;
       }
}

开启前端打包gz压缩支持

server {
           listen       3333;
           server_name  localhost;
           # compression-webpack-plugin 配置
    
           gzip on;
    
        gzip_min_length 1k;
    
        gzip_comp_level 9;
    
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    
        gzip_vary on;
    
        # 配置禁用 gzip 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
    
        gzip_disable "MSIE [1-6]\.";

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  C:\Users\Administrator\Desktop\vue-project\emss\dist;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
}

配置属性