アプリケーションを作成する
プロジェクトをセットアップするには、create-next-appツールを使用して新しいNext.jsアプリを作成する必要があります。その後、Amplifyを追加して新しいプロジェクトを初期化します。
以下のコマンドを実行し、指示に従ってNext.jsアプリを作成してください。
npx create-next-app@">=13.5.0 <16.0.0" next-amplified次に、以下のコマンドを実行してNext.jsアプリのルートに移動します。
cd next-amplified以下のコマンドを使用して、開発モードでアプリを実行できます:
npm run devAngular CLIを使用して新しいAngularアプリをブートストラップします:
npx -p @angular/cli ng new amplify-app
? Would you like to add Angular routing? Y? Which stylesheet format would you like to use? (your preferred stylesheet provider)
cd amplify-appまず、src/polyfills.tsを作成し、以下を追加します:
(window as any).global = window;(window as any).process = { env: { DEBUG: undefined },};次に、angular.jsonファイルを開き、src/polyfills.tsをangular.jsonのpolyfills配列に追加します。これらの配列はprojects.<project-name>.architect.<task-name>.optionsにあります。
"polyfills": [ "zone.js", "src/polyfills.ts"],最後に、src/polyfillsをtsconfig.app.jsonのファイルに追加してください:
{ "files": [ "src/main.ts", "src/polyfills.ts" ],}以下をsrc/polyfills.tsファイルに追加して再度作成してください:
(window as any).global = window;(window as any).process = { env: { DEBUG: undefined },};開始するには、まずViteを使用して新しいReactアプリを作成し、Amplify CLIをインストールして使用してアプリにバックエンド機能を追加し始めます。
プロジェクトディレクトリから、以下のコマンドを実行してプロンプトに従ってください:
npm create vite@latestこれにより、新しいディレクトリにReactアプリが作成されます。新しいディレクトリに移動して、以下のコマンドを使用してアプリを実行してください:
cd <your project directory>次に、依存関係をインストールし、以下のコマンドを実行して開発サーバーを実行してください:
npm installnpm run devこれにより開発サーバーが実行され、アプリをローカルでプレビューできます。
Vue Viteパワーのcreate-appを使用して新しいVue 3アプリをブートストラップします(必要な設定を選択し、このプロジェクトの例としてデフォルトを選択):
npm init vue@3
Need to install the following packages: create-vue@3Ok to proceed? (y) y
✔ Project name: … myamplifyproject✔ 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アプリが作成されます。新しいディレクトリに移動して、以下のコマンドを使用してアプリを実行してください:
cd <your project directory>次に、依存関係をインストールし、以下のコマンドを実行して開発サーバーを実行してください:
npm installnpm run devこれにより開発サーバーが実行され、アプリをローカルでプレビューできます。
新しいAmplifyバックエンドを作成する
実行中のアプリができたので、Amplifyをセットアップして、必要なバックエンドサービスを設定する時間です。
新しいターミナルを開きます。プロジェクトのルートから以下を実行してください:
amplify initAmplifyを初期化すると、アプリに関する情報の入力を求めるプロンプトが表示されます。
? Enter a name for the project (nextamplified)The following configuration will be applied:
Project information| Name: nextamplified| Environment: dev| Default editor: Visual Studio Code| App type: javascript| Javascript framework: <detected framework>| 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? YesUsing 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や認証などの機能を追加します。機能を追加するにつれて、amplifyフォルダはバックエンドスタックを定義するインフラストラクチャ・アズ・コード・テンプレートで拡大します。インフラストラクチャ・アズ・コードは、再現可能なバックエンドスタックを作成するためのベストプラクティスです。 - Amplifyで作成するサービスのすべての設定を保持する
amplifyconfiguration.jsonファイルがsrcディレクトリに作成されます。これにより、Amplifyクライアントはバックエンドサービスに関する必要な情報を取得できます。 .gitignoreファイルが変更され、生成されたファイルの一部が無視リストに追加されます- AWS Amplify Consoleでクラウドプロジェクトが作成されます。このプロジェクトには
amplify consoleを実行することでアクセスできます。Consoleはバックエンド環境のリスト、Amplifyカテゴリごとのプロビジョニングされたリソースへのディープリンク、最近のデプロイメントのステータス、バックエンドリソースの昇格、複製、プル、削除方法に関する指示を提供します。
Amplify CLIを使用してカテゴリを追加または削除し、バックエンド設定を更新すると、amplifyconfiguration.jsonの設定は自動的に更新されます。
Amplifyライブラリをインストールする
Next.jsアプリにAmplifyの使用を開始するために必要な依存関係をインストールします。
npm install aws-amplify @aws-amplify/adapter-nextjsaws-amplifyパッケージはアプリでAmplifyを操作するためのメインライブラリです。@aws-amplify/adapter-nextjsはサーバーサイドレンダリング(SSR)などのユースケースのためにNext.jsアプリのサーバー側でAmplify APIを使用できるようにするアダプタ関数を提供します。
Next.jsアプリでAmplifyを使用する詳細については、Next.jsでAmplifyを使用するを参照してください。
Angularアプリにамплify の使用を開始するために必要な依存関係をインストールします。
npm install aws-amplifyReactアプリにアンプリファイの使用を開始するために必要な依存関係をインストールします。
npm install aws-amplifyVueアプリにアンプリファイの使用を開始するために必要な依存関係をインストールします。
npm install aws-amplifyこれで、アプリケーションに機能を追加し始める準備が整いました。以下は、アプリに追加し始めることができる機能の例です。