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

新しいReactアプリの作成

開始するには、まず新しいReactアプリを作成し、Amplify CLIをインストールして使用して、アプリにバックエンド機能を追加することで開始します。

プロジェクトディレクトリから、次のコマンドを実行してプロンプトに応答します:

npm create vite@latest
✔ Project name: react-amplified
✔ Select a framework: › React
✔ Select a variant: › TypeScript

npm create vite@latest
✔ Project name: react-amplified
✔ Select a framework: › React
✔ Select a variant: › JavaScript

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

cd react-amplified
npm install
npm run dev

これは開発サーバーを実行し、ビルドによって生成された出力を確認できるようにします。http://localhost:5173にアクセスすることで、実行中のアプリを確認できます。

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

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

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

amplify init

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

? Enter a name for the project reactamplified
The following configuration will be applied:
?Project information
| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src

Distribution Directory Pathとしてdistを設定していることを確認してください。

| Distribution Directory Path: dist

| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
? 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ライブラリをクライアント側で構成して、バックエンドサービスと対話できるようにします。

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

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とデータベースをアプリに接続する