前后端項目使用Nginx同域部署

前后端分離的項目，無論是否部署在同一台機器，都應盡量使前后端項目暴露於同一個域下【協議+主機+端口】，方法就是在部署前端的Nginx上，使用同一個域來反向代理后端項目，好處多多：

1. 徹底、一勞永逸地解決跨域問題（開銷也最低，因為不再有OPTIONS請求）。
2. 共享域名。
3. 利用反向代理隱藏后端地址。
4. 集中管理。

server {
    # 0.與瀏覽器交互的只有這個Nginx虛擬服務器，瀏覽器看到的【協議+主機+端口】永遠只有一個，整個交互過程始終處於同一域下，故不會出現跨域問題
    listen 80;
    server_name localhost;
    
    # 1.前端項目打包好的dist目錄，放置到這個目錄下
    root /data/;
    
    # 2.后端多個微服務接口通過統一網關（9000）對外暴露，nginx反向代理統一網官 
    location ~* ^/(code|auth|admin|buy) { # 3.【code|auth|admin|buy】是后端各微服務接口前綴，網關按這個前綴來路由請求。
       proxy_pass http://127.0.0.1:9000;
       #proxy_set_header Host $http_host;
       proxy_connect_timeout 15s;
       proxy_send_timeout 15s;
       proxy_read_timeout 15s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
} 

6. Docker部署可參考如下Dockerfile：

FROM nginx
COPY dist /data
RUN rm /etc/nginx/conf.d/default.conf
ADD my_nginx.conf /etc/nginx/conf.d/
RUN /bin/bash -c 'echo init ok'

特別注意后端服務的域名規划，比如【code、auth、admin、buy】等域名，要提前在后端接口上統一分配好。