フルスタックプロジェクトのセットアップ

Angular CLIを使用して新しいAngularアプリをブートストラップします:

npx -p @angular/cli ng new amplify-app

? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Pre-rendering)? No

これはフォルダamplify-appにAngularアプリを作成します。次のコマンドを使用してそのフォルダに切り替えます:

cd amplify-app

新しいバックエンドの初期化

実行中のアプリが完成したので、Amplifyをセットアップして、アプリをサポートするために必要なバックエンドサービスを作成できるようにします。

新しいターミナルを開きます。プロジェクトのルートから、次を実行します:

amplify init

Amplifyを初期化するときに、アプリに関する情報の入力を求めるプロンプトが表示されます:

より新しいバージョンのAngularでは、Angular がプロジェクトをビルドする方法に合わせるために、Distribution Directory Pathをdistからdist/amplify-app/browserに変更する必要があります。

? Enter a name for the project: amplifyapp
The following configuration will be applied:

Project information
| Name: amplifyapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: angular
| Source Directory Path: src
| Distribution Directory Path: dist/amplify-app/browser
| Build Command: npm run-script build
| Start Command: ng serve

? Initialize the project with the above configuration? Yes
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

新しいAmplifyプロジェクトを初期化するときに、いくつかのことが起こります:

• バックエンド定義を保存するamplifyというトップレベルディレクトリを作成します。チュートリアルを進める際に、GraphQL APIやWebホスティングなどのクラウド機能を追加します。これらの機能を追加すると、amplifyフォルダはバックエンドスタックを定義するインフラストラクチャアズコードテンプレートで成長します。インフラストラクチャアズコードは、複製可能なバックエンドスタックを作成するベストプラクティス方法です。
• 指定したSource Directory Pathにamplifyconfiguration.jsonというファイルを作成します。これはAmplifyで作成するサービスのすべての構成を保持します。これは、Amplify JavaScriptクライアントライブラリがバックエンドサービスに接続するために必要な情報を取得する方法です。
• .gitignoreファイルを変更し、生成されたファイルを無視リストに追加します

Amplifyライブラリをインストール

aws-amplifyパッケージは、プロジェクトでAmplify Librariesを使用するためのメインライブラリです:

npm install aws-amplify

フロントエンドのセットアップ

次に、Amplifyライブラリをクライアント側で構成して、バックエンドサービスと対話できるようにします。

main.tsを開き、最後のインポートの下に次のコードを追加します:

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

Typescriptでamplifyconfiguration.jsonファイルをインポートするために、tsconfig.jsonを変更し、strictモードが有効な場合はresolveJsonModuleとallowSyntheticDefaultImportsを有効にする必要がある場合があります。

{
  ...
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    ...
  }
}

以上がAmplifyの構成に必要なすべてです。Amplify CLIを使用してカテゴリを追加または削除し、バックエンド構成を更新すると、amplifyconfiguration.jsonの構成が自動的に更新されます。

アプリがセットアップされ、Amplifyが初期化されたので、次のステップでAPIを追加できます。