背景

現在，web開發的前後端分離技術越來越火爆，由於最近的課程設計使用了前後端分離的方案，這裡就來記錄一下前後端分離的專案部署。這裡我們使用的前端框架是react，後臺使用ssm提供資料介面。

nginx

nginx (engine x) 是一個高效能的HTTP和反向代理伺服器,這裡我們使用nginx來作為前端頁面的靜態伺服器。

思路

前端部署

nginx作為靜態伺服器部署前端程式碼

後端部署

tomcat作為後臺伺服器部署資料服務

nginx反向代理

將發往nginx伺服器的資料請求傳送到tomcat伺服器

程式碼

worker_processes  1
 
;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  tosim.top;

        location / {
                root html/build;
                try_files $uri
 
 /index.html;  # try_files：檢查檔案； $uri：監測的檔案路徑； /index.html：檔案不存在重定向的新路徑 
                index index.html; 
        }

        location /api/ {
            # 把 /api 路徑下的請求轉發給真正的後端伺服器
            proxy_pass http://localhost:18080/;

            # 把host頭傳過去，後端服務程式將收到your.domain.name, 否則收到的是localhost:8080
            proxy_set_header Host $http_host
 
;

            # 把cookie中的path部分從/api替換成/service
            proxy_cookie_path /api /;

            # 把cookie的path部分從localhost:8080替換成your.domain.name
            proxy_cookie_domain localhost:18080 tosim.top;
        }

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