PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 服务器 > Linux教程 > 正文

    Nginx代理同域名前后端分离项目

    作者:admin来源:网络浏览:时间:2020-10-14 22:19:15我要评论
    导读:以 vue + php 项目为例。直接上 server 模块的 nginx 配置。
    以 vue + php 项目为例。直接上 server 模块的 nginx 配置。

    1. server 
    2.     { 
    3.     listen 80; 
    4.     #listen [::]:80 default_server ipv6only=on; 
    5.     server_name demo.com; # 配置项目域名 
    6.     index index.html index.htm index.php; 
    7.  
    8.     # 1.转给前端处理 
    9.     location / 
    10.     { 
    11.         # 前端打包后的静态目录 
    12.         alias /home/wwwroot/default/vue-demo/dist/; 
    13.     } 
    14.  
    15.     # 2.转给后端处理 
    16.     location /api/ { 
    17.         try_files $uri $uri/ /index.php?$query_string; 
    18.     } 
    19.  
    20.     # 3.最终php在这里转给fpm 
    21.     location ~ [^/]\.php(/|$) 
    22.     { 
    23.         # 后端项目目录 
    24.         root  /home/wwwroot/default/demo/public/; 
    25.         #fastcgi_pass  127.0.0.1:9000; 
    26.         fastcgi_pass unix:/tmp/php-cgi.sock; 
    27.         fastcgi_index index.php; 
    28.         include fastcgi.conf; 
    29.         include pathinfo.conf; 
    30.     } 
    31.  
    32.     # 4.处理后端的静态资源 
    33.     location /public/ { 
    34.         alias /home/wwwroot/default/demo/public/uploads/; 
    35.     } 
    36.  
    37.     #error_page   404   /404.html; 
    38.  
    39.     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 路径末尾一定要有 / 。

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-121-6375-1.html
    相关热词搜索: Nginx代理 前后端分离