将你的 Django + React.js 应用部署到 Heroku

概述

设置

生成 React App

创建 Python Virtualenv

生成 Django 应用

更新设置

测试我们的设置

准备部署 Heroku

如今，我们通常会看到后端提供 API，而各种前端技术（例如React、Vue 、移动应用程序）也使用这些 API 端点为用户提供用户界面。随着React、Vue、Angular等优秀 JavaScript 框架的流行，这种开发方法也越来越流行。

部署此类 Web 应用程序主要有两种方式：

分离后端和前端：在此方法中，您将分别服务后端和前端应用，并通过各自的 URI 相互连接。此方法的一个主要缺点是您必须CORS自行配置。如果您不了解，可以点击此处CORS了解更多信息。
从同一主机提供服务：使用此方法，您将从同一 URI 为应用提供服务，从而消除了CORS开销。此外，它还使维护中小型应用更加容易。您肯定不想为一些简单的网站（例如博客、待办事项等）创建两个单独的存储库。

概述

我将向你展示如何将我的Django应用与React.js前端集成。我们将遵循以下步骤：

使用以下方式生成 React 应用程序create-react-app
创建虚拟环境并安装必要的依赖项
在我们的 React 应用程序中生成一个 django 项目
更新两个应用程序的设置
部署到 Heroku

本教程中显示的代码示例可在此处获得。

设置

为了以防万一，我在下面列出了我正在使用的技术栈：

节点 11.15.0
Python 3.7.3
yarn 1.17.3（节点包管理器）
poetry 0.12.16（Python包管理器）

PS Poetry在 Python 社区中相对较新。它使 Python 项目的依赖管理更加便捷。此外，类似pipenv这样的工具也会帮你处理虚拟环境。你可以使用这个，或者直接使用pip，pipenv或者任何其他你喜欢的解决方案。

生成 React App

首先，我们必须生成一个 React 应用，它将作为我们的前端。在本教程中，我将项目命名为。您可以根据自己的喜好进行更改。让我们创建 React 应用。在这里，我生成了一个使用TypeScriptdjango-react-boilerplate的 React 应用。您可以忽略它，只需省略上述命令中的部分即可。运行以下命令来生成您的 React 应用：--typescript

$ yarn create react-app django-react-boilerplate --typescript

上述命令将创建一个名为的目录django-react-boilerplate，它应该具有以下结构。

django-react-boilerplate
├── node_modules
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── package.json
├── tsconfig.json
└── yarn.lock

创建 Python Virtualenv

我将使用Poetry来做到这一点。因此，如果您严格按照步骤操作，则必须安装 Poetry。您可以从这里获取说明。您可以自由选择任何其他您喜欢的虚拟环境解决方案。首先，让我们将目录更改为生成的 React 应用程序。然后初始化 Poetry。它会询问您一些与项目相关的常规问题。您可以选择回答这些问题，否则将使用 Poetry 的默认值。您也可以在安装应用程序时安装依赖项，但在本例中我不会这样做。按照上述说明操作后，您的 shell 可能看起来像这样。

$ cd django-react-boilerplate
$ poetry init

This command will guide you through creating your pyproject.toml config.

Package name [django-react-boilerplate]:
Version [0.1.0]:
Description []:
Author [Shakib Hossain <shakib609@gmail.com>, n to skip]:
License []:
Compatible Python versions [^3.7]:

Would you like to define your dependencies (require) interactively? (yes/no) [yes] no



Would you like to define your dev dependencies (require-dev) interactively (yes/no) [yes] no

Generated file

[tool.poetry]
...
...

Do you confirm generation? (yes/no) [yes] yes

生成文件完成后pyproject.toml，就可以开始安装项目所需的依赖项了。我们来安装它们：

$ poetry add django djangorestframework whitenoise gunicorn django-heroku

上述命令将为您生成一个虚拟环境并将所有依赖项安装到其中。

django-herokuPS如果您尚未安装，则安装时可能会遇到问题postgresql。

生成 Django 应用

现在是时候生成我们的django应用程序了。首先，我们必须启用虚拟环境。如果您使用的poetry是其他方法，请继续操作；否则，请使用您的解决方案方法激活虚拟环境。诗歌用户可以使用以下命令激活他们的虚拟环境：

$ poetry shell

激活shell后，我们就可以访问djangopython包以及包中自带的脚本了，例如django-admin。让我们在django-react-boilerplate目录中生成项目。我将后端项目命名为backend。您可以自由选择自己的名称。运行以下命令在当前目录中生成项目：

# Make sure you're inside the django-react-boilerplate directory
$ django-admin startproject backend .

生成 django 项目后，我们的项目结构将类似于此。

├── backend
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── package.json
├── Procfile
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── pyproject.toml
├── README.md
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock

更新设置

我们要做的第一个更改是proxy为我们的 . 添加一个键。这将代理我们开发中的所有 API 请求。您可以在此处package.json了解更多信息。将以下行添加到您的文件中。package.json

{
  ...
  "proxy": "http://localhost:8000"
}

之后，我们需要static在该public目录中创建一个名为的目录。我们将把目录中除文件之外的内容移动public到这个新static目录中index.html。移动后的public目录应如下所示。

public
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

