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

Question

我的 React 应用程序使用 GraphQL API、存储、身份验证、函数、托管 - 所有有趣的东西 - 所以我必须有一个可用的aws-exports.js文件。 Amplify React Front end with Amplify Backend 资源。

回购基本上设置为：

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

它只是挂起并期待输入。 我不认为像这样手动输入 creds 就像一直到 go 一样。

考虑到所有后端集成，似乎 amplify 应该自己处理这一代aws-exports.js 。 什么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 提交到 repo 当然是一个很大的问题，因为它包含 API 密钥和其他机密。
2. 我也不想每次都启动后端构建。 构建后端会适得其反，因为它会为每个构建创建一个新的后端堆栈，这会花费更多的钱，进一步减慢速度，而且容易出错。

谢谢。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 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 构建后端。 然后我开始审查后端的其他部分，假设它看起来像是成功构建但可能会失败。 我被引导到这个是因为在查看部署的“后端”阶段时没有大量的 output（见下文）：

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

这似乎可疑地没有更多的 output。 我专注于我的架构，特别是我添加并连接到一个突变的自定义 function，它看起来如下所示：

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 认为在修改架构时可能会删除一些数据/表） . 后端部署成功。

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

                                 # 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中的这些行有什么问题，但我一定是配置错误。 诚然，我不确定我是否完成了自定义 function 的编写，所以也许这就是原因。 但是，没有产生任何错误，这让我很快发现了这一点。

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

Answer 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
...

Answer 7

对于在 Vue 中构建的人（特别是 Vue3 Quasar）：

import { boot } from "quasar/wrappers";
import { Amplify } from "aws-amplify";
import awsconfig from "../aws-exports";

export default boot(({ app }) => {
    Amplify.configure(awsconfig);
    app.use(Amplify);
});

Answer 8

我基本上忽略了 aws-amplify 生成的文件列表到.gitigore ，我从.gitignore中删除了aws-exports.js exports.js ，然后通过这样做提交它：

1. git rm -r --cached.
2. git add.
3. git commit -m "Added aws-exports.js file"
4. git push

Answer 9

我的 React/GraphQL/Amplify 堆栈也有这个问题。

在我的后端托管页面上禁用全栈持续部署 (CI/CD) 是为我修复的，即。 允许 AWS 自动生成我的 AWS 配置文件，包括 aws-exports.js。

禁用_CICD_快照

AWS 在这里给出了一些解释。

https://docs.aws.amazon.com/amplify/latest/userguide/amplify-config-autogeneration.html