Question

我的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不同时。围绕此问题有很多问题，但尚无真正答案。谢谢您的时间

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/**/*

原因：

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

谢谢。

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/userguide/amplify-config-autogeneration.html

在构建具有Amplify集成的AWS Amplify React应用时，总是会缺少aws-exports.js

4 个答案: