V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
Mirachael
V2EX  ›  Python

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

  •  
  •   Mirachael · 2015-08-20 16:41:54 +08:00 · 29120 次点击
    这是一个创建于 3143 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    最好的办法是什么,求解!

    20 条回复    2016-03-08 19:00:59 +08:00
    Ellison
        1
    Ellison  
       2015-08-20 17:20:08 +08:00
    nginx 直接定位到项目文件夹中的 index.html 文件
    这哪里分离了...

    比如后端跑 Apache 监听 8080 端口,nginx 就 proxy_pass 到 8080
    xgfan
        2
    xgfan  
       2015-08-20 17:22:41 +08:00
    nginx 直接暴露 html , js , css 等资源。反代接口部分。
    我是这样做的。
    wakemecn
        3
    wakemecn  
       2015-08-20 17:34:46 +08:00
    楼主的这个想法叫反向代理
    Mirachael
        4
    Mirachael  
    OP
       2015-08-20 17:47:42 +08:00
    @Ellison 对啊,前端的入口文件不是 index.html 么,我本地就是这么做的。
    Mirachael
        5
    Mirachael  
    OP
       2015-08-20 17:49:50 +08:00
    @xgfan 这样吗
    location / {
    root /Users/mojixiang/Works/xinmei/client;
    index index.html index.htm;
    }
    Mirachael
        6
    Mirachael  
    OP
       2015-08-20 17:50:34 +08:00
    @wakemecn 我后端 api 用的反向代理
    Mirachael
        7
    Mirachael  
    OP
       2015-08-20 17:51:26 +08:00
    @wakemecn 所以我觉得前端也应该可以的
    wakemecn
        8
    wakemecn  
       2015-08-20 18:02:15 +08:00
    @mojixiang1102 静态内同,反向代理干嘛。多加了一层不说,还放弃了 Nginx 的缓存。动态内容当然还是要反向代理
    minfzhon
        9
    minfzhon  
       2015-08-20 18:07:34 +08:00 via iPhone
    反向代理吧
    learnshare
        10
    learnshare  
       2015-08-20 18:24:02 +08:00
    是 Nginx 反向代理啊,或者单纯 80 服务给静态文件目录
    Mirachael
        11
    Mirachael  
    OP
       2015-08-20 18:27:24 +08:00
    @wakemecn 懂了,多谢!
    oott123
        12
    oott123  
       2015-08-20 18:52:29 +08:00
    前后端分离就是为了让你的前端有一个 nginx 就能跑的
    你还弄个 Python 上去是要闹哪样
    br00k
        13
    br00k  
       2015-08-20 19:18:33 +08:00
    nginx 反代接口
    Mirachael
        14
    Mirachael  
    OP
       2015-08-20 23:10:49 +08:00
    @oott123 我错了,之前没搞明白,对不起,拉低了程序员的平均水平!
    karloku
        15
    karloku  
       2015-08-21 00:35:37 +08:00
    然而我们的前端不满足于做 spa, 开始折腾用 node 做中间件了...
    loading
        16
    loading  
       2015-08-21 07:02:20 +08:00 via Android   ❤️ 1
    静态文件交给 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
        17
    ericls  
       2015-08-21 07:57:15 +08:00
    前后分离不是 angular vue react 这些干的事情么。。

    后端就是个 API
    crayonyi
        18
    crayonyi  
       2015-08-21 10:10:43 +08:00   ❤️ 3
    分享一下我在线上的配置吧:
    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
        19
    H4cK  
       2016-03-07 15:22:53 +08:00
    @crayonyi 请问 nginx 支持对静态文件的负载均衡么?比如例子中的 html|htm 项,是否有可能通过培植分流到不同的 nginx 服务器呢? thx
    crayonyi
        20
    crayonyi  
       2016-03-08 19:00:59 +08:00
    @H4cK 可以的。 负载均衡 和 静态文件服务 是两码事。可以配合使用的。
    原理就是在前面再加一个 nginx ,设置 upstream ,分流到当前的机器。参考上面的 bowenpay_backend 设置。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1385 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:43 · PVG 07:43 · LAX 16:43 · JFK 19:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.