ちょうどあなたが次のアプリケーションを開発するときに行う必要があります.JS +タイプスクリプト+ AWS増幅
10839 ワード
ただ追加
次.JSにはありません
それで、我々が増幅プロジェクトをセットするとき、我々はセットしました
ところで、AWAHリソースをオーバーライドできます.
overrideオプションを使用すると、CLI生成を増幅します
そして、このファイルは予期せぬビルドターゲットになります.js
だから、我々は“増幅”を追加する必要があります
以下の手順でエラーを確認できます.
まず、追加
次.js 12.1.4 増幅する 8.0.0 ノード V 1614.2 .
“amplify”
into exclude
プロパティtsconfig.json
.{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "amplify"]
}
なぜ
次.JSにはありません
src
ディレクトリ.それで、我々が増幅プロジェクトをセットするとき、我々はセットしました
Source directory path
to .
(カレントディレクトリ).$ npx create-next-app@latest --typescript
$ cd my-app
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myapp
The following configuration will be applied:
Project information
| Name: myapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
? 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: .
? Distribution Directory Path: .next
? Build Command: npm run build
? Start Command: npm run start
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d3rkk8kj6rlblg
⠦ Initializing project in the cloud...
(snip)
$
次は.JSのビルドターゲットは現在のディレクトリのファイルとディレクトリですamplify
ディレクトリ.ところで、AWAHリソースをオーバーライドできます.
overrideオプションを使用すると、CLI生成を増幅します
override.ts
の下にamplify
ディレクトリ.そして、このファイルは予期せぬビルドターゲットになります.js
だから、我々は“増幅”を追加する必要があります
exclude
プロパティtsconfig.json
.以下の手順でエラーを確認できます.
まず、追加
api
.$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
⚠️ WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules
GraphQL schema compiled successfully.
Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✔ Do you want to edit the schema now? (Y/n) · no
✅ Successfully added resource myapp locally
✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
$
第二に、オーバーライドapi
.$ amplify override api
⚠️ WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules
GraphQL schema compiled successfully.
Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✅ Successfully generated "override.ts" folder at /home/ec2-user/environment/my-app/amplify/backend/api/myapp
✔ Do you want to edit override.ts file now? (Y/n) · no
$
それから、編集override.ts
.import { AmplifyApiGraphQlResourceStackTemplate } from '@aws-amplify/cli-extensibility-helper';
export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
attributeName: "ttl",
enabled: true
}
}
最後に、このプロジェクトをビルドし、エラーをキャッチします.$ npm run build
> [email protected] build
> next build
Failed to compile.
./amplify/backend/api/myapp/override.ts:4:3
Type error: Object is possibly 'undefined'.
2 |
3 | export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
> 4 | resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
| ^
5 | attributeName: "ttl",
6 | enabled: true
7 | }
info - Checking validity of types .
$
環境
Reference
この問題について(ちょうどあなたが次のアプリケーションを開発するときに行う必要があります.JS +タイプスクリプト+ AWS増幅), 我々は、より多くの情報をここで見つけました https://dev.to/aws-builders/just-1-thing-you-should-do-when-you-develop-an-application-by-nextjs-typescript-aws-amplify-36ckテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol