7

我的 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并.yml在 Web 控制台中配置时就是这样。

我已经尝试过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考虑到所有后端集成，似乎 amplify 应该自己处理这一代。ls不同时。有很多关于这方面的问题都是最新的，但没有真正的答案。谢谢你的时间

4

6 回答 6

5

我的解决方案是在“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. 我也不想每次都启动后端构建。构建后端会适得其反，因为它会为每个构建创建一个新的后端堆栈，这会花费更多的钱，进一步减慢速度，而且容易出错。

谢谢。

于 2020-09-23T08:53:34.137 回答
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/**/*

该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

于 2020-05-01T06:52:57.770 回答
3

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

于 2021-07-06T16:53:03.493 回答
1

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

于 2021-06-11T15:51:12.437 回答
0

对于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-updateswhich 成功（--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）

于 2022-01-10T14:30:31.510 回答
0

$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
...
于 2022-01-18T01:08:18.507 回答