Nginx配置VUE專案Https訪問

獵手家園發表於2022-10-13
NginxVueHTTP

配置包括兩部分：一是nginx的安裝和基本配置，見傳送門；二是關於vue專案的配置。

1、關於Nginx的安裝：傳送門

2、現在大多專案都做了前後端分離，前端比較常用的就是VUE了，如何配置Https訪問？

server {
    listen                  80;
    server_name             www.你的域名.com;
    rewrite ^(.*)$ https://$host$1 permanent;
}
server {
    listen 443 ssl;
    server_name                 www.你的域名.com;
    #SSL證書檔案
    ssl_certificate             /usr/local/nginx/conf/ca/www.你的域名.com/你的域名.com_bundle.pem;
    ssl_certificate_key         /usr/local/nginx/conf/ca/www.你的域名.com/你的域名.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    #Nginx日誌目錄
    access_log           /usr/local/nginx/logs/www.你的域名.local/www.你的域名.local_access.log main;
    error_log            /usr/local/nginx/logs/www.你的域名.local/www.你的域名.local_error.log warn;

    #VUE專案檔案存放目錄
    location / {
        root             /root/export/apps/www.你的域名.local.vue/;
        index            index.html;
        try_files        $uri $uri/ /index.html;
        autoindex        on;
        autoindex_exact_size on;
        autoindex_localtime  on;
    }

    #這裡說明一下：如果你的VUE透過非同步獲取資料，這裡配置你的介面路由，直接走內網，不需要出公網繞一圈再回來，提高速度
    location /api/ {
        proxy_connect_timeout 15s;
        proxy_send_timeout 15s;
        proxy_read_timeout 15s;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:8001/;
    }
}

 

相關文章