簡體   English   中英

使用 Amplify 集成構建 AWS Amplify React 應用程序時始終缺少 aws-exports.js

[英]Missing aws-exports.js always when building AWS Amplify React app with Amplify integrations

我的 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不一樣了。 有許多關於此的問題是最新的,但沒有真正的答案。 謝謝你的時間

我的解決方案是在“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. 我也不想每次都啟動后端構建。 構建后端會適得其反,因為它會為每個構建創建一個新的后端堆棧,這會花費更多的錢,進一步減慢速度,而且容易出錯。

謝謝。

后端資源需要運行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

在使用“amplify init”之后,系統詢問將文件放在哪里,並指定 src 作為放置它的文件夾,並且看它放置我的 aws-export.js 的地方。 因此,請查看您的文件夾,因為它可能位於另一個文件夾而不是主目錄中。

對於登陸這里的任何人,Amplify 控制台剛剛發布了一種方法,以便您可以在構建時自動生成 aws-exports 文件,而無需啟用全棧 CI/CD 並將其檢入 git 存儲庫: https://docs.aws.amazon。 com/amplify/latest/用戶指南/amplify-config-autogeneration.html

對於任何可能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)

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

對於在 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);
});

我基本上忽略了 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

我的 React/GraphQL/Amplify 堆棧也有這個問題。

在我的后端托管頁面上禁用全棧持續部署 (CI/CD) 是為我修復的,即。 允許 AWS 自動生成我的 AWS 配置文件,包括 aws-exports.js。

禁用_CICD_快照

AWS 在這里給出了一些解釋。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM