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

Vue Viteで動作するcreate-appを使用して、新しいVue 3アプリをブートストラップします(デフォルトを選択するとこのプロジェクトに役立ちます):

npm init vue@3

Need to install the following packages:
  create-vue@3
Ok to proceed? (y) y

✔ Project name: … vue-amplified
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … No

これはvue-amplifiedというディレクトリに新しいVueアプリを作成します。次のコマンドを実行して、新しいvue-amplifiedディレクトリに切り替え、プロジェクトの依存関係をインストールし、アプリを実行できます:

cd vue-amplified
npm install
npm run dev

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

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

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

amplify init

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

バックエンドでリソースを作成するときに使用するプロジェクト名が必要です。バックエンドプロジェクトにtodoという名前を付けてください

? Enter a name for the project (myamplifyproject) todo

その後、推奨値を受け入れるよう求めるメッセージが表示されます:

The following configuration will be applied:
Project information
| Name: todo
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve
? Initialize the project with the above configuration? Yes

CLIは可能な限り、Amplifyが初期化されているプロジェクトのタイプに基づいて適切な構成を推測します。この場合、Vueを使用していることを知っており、アプリのタイプ、フレームワーク、ソース、配布、ビルド、および開始オプションの適切な構成を提供しました。

次に、プロジェクトでローカルに作業するために使用する認証方法を選択する必要があります:

? Select the authentication method you want to use: (Use arrow keys)
> AWS profile
  AWS access keys

AWS プロファイルを選択し、前提条件で設定したプロファイルを選択します。

新しい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ライブラリをクライアント側で構成して、バックエンドサービスと対話できるようにします。

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

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

アプリケーションのライフサイクルのできるだけ早い段階でAmplify.configureを呼び出していることを確認してください。構成がないか、Amplify.configureがほかのAmplify JavaScript APIの前に呼び出されていない場合はNoCredentialsエラーがスローされます。ライブラリが構成されていないトラブルシューティングガイドでこの問題の考えられる原因を確認してください。

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

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

Amplify CLIのセットアップ

APIとデータベースをアプリに接続する