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

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

默认 2020-04-17 17:57 共2158人围观 来源：原创
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;
}
}

 

 

 

 

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3cn0udci9ym88

相关文章

文章评论

栏目导航

点击排行

友情链接

官方微信