Laravel+vue-cli 前后端在 nginx 分离部署问题

请教朋友们,我分别建了vue-cli项目和laravel项目,现在将它们放到服务器上的/var/www/dist和/var/www/blog目录下。这是我vue项目的配置:

server {
    listen 80; 
    server_name _;
    root /var/www/dist;

    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

}

然后我选择用另一个端口(8080)来访问laravel项目:(我在防火墙打开了8080端口)

server {
    listen 8080;
    server_name _;
    root /var/www/blog/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

}

最后,就能通过“我的ip”访问vue前端,通过“我的ip:8080/api/...”访问laravel的接口了。
但是我感觉这个配置方法不大对劲,感谢热心人士为我指出~

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
最佳答案

不大对劲是什么意思,描述不太清楚啊,如果问题不清楚,那答案也不会清晰。

那我就猜测一下答案吧。

你是觉得第三方不应该访问到laravel的接口吗?如果是前后端分离的项目,那么接口一定是会暴露的,不用觉得不对劲。你可以提高安全性,比如设置Referer,User-Agent等等。
如果你觉得开了个8080端口不合适,那么用nginx做个上游代理就可以了,同一个域名可以根据某些规则,代理为网页的url和api的uri。比如www.learnku.com/api 代理为laravel应用,www.learnku.com/vue 代理vue应用。

3个月前 评论
Tricker 3个月前
Tricker 3个月前
L学习不停 (作者) 3个月前
Tricker 3个月前
L学习不停 (作者) 3个月前
胖橘 (楼主) 3个月前
讨论数量: 3

不大对劲是什么意思,描述不太清楚啊,如果问题不清楚,那答案也不会清晰。

那我就猜测一下答案吧。

你是觉得第三方不应该访问到laravel的接口吗?如果是前后端分离的项目,那么接口一定是会暴露的,不用觉得不对劲。你可以提高安全性,比如设置Referer,User-Agent等等。
如果你觉得开了个8080端口不合适,那么用nginx做个上游代理就可以了,同一个域名可以根据某些规则,代理为网页的url和api的uri。比如www.learnku.com/api 代理为laravel应用,www.learnku.com/vue 代理vue应用。

3个月前 评论
Tricker 3个月前
Tricker 3个月前
L学习不停 (作者) 3个月前
Tricker 3个月前
L学习不停 (作者) 3个月前
胖橘 (楼主) 3个月前
Tricker

你 vue 的配置文件有问题,仔细看看

3个月前 评论
playmaker

我的 vue-cli 这样配置的
file

3个月前 评论
胖橘 (楼主) 3个月前
playmaker (作者) 3个月前
胖橘 (楼主) 3个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!