如何通过Passenger / Nginx在Digital Ocean上部署Django / React / Webpack应用程序

2023年3月24日 222次阅读

我正在尝试在Digital Ocean Droplet上部署使用Django / Redux / React / Webpack构建的Web应用程序.我在部署服务器上使用Phusion Passenger和Nginx.

我使用create-react-app来构建一个Django应用程序,它有一个使用React / Redux的前端,以及一个使用django-rest-framework的后端api.我使用npm run build构建了前端.

Django应用程序配置为在frontend / build文件夹中查找其文件,一切都按预期工作,包括身份验证.它基于本教程：http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

在settings.py中：

ALLOWED_HOSTS = ['*']

TEMPLATES = [
... 
       'DIRS': [
            os.path.join(BASE_DIR, 'frontend/build'),
        ],
...
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

在我的开发机器上,我激活Python 3.6虚拟环境并运行./manage.py runserver,应用程序显示在localhost：3000.

在部署服务器上,我已将文件克隆到var / www /中的文件夹中并构建了前端.

我根据文档设置了乘客,文件为passenger_wsgi.py：

import myapp.wsgi
application = myapp.wsgi.application

并且wsgi.py文件位于以下djangoapp文件夹中：

import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myapp.settings')
application = get_wsgi_application()

Passenger文档仅涵盖单部分应用：

https://www.phusionpassenger.com/library/walkthroughs/start/python.html
https://www.phusionpassenger.com/library/walkthroughs/deploy/python/digital_ocean/nginx/oss/xenial/deploy_app.html
https://www.phusionpassenger.com/library/deploy/wsgi_spec.html

我已经尝试将教程第1部分代码直接克隆到我的服务器上,并按照说明运行它.我通过在前端/ package.json中添加“proxy”：“http：// localhost：8000”来使用它在服务器上工作.如果我使用./manage.py runserver运行Django服务器–settings = ponynote.production_settings xxx.x.x.x：8000
 然后应用程序在myserver：8000正确提供.但是,Passenger仍未提供正确的文件.

我已经改变了wsgi.py这样说：

import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myapp.production_settings")
application = get_wsgi_application()

Passenger在URL根目录下提供的页面现在似乎具有指向js文件的正确链接,例如“text / javascript”src =“/ static / bundles / js / main.a416835a.js,但链接不起作用：预期的js不存在.即使Django服务器可以找到它们,Passenger也无法从static / bundles / js提供js文件.

非常感谢任何帮助或想法.

最佳答案 Create-react-app对本地和生产环境有相当明确的设置.

在本地,运行npm start将运行webpack-dev-server,您通常可以在端口3000上访问它.它运行本地nodejs Web服务器来提供文件.您可以通过proxy设置将请求路由到本地Django服务器.

值得注意的是,此时您的React应用程序与Django之间几乎没有联系.如果您使用代理设置,连接这两个应用程序的唯一方法是将您的React应用程序未处理的任何请求通过端口路由到您的Django应用程序.

默认情况下,在生产中你会运行创建反应应用程序(并且如你在后面提到的教程中所述)运行npm run build,它会将你的create-react-app文件处理成静态的JS和CSS文件,然后进行访问在Django像static files any other Django app.

为了访问静态文件,Django缺少的一件事是在运行npm run build时知道生成哪些文件的方法.运行构建通常会导致文件输出如下：

- css
   |- main.e0c3cfcb.css
   |- main.e0c3cfcb.css.map
- js
   |- 0.eb5a2873.chunk.js
   |- 0.eb5a2873.chunk.js.map
   |- 1.951bae33.chunk.js
   |- 1.951bae33.chunk.js.map

随机散列被添加到文件名以确保cache busting.这是webpack-bundle-tracker和django-webpack-loader进入的位置.生成构建文件时,还会创建一个名为manifest.json的附带文件,列出为构建创建的文件.这是在Webpack中生成的,并由django-webpack-loader选中,这样Django就可以知道要导入哪些文件.

可以在生产中运行nodejs服务器,或者使用server-side rendering,但是如果你按照你提到的教程并使用create-react-app默认设置,那么运行npm run build和部署静态文件是最简单的,最安全的选择.

您提及的任何Passenger部署链接中的任何内容都不包括除部署Python / Django应用程序之外的任何内容 – 您需要管理两个应用程序和部署,以使Django和React在生产中作为服务器运行.

请注意,您提到的教程涵盖了如何在生产中将构建文件放入Django,但是您需要确保将webpack-bundle-tracker,django-webpack-loader和Django静态文件配置全部配置为一起工作.

点赞