1. 程式人生 > >前後端分離專案配置Nginx、配https及http強制跳轉https

前後端分離專案配置Nginx、配https及http強制跳轉https

本篇文章主要解決以下幾個問題:

  1. 前後端分離專案如何配置Nginx
  2. 配置https協議訪問
  3. 開啟http訪問但強制跳轉https訪問

基本的安裝就不多說了,直奔主題。
本文基於ubuntu系統,另外假定有幾個前提條件:

  • 主機地址為192.168.10.10
  • 後端專案啟動埠為192.168.10.10:8000
  • 前端程式碼會呼叫後端的info和test兩個url地址
  • 前端靜態檔案目錄 /var/www/html/project

1 基本配置

http下server基本配置如下

server {
    listen 80;
    server_name 192.168.10.10
	
	# 配置根地址訪問的靜態資源
    location /{
        root /var/www/html/project;
    }

    # 配置可被nginx轉發的介面地址
    location /info{
        proxy_pass http://127.0.0.1:8000;
    }

    location /test{
        proxy_pass http://127.0.0.1:8000;
    }

}

現在訪問http://192.168.10.10就可以進去首頁了
如果訪問不了首頁,可以嘗試修改location /為以下內容:

location /{
        root /var/www/html/project;
        index index.html index.htm;
        try_files $uri /index.html;
    }

2 配置HTTPS

參考:https://cloud.tencent.com/developer/article/1346683

配置https,可以使用自簽名證書和購買機構頒發的證書。
這裡我們使用自簽名證書。
執行以下語句生成簽名和祕鑰

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/nginx-selfsigned.key -out /etc/ssl/certs/nginx-selfsigned.crt

將會有如下所示:

OutputCountry Name (2 letter code) [AU]:US
State or Province Name (full name) [Some-State]:New York
Locality Name (eg, city) []:New York City
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Bouncy Castles, Inc.
Organizational Unit Name (eg, section) []:Ministry of Water Slides
Common Name (e.g. server FQDN or YOUR name) []:server_IP_address
Email Address []:
[email protected]
_domain.com

適當填寫提示。
最重要的一行是Common Name (e.g. server FQDN or YOUR name)那一行,您需要輸入與伺服器關聯的域名,或者是您伺服器的公共IP地址。
現在主機裡面已經有以下兩個檔案了

/etc/ssl/private/nginx-selfsigned.key
/etc/ssl/certs/nginx-selfsigned.crt

繼續填寫nginx配置,我們新增一欄server,填寫以下配置

   server {
   listen 443;
   server_name 192.168.10.10
   
   ssl on;
   ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
   ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;
   # 配置根地址訪問的靜態資源
   location /{
       root /var/www/html/project;
   }

   # 配置可被nginx轉發的介面地址
   location /info{
       proxy_pass http://127.0.0.1:8000;
   }

   location /test{
       proxy_pass http://127.0.0.1:8000;
   }

}

現在就可以訪問https://192.168.10.10

3 http跳轉https

在http的nginx的配置中加一句重定向 rewrite ^(.*)$ https://$host permanent; 即可
整個配置如下

server {
    listen 80;
    server_name 192.168.10.10
    # http強制跳轉https地址
	rewrite ^(.*)$ https://$host permanent;
	# 配置根地址訪問的靜態資源
    location /{
        root /var/www/html/project;
    }

    # 配置可被nginx轉發的介面地址
    location /info{
        proxy_pass http://127.0.0.1:8000;
    }

    location /test{
        proxy_pass http://127.0.0.1:8000;
    }

}

4 注意

location /{
        root /var/www/html/project;
        index index.html index.htm;
        try_files $uri /index.html;
    }

以上配置可能導致的問題,在地址後面加上任意的字尾後能訪問首頁,例如http://192.168.10.10/qwewqr/
這樣的配置實際上是不正確的,去掉以下內容後,就能提示404 No Found

        index index.html index.htm;
        try_files $uri /index.html;