Nginx代理同域名前后端分离项目的完整步骤
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
前后端分离项目，前后端共用一个域名。通过域名后的 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"htmlcode">
GET https://demo.com/api/posts
访问上传的图片
GET https://demo.com/uploads/xxx.jpg
访问前端首页
GET https://demo.com/
访问文章页面
GET https://demo.com/posts
PS：alias 路径末尾一定要有 / 。
总结
下一篇：UDP连接对象原理解析及使用实例