使用Nginx反向代理部署laravel和history模式的Vue项目 C/C++ web

admin 6月前 171

[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,完成!

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


少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:Laravel5.4安装passport时遇到的一些问题
下一篇:selenium中查找元素find_element和find_elements区别
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回