我们必须移动这些文件，以便当我们通过执行构建我们的 React 应用程序时，yarn build我们将在一个目录中获取这些文件build/static，我们将其用作我们的 Django 项目STATIC_ROOT。

现在，根据我们的目录结构，我们必须重构public/index.html文件。打开public/index.html文件并将favicon.ico和manifest.jsonurl 更新为/static/favicon.ico和/static/manifest.json。

我们的 React 应用的所有配置都已完成。现在，我们必须配置我们的 Django 项目。

我们主要需要一个 HTML 文件（React 应用生成的 HTML 文件）。让我们在 Django 应用中创建一个视图来提供这个 HTML 文件。我将使用 Generic TemplateView 来创建该视图。在目录views.py中创建一个文件backend，并将以下 Python 代码添加到该文件中：

from django.views.generic import TemplateView
from django.views.decorators.cache import never_cache

# Serve Single Page Application
index = never_cache(TemplateView.as_view(template_name='index.html'))

never_cache这里需要注意的是，我在初始化视图时使用了装饰器index。这个装饰器非常简单。它会将响应头添加到响应中，这样它就永远不会被缓存。我们将从index.htmlReact 应用生成文件，而该文件可能随时更改。这就是为什么我们不希望任何浏览器缓存过时的index.html文件。

我们已经编写了index视图。现在让我们将它添加到。我们将从根 URLurls.py提供。现在打开你的并根据以下代码进行更新：index.htmlurls.py

from django.contrib import admin
from django.urls import path

from .views import index

urlpatterns = [
    path('', index, name='index'),
    path('admin/', admin.site.urls),
]

我们的大部分工作已经完成。现在我们要做的就是更新backend/settings.py文件。在这里，我们首先按照django-heroku 文档中的说明进行操作。应用这些更改后，我们的应用程序将无法立即运行。我们必须settings.py进一步更新文件才能使其正常工作。首先，在下面的列表中添加whitenoise和。您必须在之前列出。我们还必须在 Djangos 之后添加中间件。rest_frameworkINSTALLED_APPSwhitenoisedjango.contrib.staticfileswhitenoiseSecurityMiddleware

INSTALLED_APPS= [
    ...
    'whitenoise.runserver_nostatic',  # < As per whitenoise documentation
    'django.contrib.staticfiles',

    # 3rd party apps
    'rest_framework',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',  # Whitenoise Middleware
    ...
]

现在，我们必须更新TEMPLATES设置，以便我们的 Django 应用能够找到index.html我们在文件中引用的内容backend/views.py。您也可以在此处添加要包含的其他目录。

TEMPLATES = [
    {
        'BACKEND':
        'django.template.backends.django.DjangoTemplates',
        'DIRS':
        [os.path.join(BASE_DIR, 'build')]
        ...
    }
]

快完成了！我们需要更新STATIC文件相关设置，并将其移至文件底部backend/settings.py。settings.py请按如下方式更新文件：

# Import django_heroku module at the top of your settings.py file
import django_heroku

...
...


# Configure app for Heroku deployment
django_heroku.settings(locals())

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
# Place static in the same location as webpack build files
STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')
STATICFILES_DIRS = []

# If you want to serve user uploaded files add these settings
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'build', 'media')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

测试我们的设置

现在我们可以测试我们的应用了。在这个设置中，我们需要记住以下几点：

yarn build更新前端后始终运行
在开发时，您必须分别运行react服务器和django服务器才能利用这些服务器的内置热重载。

现在，运行以下命令来测试我们的应用程序是否正确提供文件。

$ yarn build
$ poetry shell
$ python manage.py runserver

打开你喜欢的浏览器并导航到localhost:8000。你应该会看到默认的 React 应用。

。

准备部署 Heroku

首先，让我们heroku使用以下命令创建我们的应用程序（确保您已heroku-cli安装）：

$ heroku create drt-boilerplate

将nodejs构建python包和插件postgresql添加至我们的应用程序。

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev

创建一个Procfile：

release: python manage.py migrate
web: gunicorn backend.wsgi --log-file -

这里，该release选项确保在每次部署后运行 Django 迁移。并且该选项使用HTTP 服务器web为你的 Django 应用程序提供服务。gunicorn

您必须生成一个requirements.txt用于部署的文件heroku。所以，别忘了这样做。

$ poetry export -f requirements.txt --output requirements.txt

我们已经准备好推送应用的第一个版本了。创建一个 git 仓库并提交。之后，运行以下命令将文件推送到 Heroku：

$ git push heroku master

这将触发部署并显示部署进度。部署成功后，它会显示应用的 URL。我的 URL 是https://drt-boilerplate.herokuapp.com/。现在，为自己完成这个任务而感到自豪吧！😀

本文最初发表于此处。

鏂囩珷鏉ユ簮锛�https://dev.to/shakib609/deploy-your-django-react-js-app-to-heroku-2bck

将您的 Django + React.js 应用部署到 Heroku 概览设置生成 React 应用创建 Python Virtualenv 生成 Django 应用更新设置测试我们的设置准备部署 Heroku

将你的 Django + React.js 应用部署到 Heroku

概述

设置

生成 React App

创建 Python Virtualenv

生成 Django 应用

更新设置

测试我们的设置

准备部署 Heroku

概述

设置

生成 React App

创建 Python Virtualenv

生成 Django 应用

更新设置

测试我们的设置

准备部署 Heroku