[英]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/**/*
原因:
謝謝。
后端資源需要運行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 ,然后通過這樣做提交它:
git rm -r --cached.
git add.
git commit -m "Added aws-exports.js file"
git push
我的 React/GraphQL/Amplify 堆棧也有這個問題。
在我的后端托管頁面上禁用全棧持續部署 (CI/CD) 是為我修復的,即。 允許 AWS 自動生成我的 AWS 配置文件,包括 aws-exports.js。
AWS 在這里給出了一些解釋。
https://docs.aws.amazon.com/amplify/latest/userguide/amplify-config-autogeneration.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.