通过 Amplify 集成构建 AWS Amplify React 应用程序时始终缺少 aws-exports.js

Question

我的 React 应用程序使用 GraphQL API、存储、身份验证、函数、托管 - 所有有趣的东西 - 所以我必须有一个aws-exports.js可用的文件。使用放大后端资源来放大 React 前端。

回购协议基本上设置为：

package.json
src/
   - aws-exports.js
   - app.js
   - ...etc

并在每个目录中执行一个ls操作，显示在构建中没有aws-exports.js生成文件。

通过许多不同的配置，我遇到了：

[INFO]: # Executing command: yarn run build
[INFO]: yarn run v1.16.0
[INFO]: $ react-scripts build
[INFO]: Creating an optimized production build...
[INFO]: Failed to compile.
[INFO]: ./src/App.js
                                 Cannot find file './aws-exports' in './src'.
2020-04-30T00:52:34.883Z [WARNING]: error Command failed with exit code 1.

当我签入amplify.yml并.yml在网络控制台中进行配置时就是如此。

我已经尝试过amplify push;，但正如预期的那样遇到了

An error occured during the push operation: Current environment cannot be determined
Use 'amplify init' in the root of your app directory to initialize your project with Amplify

还尝试：amplify pull;或Executing command: amplify pull --appId abc123abc123 --envName dev

 # Starting phase: preBuild
# Executing command: amplify pull
For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? (Y/n)
.[43D.[43C

它只是挂起并等待输入。我不认为像这样手动输入信用是解决此问题的所有方法。

aws-exports.js考虑到所有后端集成，ampify 似乎应该处理这一代本身。当ls不同时。关于这个问题有很多当前的问题，但没有真正的答案。谢谢你的时间

Answer 1

我的解决方案是在“npm run build”步骤之前通过脚本简单地生成 aws-exports.js。

您只需将 aws-exports.js 内容存储在名为“secretfile”的环境变量中，然后在 amplify.yml 中使用它，如下所示

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo $secretfile > ./src/aws-exports.js
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

理由：

1. 将 aws-exports.js 提交到存储库当然是一个很大的问题，因为它包含 API 密钥和其他秘密。
2. 我也不想每次都启动后端构建。构建后端会适得其反，因为它会为每个构建创建一个新的后端堆栈，这会花费更多的钱，进一步减慢速度，而且容易出错。

谢谢。

Answer 2

对于来到这里的任何人，Amplify 控制台刚刚发布了一种方法，以便您可以在构建时自动生成 aws-exports 文件，而无需启用全栈 CI/CD 并将其签入您的 git 存储库：https://docs.aws.amazon。 com/amplify/latest/userguide/amplify-config-autogenesis.html

Answer 3

需要运行后端资源amplifyPush来生成预期的aws-exports.js文件。一个普通的react+amplify后端项目将需要一个如下所示的构建脚本：

version: 0.1
env:
  variables:
      key: value
backend:
  phases:
    build:
      commands:
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

该脚本是amplify-console repoamplifyPush的一部分，特别是 .sh 脚本位于https://github.com/aws-amplify/amplify-console/blob/master/scripts/amplifyPush.sh

有关在构建脚本中运行的其他内容的更多信息，请参阅此处。

https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html#frontend-with-backend