前後端分離nginx配置,同時解決跨域問題
阿新 • • 發佈:2019-01-09
背景
現在,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;
}
}
}