0%

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

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

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

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

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

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

解决思路:NginxVue路由配置

前端配置

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的一些配置项,方便项目的一些需求