Nginx代理同域名前後端分離專案

Mr-houzi發表於2020-10-14
Nginx後端

前後端分離專案，前後端共用一個域名。通過域名後的 url 字首來區別前後端專案。

以 vue + php 專案為例。直接上 server 模組的 nginx 配置。

server
    {
    listen 80;
    #listen [::]:80 default_server ipv6only=on;
    server_name demo.com; # 配置專案域名
    index index.html index.htm index.php;

    # 1.轉給前端處理
    location /
    {
        # 前端打包後的靜態目錄
        alias /home/wwwroot/default/vue-demo/dist/;
    }

    # 2.轉給後端處理
    location /api/ {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # 3.最終php在這裡轉給fpm
    location ~ [^/]\.php(/|$)
    {
        # 後端專案目錄
        root  /home/wwwroot/default/demo/public/;
        #fastcgi_pass  127.0.0.1:9000;
        fastcgi_pass unix:/tmp/php-cgi.sock;
        fastcgi_index index.php;
        include fastcgi.conf;
        include pathinfo.conf;
    }

    # 4.處理後端的靜態資源
    location /public/ {
        alias /home/wwwroot/default/demo/public/uploads/;
    }

    #error_page   404   /404.html;

    access_log  /home/wwwlogs/access.log main;
}

簡單解釋

  • 當域名後存在 /api/ 字首時，將轉給後端處理；
  • 當域名後存在 /uploads/ 字首時，訪問後端的靜態資源。
  • 由於 location 精準匹配的原則，除以上之外的訪問都會被轉到第一處 location 訪問前端頁面。

例如：

訪問文章列表介面

GET https://demo.com/api/posts

訪問上傳的圖片

GET https://demo.com/uploads/xxx.jpg

訪問前端首頁

GET https://demo.com/

訪問文章頁面

GET https://demo.com/posts

PS：alias 路徑末尾一定要有 / 。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章