使用Nginx反向代理部署laravel和history模式的Vue项目[更新]

nginx.conf里要加上对laravel的静态文件目录的转发(这里假设我的静态文件在public/static下)、修改vue的nginx配置。

我们以在我本地的开发环境为例，windows7+nginx+Vue+Laravel5，假设我想使用的域名是zh30.com。

想达成的效果：我们想直接访问时使用Vue开发的单页面应用index.html，做为我们的前台交互，且在Vue中使用history路由模式。后台和接口使用laravel框架进行开发，所以想使用zh30.com/admin 来访问后台管理，接口交互想使用zh30.com/api/xxx。

第一步，本地解析hosts，zh30.com指向到127.0.0.1 。。。。

第二步，配置nginx的主server，它用来接受我们的所有请求，并进行代理转发。

server {
listen 80;
server_name zh30.com;

location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8181;
}

location ~ ^/(admin|api|static) {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8282;
}
}

第三步，配置Vue的server，这里假设我的Vue项目build在D:/wwwroot/myvueproject/dist目录。此server的作用是，把从主server 8181 QQ代理过来的请求全部rewrite到index.html，以支持Vue的history模式路由。

server {
listen 8181;

root "D:/wwwroot/myvueproject/dist";

index index.html;

server_name localhost;

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

第四步，配置Laravel的server，假设laravel项目在D:/wwwroot/mylaravelproject/。此server的作用是，把从主server 8282代理来的请求（以/admin或/api开头），全部rewrite到public的index.php，实现laravel的路由系统。

server {

listen 8282;

server_name localhost;
root "D:/wwwroot/mylaravelproject/public";
index index.php;

location / {
try_files $uri $uri/ /index.php$is_args$args;
}

location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9001;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}
}

第五步，重启Nginx，完成！

可能遇到的问题：暂无。。。

使用Nginx反向代理部署laravel和history模式的Vue项目[更新]相关推荐

.net5 Nginx 反向代理部署
.net5 Nginx 反向代理部署几个概念先了解一下集群多个服务器(或者软件)呢,都可以完整的完成一个业务 eg:一个业务呢有A,B,C三个流程,服务器甲可以完成A,B,C.服务器乙也可以完成 ...
Nginx反向代理部署多个项目
需求假设现在有一个顶级域名ouou.com和三个二级域名white.ouou.com,blog.ouou.com,default.ouou.com,这4个域名都跟同一个IP进行绑定.三个二级域名分别 ...
nginx反向代理部署与演示(二)
我们把LB01作为负载均衡器,WEB01和WEB02作为两台web服务器. WEB01与WEB02虚拟主机配置如下: 我们修改nginx下的conf/nginx.conf文件,在http{}中加入如下 ...
容器化单页面应用中Nginx反向代理与Kubernetes部署
在<容器化单页面应用中RESTful API的访问>一文中,我介绍了一个在容器化环境中单页面应用访问后端服务的完整案例.这里我将继续使用这个案例,介绍一下容器化单页面应用部署的另一个场景: ...
docker安装_使用docker在带有SSL的Nginx反向代理后面部署Quarkus或任何基于Java的微服务...
docker安装已经有一段时间了,但是根据一位朋友的要求,我将向您展示如何使用docker在Nginx反向代理后面部署Quarkus微服务. 我们会做什么- 我将在centos 8主机上安装dock ...
Nginx 反向代理 Windows安装部署教程
一.Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.它也是一种轻量级的Web服务器,可以作为独立的服务器部署网站( ...
自部署gitlab-ce与Nginx反向代理——基于宝塔BT
自部署gitlab-ce与Nginx反向代理最近单位需要配置自有的git仓库和平台,于是采用了gitlab ce版,并且用Nginx反向代理到了宝塔安装的gitlab上.这期间出现了很多配置上导致的 ...
nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录
在日常运维工作中,运维人员会时常使用到nginx的反向代理,负载均衡以及缓存等功能来优化web服务性能. 废话不多说,下面对测试环境下的nginx反向代理+缓存开启+url重写+负载均衡(带健康探测) ...
Nginx 反向代理实现微信开发完美线上测试环境
成文时间: 2018-11-29 11:18:10 环境说明 Ubuntu 16.04 LTS Nginx version: nginx/1.10.3 (Ubuntu) PHP 7.1.18 Lara ...

使用Nginx反向代理部署laravel和history模式的Vue项目[更新]

使用Nginx反向代理部署laravel和history模式的Vue项目[更新]相关推荐

最新文章

热门文章