您现在的位置是:首页 > PHP后端和VUE前端部署在一个域名上的一种方法

PHP后端和VUE前端部署在一个域名上的一种方法

默认 2020-04-17 17:57 380人围观 来源:原创
nginx   vue  
简介现在越来越多的项目采用前后端分离的方式开发,部署的时候可以选择部署到不同的域名或者不同的端口上去。有时候为了方便还可以选择部署在同一个域名上,这里介绍一种方法,除了这种也还有别的方法。

通过ngxin反向代理来实现前后端共用一个域名。注意下面location /api这段。意思是只要访问以/api开头的路径,就转发给后端8080端口的网站。这样网站前台域名是http://www.xxx.com 后台接口的baseUrl应该是http://www.xxx.com/api

1、vue前端配置一份nginx配置文件web.conf

内容大约如下:

server {
listen 80;
root /home/ly/www/vue-dist;
index index.html index.htm;
server_name www.xxx.com;
client_max_body_size 100m;

# 开启gzip压缩加快访问速度
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

location / {
    try_files $uri $uri/ /index.html;
}}

location /api {

    #使用nginx代理,直接解决了域名共享和跨域的问题
    proxy_pass http://127.0.0.1:8080/;
}

}

2.php后端部署在8080端口上

配置文件大约如下:

server {
listen 8080;
root /home/ly/www/php-back;
index index.html index.htm index.php;
client_max_body_size 100m;

# 开启gzip压缩加快访问速度
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

location / {
try_files $uri $uri/ /index.php?s=$uri&$args;
}

# 开启PHP支持
location ~ \.php {
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
fastcgi_split_path_info ^(.+\.php)(.*)$;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
}

 

 

 

 

文章评论