使用 Amplify 集成构建 AWS Amplify React 应用程序时总是缺少 aws-exports.js

Posted 2023-03-08

【中文标题】使用 Amplify 集成构建 AWS Amplify React 应用程序时总是缺少 aws-exports.js

【英文标题】：Missing aws-exports.js always when building AWS Amplify React app with Amplify integrations

【发布时间】：2020-08-14 07:00:34

【问题描述】：

我的 React 应用程序使用 GraphQL API、存储、身份验证、函数、托管——所有有趣的东西——所以我必须有一个可用的 aws-exports.js 文件。使用 Amplify Backend 资源放大 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 并在Web 控制台中配置.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

这只是挂起并期待输入。我不认为像这样手动输入凭据是一路走来的。

考虑到所有后端集成，似乎 amplify 应该自己处理这一代 aws-exports.js。当ls 不同时。有很多关于这方面的问题都是最新的，但没有真正的答案。感谢您的宝贵时间

【参考方案1】：

后端资源需要运行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/**/*

amplifyPush脚本是amplify-console repo的一部分，具体是.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

【参考方案2】：

我的解决方案是在“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/**/*

原因：

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

谢谢。

【讨论】：

感谢您的解决方案。对于发现此问题的任何人，请确保您的环境变量不以“aws”开头。

仅供参考 - aws-exports.js 中没有任何敏感内容。

【参考方案3】：

在使用“amplify init”后，系统询问将文件放在哪里，并指定 src 作为放置文件的文件夹，然后看它放置我的 aws-export.js 的位置。因此，请在您的文件夹中四处查看，因为它可能位于另一个文件夹而不是主目录中。

【参考方案4】：

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

【参考方案5】：

对于在构建前端时可能遇到Cannot find file './aws-exports' in './src'. 错误的任何人，我找不到（此处或其他地方）的任何建议都无法让我找到答案。

如 Amplify 文档中所述，aws-exports.js 文件是在成功构建后端后生成的。我的 Amplify 后端看起来好像正在成功构建，所以它应该生成 aws-exports.js（但事实并非如此）。

我在 Amplify 中仔细查看了我的构建配置（Amplify > App Settings > Build settings），我的backend 设置似乎与我看到的其他示例相匹配。以下是它的配置方式：

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

amplifyPush --simple 命令很重要，因为它指示 Amplify 构建后端。然后我开始审查后端的其他部分，假设它看起来像是成功构建但可能会失败。我被引导到这个是因为在查看部署的“后端”阶段时没有大量的输出（见下文）：

                                 # Starting phase: build
2022-01-10T13:54:13.394Z [INFO]: # Completed phase: build

这似乎令人怀疑地没有更多输出。我专注于我的架构，特别是我添加并连接到突变的自定义函数，如下所示：

type Mutation 
  generateToken(identity: String!): GenerateTokenResponse
    @function(name: "twilio-$env")


type GenerateTokenResponse 
  token: String
  identity: String

删除后，我运行了 amplify push --allow-destructive-graphql-schema-updates，它成功了（--allow-destructive-graphql-schema-updates 是必需的，因为 Amplify 认为在修改架构时可能会删除一些数据/表）。后端部署成功。

然后我对前端和后端进行了全面部署，最终成功部署。为了比较，我检查了“后端”构建阶段的输出，这次发现了更多输出：

                                 # Starting phase: build
[INFO]: [0mAmplify AppID found: XXXXXXXXXXXXXX. Amplify App name is: myApp[0m
[INFO]: [0mBackend environment dev found in Amplify Console app: myApp[0m
WARNING]: - Fetching updates to backend environment: dev from the cloud.
[WARNING]: - Building resource auth/userPoolGroups
[WARNING]: - Building resource auth/myAppAuth
[WARNING]: - Building resource api/myAppApi
[WARNING]: ✔ Successfully pulled backend environment dev from the cloud.
[INFO]: 
[INFO]: # Completed phase: build

我还没有确定schema.graphql 的这些行有什么问题，但我一定是配置不正确。诚然，我不确定我是否完成了自定义函数的编写，所以也许这就是原因。但是，没有产生任何错误，让我很快发现了这一点。

注意：使用 Amplify CI/CD 部署的带有 React 前端的 Amplify 应用程序，托管在 Cloudfront+S3 上（通过 Amplify）

【参考方案6】：

$amplify init 创建 aws-exports.js，它位于您在 init 命令中放置“分发目录路径”的位置。这是 next.js 中的一个示例。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project sampleapp
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: .next  // <- here!!
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...