前后端分离的前端是怎么部署到生产环境中的，直接通过 nginx 吗？

[Mirachael]

前后端分离在本地测试没问题，但是需要部署到服务器上，目前的方式就是直接用 nginx 直接定位到项目文件夹中的 index.html 文件？
但是，我总觉得有其他的方法，比如在项目中用 python 来启动一个服务，然后用 nginx 来监听这个端口？

最好的办法是什么，求解！

[Ellison]

nginx 直接定位到项目文件夹中的 index.html 文件
这哪里分离了...

比如后端跑 Apache 监听 8080 端口,nginx 就 proxy_pass 到 8080

[6IbA2bj5ip3tK49j]

nginx 直接暴露 html ， js ， css 等资源。反代接口部分。
我是这样做的。

[wakemecn]

楼主的这个想法叫反向代理

[Mirachael]

@Ellison 对啊，前端的入口文件不是 index.html 么，我本地就是这么做的。

[Mirachael]

@xgfan 这样吗
location / {
root /Users/mojixiang/Works/xinmei/client;
index index.html index.htm;
}

[Mirachael]

@wakemecn 我后端 api 用的反向代理

[Mirachael]

@wakemecn 所以我觉得前端也应该可以的

[wakemecn]

@mojixiang1102 静态内同，反向代理干嘛。多加了一层不说，还放弃了 Nginx 的缓存。动态内容当然还是要反向代理

[minfzhon]

反向代理吧

[learnshare]

是 Nginx 反向代理啊，或者单纯 80 服务给静态文件目录

[Mirachael]

@wakemecn 懂了，多谢！

[oott123]

前后端分离就是为了让你的前端有一个 nginx 就能跑的
你还弄个 Python 上去是要闹哪样

[br00k]

nginx 反代接口

[Mirachael]

@oott123 我错了，之前没搞明白，对不起，拉低了程序员的平均水平！

[karloku]

然而我们的前端不满足于做 spa, 开始折腾用 node 做中间件了...

[loading]

静态文件交给 nginx ，然后重定向 python 的 api 。

以 flask 为例

nginx 将 /static 部分搞定。这一步你当 python 不存在！

接着你的 flask 应该只监听 127.0.0.1:5001 而不是 80 端口

让 nginx 将 80 口的请求转到 127.0.0.1:5001

进阶:开多个 flask 在 5001 5002 5003 5004 ，让 nginx 做负载均衡！

[ericls]

前后分离不是 angular vue react 这些干的事情么。。

后端就是个 API

[crayonyi]

分享一下我在线上的配置吧：
upstream bowenpay_backend {
server 127.0.0.1:9002;
}

server {
listen 80;
server_name wx.bowenpay.com;
location = / {
root /var/www/wxweb/dist;
index index.html;
}

location ~* \.(html|htm )$ {
root /var/www/wxweb/dist;
index index.html;
}

location / {
proxy_pass http://bowenpay_backend;
proxy_set_header Host $http_host;
}

location ~* \.(css|js|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|map|mp4|ogg|ogv|webm|htc )$ {
root /var/www/wxweb/dist;
index index.html;
expires 1M;
access_log off;
add_header Cache-Control "public";
}

}

整体思路就是：
1 ）静态文件（ html/css/js/图片 /字体等）直接去对应目录下访问
2 ）其它（ api 访问）代理到对应 api 服务的端口

[H4cK]

@crayonyi 请问 nginx 支持对静态文件的负载均衡么？比如例子中的 html|htm 项，是否有可能通过培植分流到不同的 nginx 服务器呢？ thx

[crayonyi]

@H4cK 可以的。 负载均衡 和 静态文件服务 是两码事。可以配合使用的。
原理就是在前面再加一个 nginx ，设置 upstream ，分流到当前的机器。参考上面的 bowenpay_backend 设置。