当前位置:博客首页>>nginx >> 阅读正文

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

作者: 郑晓 分类: nginx 发布于: 2019-11-30 00:13 浏览:7,653 评论(2)


[2019.12.2 更新] 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,它用来接受我们zh30.com的所有请求,并进行代理转发。

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代理过来的请求全部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,完成!

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

       

本文采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可,转载时请注明出处及相应链接。

本文永久链接: https://www.zh30.com/nginx-proxy-laravel-vue-history.html

使用Nginx反向代理部署laravel和history模式的Vue项目[更新]:目前有2 条留言

用户评论头像 婚书网发表于 2019年12月02日 14:50[回复]

已加入收藏夹,时不时的来看看有没有更新博文!

    用户评论头像 阿斯蒂芬发表于 2020年01月23日 18:52[回复]

    测试一下

发表评论

change vcode