AWS Amplify 构建设置

Question

使用 Amplify 我在部署 React 应用程序时遇到困难，我认为这是由于构建设置造成的。尝试部署时提供的默认构建设置如下所示：

我知道这是不正确的，我在构建日志中发现的错误是：

2020-05-14T00:02:22.327Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src568504829/src/chatterfield/

部署成功，除非我启动应用程序时收到 ERR_TOO_MANY_REDIRECTS。在我将baseDirectory构建设置更改为/client/public指向index.html. 该应用程序似乎启动时没有出现重定向错误，但没有加载任何内容。我猜这是因为我没有运行 npm run build 命令，或者没有加载预构建命令。任何帮助将不胜感激。谢谢 这是此应用程序链接到的存储库： https ://github.com/travelerr/chatterfield

Answer 1

如果您的 React 文件夹名称是“mycoolproject”，则您的 yml 将需要 cd 进入该目录。然后运行构建命令。baseDirectory 应该是您的最终构建所在的位置。

version: 0.1
frontend:
  phases:
    preBuild:
        commands:
          - cd mycoolproject
          - npm ci
    build:
        commands:
          - npm run build
  artifacts:
    baseDirectory: ./mycoolproject/build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

另外，您的放大应该指向构建目录... mycoolproject/amplify/config/project-config.json

{
  "providers": [
    "awscloudformation"
  ],
  "projectName": "mycoolproject",
  "version": "3.1",
  "frontend": "javascript",
  "javascript": {
    "framework": "react",
    "config": {
      "SourceDir": "src",
      "DistributionDir": "build",
      "BuildCommand": "npm run-script build",
      "StartCommand": "npm run-script start"
    }
  }
}

Answer 2

将 baseDirectory:/ 更改为 baseDirectory:build 。这对我有用。

Answer 3

对于任何发现此内容并将其应用程序放入名为 frontend 的文件夹（或任何其他替代 frontend 的应用程序路径的人）。

version: 0.1
frontend:
  phases:
    preBuild:
        commands:
          - cd frontend
          - npm ci
    build:
        commands:
          - npm run build
  artifacts:
    baseDirectory: ./frontend/build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*