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

IT技术 node.js django reactjs amazon-elastic-beanstalk
2021-05-18 11:56:27

我曾经在 Heroku 上有我的应用程序,它在那里工作的方式是我有 2 个 buildpack。一种用于 NodeJS,一种用于 Python。Heroku 运行npm run build,然后 Django 提供文件build夹中的文件。

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

由于我无法弄清楚如何npm run build在 EB 中的 python 环境中运行,我有一个解决方法。我运行npm run build并将其推送到我的存储库(build从 .gitignore 中删除了文件夹),然后 Django 在 EB 上提供了这些文件。

然而,这不是最好的解决方案,我想知道是否有人知道如何运行npm run buildHeroku 可以使用他们的 NodeJS buildpack 在 EB 上运行 python 应用程序的方式。

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"

希望这可以帮助任何遇到相同情况的人🙂

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

默认情况下app.js适用于 Node.js 平台的 Elastic Beanstalk 使用,然后server.js,然后npm start按此顺序)启动您的应用程序。

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

  1. .ebextensions/<your-config-file-name>.config使用以下内容创建以下文件
    option_settings:
      aws:elasticbeanstalk:container:nodejs:
        NodeCommand: "npm run eb:prod"
    
  2. 编辑您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"
    }
    
  3. 在构建过程中,您可能会遇到权限被拒绝的错误。要解决此问题,您可以创建.npmrc包含以下内容的文件:
    # Force npm to run node-gyp also as root
    unsafe-perm=true
    

如果您需要更多详细信息,我写了一篇关于它的博文:我使用 AWS Elastic Beanstalk 部署了一个服务器端 React 应用程序。这是我学到的。