環境

Windows 10
SpringBoot 1.5.20
Vue 2.5.2
Nginx 1.12.2
OpenSSL-Win64

下載

Nginx官網下載：http://nginx.org/en/download.html
解壓如下所示：

執行

• cmd切換到nginx目錄，執行命令：

start nginx

• 瀏覽器位址列輸入網址 http://localhost，出現以下頁面說明啟動成功
  

前後端分離配置

• nginx.conf配置
  我們可以修改nginx的配置檔案nginx.conf 達到訪問nginx代理伺服器時跳轉到指定伺服器的目的，即通過proxy_pass配置請求轉發地址，這裡SpringBoot
  使用的是內建的tomcat，vue部署在了tomcat裡，如下程式碼所示，後臺的埠為31096，前端的埠為8080，在這裡只配置監聽80埠，因為前端訪問路徑都帶了專案名稱，如果是前端路徑則轉發到前端工程，其餘轉發到後端；當然，也可以配置兩個埠分別監聽前後端的埠來實現前後端分離部署。

server {
        listen       80;
        server_name  localhost;

        location / {
            # root   html;
            # index  index.html index.htm;
			proxy_pass https://127.0.0.1:31096;
        }
		
		# app為前端專案名稱，帶app的訪問路徑都是訪問前端，故此將請求轉到前端工程
		location ^~ /app/ {
			proxy_pass http://127.0.0.1:8080;
			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;
		}

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

• 重啟nginx

nginx -s reload

• 訪問http://localhost/專案名，這樣就簡單的實現了一個前後端分離部署

配置https

• 下載OpenSSL
  官網下載：http://slproweb.com/products/Win32OpenSSL.html
  
• 配置環境變數
  
• 生成https證書

openssl genrsa -des3 -out server.key 1024

• 建立 csr 證書

openssl req -new -key server.key -out server.csr

• 刪除密碼
  複製server.key並重命名server.key.org

openssl rsa -in server.key.org -out server.key

• 生成crt證書

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

• 結果如下：
  
• 修改nginx下的nginx.conf配置檔案

server {
		listen 8443;      # 站點監聽埠
		server_name 127.0.0.1:8443; # 配置的https的域名
		ssl on;		# 開啟ssl
		root html;
		index index.html index.htm;
		ssl_certificate      C://Users//Coisini//ssl//server.crt;  # 證書的crt檔案所在目錄
		ssl_certificate_key  C://Users//Coisini//ssl//server.key;  # 證書key檔案所在目錄
		ssl_session_timeout 5m;
		ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_prefer_server_ciphers on;
		
		location / {
			proxy_pass https://127.0.0.1:31096;
		}
		
		location ^~ /app/ {
			#root html;
			#index index.html index.htm;
			proxy_pass http://127.0.0.1:8080;
		}
		
		#error_page   500 502 503 504  /50x.html;
        #location = /50x.html {
            #root   html;
        #}
    }

• 效果如下所示：
  

後記

程式釋出時前後端用的都是https，springboot用內建的tomcat，vue部署在tomcat裡，因為ssl證書都是自制的，瀏覽器並不認可，會出現連線不是私密連線的驗證，這樣就導致了一個問題，訪問前端登入頁驗證一次私密連線，但登入頁上的後臺驗證碼卻刷不出來，瀏覽器對後端的連線也進行了攔截，瀏覽器不信任證書可以把證書匯入瀏覽器來解決，但因為太麻煩用nginx做了個轉發解決了這無厘頭問題

.end