使用Nginx反向代理部署laravel和history模式的Vue項目[更新]
作者: 鄭曉 分類: nginx 發布于: 2019-11-30 00:13 瀏覽:8,021 評論(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 中國大陸許可協議進行許可,轉載時請注明出處及相應鏈接。
本文永久鏈接: http://www.twogeaux.com/nginx-proxy-laravel-vue-history.html
使用Nginx反向代理部署laravel和history模式的Vue項目[更新]:目前有2 條留言
已加入收藏夾,時不時的來看看有沒有更新博文!
測試一下