如何在 Elastic Beanstalk 上使用 Django 提供 React 应用程序？

Posted 2023-03-04

【中文标题】如何在 Elastic Beanstalk 上使用 Django 提供 React 应用程序？

【英文标题】：How to Serve a React App with Django on Elastic Beanstalk?

【发布时间】：2020-07-30 20:49:53

【问题描述】：

我曾经在 Heroku 上安装我的应用程序，它的工作方式是我有 2 个构建包。一个用于 NodeJS，一个用于 Python。 Heroku 运行 npm run build，然后 Django 提供 build 文件夹中的文件。

每当我的 GitHub 存储库有新推送时，我都会使用 AWS 上的 Code Pipeline 来部署我的应用程序的新版本。

由于我不知道如何在 EB 的 python 环境中运行 npm run build，所以我有一个解决方法。我运行 npm run build 并将其推送到我的存储库（从 .gitignore 中删除了 build 文件夹），然后 Django 在 EB 上提供文件。

但是，这不是最好的解决方案，我想知道是否有人知道如何运行 npm run build，就像 Heroku 可以使用他们的 NodeJS buildpack 在 EB 上运行 python 应用程序一样。

【参考方案1】：

我不完全了解 Python，但我想你可以适应你的情况。

用于 Node.js 平台的 Elastic Beanstalk 默认使用 app.js，然后是 server.js，然后是 npm start（按此顺序）来启动您的应用程序。

您可以使用配置文件更改此行为。下面是使用 Node.js 完成的步骤：

创建以下文件.ebextensions/<your-config-file-name>.config，内容如下：

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm run eb:prod"

编辑您的package.json 以创建eb:prod 命令。例如：

"scripts": 
  "start": "razzle start",
  "build": "razzle build",
  "test": "razzle test --env=jsdom",
  "start:prod": "NODE_ENV=production node build/server.js",
  "eb:prod": "npm run build && npm run start:prod"

您可能会在构建过程中遇到权限被拒绝错误。要解决此问题，您可以创建具有以下内容的.npmrc 文件：

# Force npm to run node-gyp also as root
unsafe-perm=true

如果您需要更多详细信息，我写了一篇关于它的博文：I deployed a server-side React app with AWS Elastic Beanstalk. Here’s what I learned.

【讨论】：

感谢您的回答。我使用 Python 不仅为 react 应用程序提供服务，还为 API 和身份验证提供服务。为了使用 Python 和 Django 框架，我必须使用 EB for Python。所以我想知道是否可以在我的 pythonic EB 中构建我的 react 应用程序的生产版本。

我无法为您提供有关 python 的帮助，但概念仍然相同。您必须使用.ebextensions 自定义命令才能启动您的应用程序。让您了解如何编辑配置文件：docs.aws.amazon.com/elasticbeanstalk/latest/dg/…

【参考方案2】：

所以我想出了一个适合我的解决方案。

因为我想像 Heroku 使用 NodeJS buildpack 那样在服务器上创建我的应用程序的构建版本，所以我必须创建一个安装节点的命令，如下所示：

container_commands:
  01_install_node:
    command: "curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash - && sudo yum install nodejs"
    ignoreErrors: false

然后为了在 Python 环境 EB 上创建 react 应用的构建版本，我添加了以下命令：

container_commands:
  02_react:
    command: "npm install && npm run build"
    ignoreErrors: false

所以当然，在构建版本创建之后，你应该收集静态文件，所以这是我的工作配置文件最后的样子：

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: <project_name>/wsgi.py

  aws:elasticbeanstalk:application:environment:
    DJANGO_SETTINGS_MODULE: <project_name>.settings

  aws:elasticbeanstalk:container:python:staticfiles:
    /static/: staticfiles/

container_commands:
  01_install_node:
    command: "curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash - && sudo yum install nodejs"
    ignoreErrors: false

  02_react:
    command: "npm install && npm run build"
    ignoreErrors: false

  03_collectstatic:
    command: "django-admin.py collectstatic --noinput"

希望这对遇到相同情况的人有所帮助?