フルスタックプロジェクトのセットアップ
次のコマンドを使用して、Viteで新しいVanilla JavaScriptアプリを作成し、アプリのディレクトリとファイルを作成します。
npm create vite@latest✔ Project name: amplify-js-app✔ Select a framework: › Vanilla✔ Select a variant: › JavaScriptnpmを初期化し、依存関係と開発依存関係をインストールします。
cd amplify-js-appnpm installnpm run devこれは開発サーバーを実行し、ビルドによって生成された出力を確認できるようにします。http://localhost:5173にアクセスすることで、実行中のアプリを確認できます。
index.htmlファイルに以下を追加します:
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>Amplify</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="style.css" rel="stylesheet" /> </head>
<body> <div class="app"> <div class="app-header"> <h1>Welcome to Amplify</h1> </div> <div class="app-body"> <h1>Mutation Results</h1> <button id="MutationEventButton">Add data</button> <div id="MutationResult"></div> <hr />
<h1>Query Results</h1> <div id="QueryResult"></div> <hr />
<h1>Subscription Results</h1> <div id="SubscriptionResult"></div> </div> </div> <script type="module" src="/main.js"></script> </body></html>style.cssファイルに以下を追加します:
html,body { font-family: 'Amazon Ember', 'Helvetica', 'sans-serif'; margin: 0;}a { color: #ff9900;}h1 { font-weight: 300;}hr { height: 1px; background: lightgray; border: none;}.app { width: 100%;}.app-header { color: white; text-align: center; background: linear-gradient(30deg, #f90 55%, #ffc300); width: 100%; margin: 0 0 1em 0; padding: 3em 0 3em 0; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);}.app-body { width: 400px; margin: 0 auto; text-align: center;}.app-body button { background-color: #ff9900; font-size: 14px; color: white; text-transform: uppercase; padding: 1em; border: none;}.app-body button:hover { opacity: 0.8;}main.jsからボイラープレートコードを削除して空のままにします。ブラウザをリフレッシュして変更を確認します。
新しいバックエンドの初期化
実行中のアプリが完成したので、Amplifyをセットアップして、アプリをサポートするために必要なバックエンドサービスを作成できるようにします。
新しいターミナルを開きます。プロジェクトのルートから、次を実行します:
amplify initAmplifyを初期化するときに、アプリに関する情報の入力を求めるプロンプトが表示されます:
? Enter a name for the project: amplifyjsappThe following configuration will be applied:
Project information| Name: amplifyjsapp| Environment: dev| Default editor: Visual Studio Code| App type: javascript| Javascript framework: none| Source Directory Path: src| Distribution Directory Path: dist| 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やWebホスティングなどのクラウド機能を追加します。これらの機能を追加すると、amplifyフォルダはバックエンドスタックを定義するインフラストラクチャアズコードテンプレートで成長します。インフラストラクチャアズコードは、複製可能なバックエンドスタックを作成するベストプラクティス方法です。 - 指定したSource Directory Pathに
amplifyconfiguration.jsonというファイルを作成します。これはAmplifyで作成するサービスのすべての構成を保持します。これは、Amplify JavaScriptクライアントライブラリがバックエンドサービスに接続するために必要な情報を取得する方法です。 .gitignoreファイルを変更し、生成されたファイルを無視リストに追加します
Amplifyライブラリをインストール
aws-amplifyパッケージは、プロジェクトでAmplify Librariesを使用するためのメインライブラリです:
npm install aws-amplifyフロントエンドのセットアップ
次に、Amplifyライブラリをクライアント側で構成して、バックエンドサービスと対話できるようにします。
main.jsを開き、次のコードを追加します:
import './style.css'import { Amplify } from 'aws-amplify';import amplifyconfig from './src/amplifyconfiguration.json';Amplify.configure(amplifyconfig);以上がAmplifyの構成に必要なすべてです。Amplify CLIを使用してカテゴリを追加または削除し、バックエンド構成を更新すると、amplifyconfiguration.jsonの構成が自動的に更新されます。
アプリがセットアップされ、Amplifyが初期化されたので、次のステップでAPIを追加できます。