Docker 平台上的 elasticbeanstalk：react 应用程序的 502 Bad Gateway答案

【问题标题】：elasticbeanstalk on the Docker platform: 502 Bad Gateway for the react appDocker 平台上的 elasticbeanstalk：react 应用程序的 502 Bad Gateway
【发布时间】：2021-07-01 14:27:22
【问题描述】：

我有一个从 Dockerfile.dev 部署的虚拟反应应用程序：

FROM node:alpine AS builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html

在使用 TravisCI 推送到 GitHub 后立即部署到 elasticbeanstalk：

sudo: required
services:
  - docker

before_install:
  - docker build -t name/docker-react -f Dockerfile.dev .

script:
  - docker run -e CI=true name/docker-react npm run test

deploy:
  provider: elasticbeanstalk
  region: 'us-east-1'
  app: 'docker'
  env: 'Docker-env'
  bucket_name: 'elasticbeanstalk-us-east-1-709516719664'
  bucket_path: 'docker'
  on:
    branch: main
  access_key_id: $AWS_ACCESS_KEY
  secret_access_key: $AWS_SECRET_KEY

应用程序已成功部署到 EB，但在我访问它时显示 502 Bad Gateway（通过单击 AWS EB 中的应用程序链接）。增强的健康概览报告： 进程默认状态不正常 18 小时 (Target.FailedHealthChecks)。

Docker-env EC2 实例正在运行，在允许所有传入连接后，我可以正常连接：

我可以毫无问题地在本地使用 Dockerfile.dev 构建我的应用程序：

docker build -t name/docker-react -f Dockerfile.dev .
 => => naming to docker.io/name/docker-react  

docker run -p 3000:3000 name/docker-react

【问题讨论】：

标签： reactjs docker amazon-elastic-beanstalk

【解决方案1】：

AWS 很难使用 '.'文件夹名称，更喜欢长格式。/

尝试将 COPY 指令编辑为 COPY package*.json ./

并尝试删除命名的构建器。默认情况下，阶段没有命名，您可以通过整数来引用它们，第一个 FROM 指令从 0 开始。

您的 Dockerfile 应如下所示：

FROM node:alpine
WORKDIR '/app'
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 80
COPY --from=0 /app/build /usr/share/nginx/html

你应该有一个 docker-compose.yml，只要确保你在里面有正确的端口映射：示例：

services:
    web-service:
        build:
            context: .
            dockerfile: Dockerfile.dev
        ports:
            - "80:3000" # outside:inside container

最后必须编辑您的 TravisCI 配置。 secret_acces_key 有一个“S”

...
    access_key_id: $AWS_ACCESS_KEY
    secret_acces_key: $AWS_SECRET_KEY

【讨论】：