zhimma's blog
0%

Nginx单域名配置多Vue工程和PHP接口

Posted on Edited on In ,

点击查看单域名配置多Vue工程和多PHP接口

项目中遇到了一个问题，需要一个域名完成整个项目的部署，之前是使用的多个域名进行解析的，例如：

后台页面：backend.domain.com,后台接口：backend-api.domain.com

前台页面：fontend.domain.com,前台接口：fontend-api.domain.com

现在的需求是：domain.com就可以访问到前后台所有页面的接口

解决思路：Nginx和Vue路由配置

前端配置

vue-cli3.x
在vue.config.js的文件中加入（此处为了打包后的JS,CSS等文件的路径引向）

1
2
3
module.exports = {
  baseUrl:'/frontend/'  //根据www.xxx.com/后面的路径写入（比如www.domain.com/frontend）
}

baseUrl官方文档

Nginx配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 匹配含有backend的
location /backend {
    # 重新定义root目录
    root /Users/zhimma/Data/www/MK_Project/public/web;
    # 或者
    # alias /Users/zhimma/Data/www/MK_Project/public/web/backend;
    # 解决刷新页面404错误
    if (!-e $request_filename) {
        rewrite ^/(.*) /backend/index.html last;
        break;
    }
    # 尝试t尝试列出的文件并设置内部文件指向。
    try_files $uri $uri/ @router;
}

PHP 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
try_files $uri $uri/ @rewrite; 
location @rewrite { 
rewrite ^/(.*)$ /index.php?_url=/$1; 
} 
location ~ \.php { 
fastcgi_pass 127.0.0.1:9000; 
fastcgi_index /index.php; 

fastcgi_split_path_info ^(.+\.php)(/.+)$; 
fastcgi_param PATH_INFO $fastcgi_path_info; 
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info; 
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 
include fastcgi_params;
}

我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
server {
    listen  80;
    server_name mk.ma;
    index       index.php index.html index default;
    root        /Users/zhimma/Data/www/MK_Project/public;

    #error_page  404              /404.html;
    try_files $uri $uri/ @rewrite; 
    location @rewrite { 
        rewrite ^/(.*)$ /index.php?_url=/$1; 
    } 
    location ~ \.php { 
        fastcgi_pass 127.0.0.1:9000; 
        fastcgi_index /index.php; 
         
        fastcgi_split_path_info ^(.+\.php)(/.+)$; 
        fastcgi_param PATH_INFO $fastcgi_path_info; 
        fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info; 
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 
        include fastcgi_params;
     } 
    # 匹配含有backend的
    location /backend {
        # 重新定义root目录
        root /Users/zhimma/Data/www/MK_Project/public/web;
        # 或者
        # alias /Users/zhimma/Data/www/MK_Project/public/web/backend;
        # 解决刷新页面404错误
        if (!-e $request_filename) {
            rewrite ^/(.*) /backend/index.html last;
            break;
        }
        # 尝试t尝试列出的文件并设置内部文件指向。
        try_files $uri $uri/ @router;
    }
    location /frontend {
        alias /Users/zhimma/Data/www/MK_Project/public/web/frontend;
        if (!-e $request_filename) {
            rewrite ^/(.*) /frontend/index.html last;
            break;
        }
        try_files $uri $uri/ @router;
    }
    location @router {
        rewrite ~.*$ /index.html last;
    }
    location /favicon.ico {
        root /Users/zhimma/Data/www/MK_Project/public/web/backend;
    }
}

最后解析域名，访问地址就只需要一个

后台：domain.com/backend

前台：domain.com/frontend

接口地址统一调用：domain.com

总结一下：

Nginx功能很强大，下一步需要彻底弄懂Nginx的一些配置项，方便项目的一些需求