AWS の開始方法
フルスタック React アプリケーションを構築する
AWS Amplify を使用してシンプルなウェブアプリケーションを作成する
モジュール 2: ローカル Amplify アプリを初期化する
このモジュールでは、Amplify CLI をインストール、設定します。
概要
アカウントで新しい Amplify プロジェクトを初期化したので、開発を続行して新しい機能を追加できるように、プロジェクトをローカル環境に持ち込みたいと思います。
このモジュールでは、Amplify CLI をインストールし、CLI を使用して Amplify プロジェクトを初期化します。
実行する内容
- Amplify CLI をインストールして設定する
- Amplify アプリを初期化する
主要な概念
Amplify CLI – Amplify CLI により、ターミナルから直接 AWS のサービスを作成、管理、削除できます。
所要時間
5 分
利用するサービス
実装
-
Amplify CLI をインストールする
Amplify コマンドラインインターフェイス (CLI) は、シンプルなガイド付きワークフローに従って、アプリの AWS クラウドサービスを作成するための統合ツールチェーンです。では、コマンドプロンプト (Windows) またはターミナル (macOS) を使用して Amplify CLI をインストールしてみましょう。注:「-g」はバイナリがシステムにグローバルにインストールされることを示すため、このコマンドはコマンドプロンプト/ターミナルの任意のディレクトリで実行できます。
npm install -g @aws-amplify/cli
-
Amplify CLI を設定する
AWS Identity and Access Management (IAM) を使用すると、AWS でユーザーとユーザーアクセス許可を管理できます。CLI は IAM を使用して、CLI を介して、ユーザーに代わってプログラムでサービスを作成および管理します。
CLI を設定するには、configure コマンドを実行します。CLI 設定プロセスの動画チュートリアルを表示するには、以下の「AWS Amplify CLI をインストールして設定する」を参照してください。
amplify configure
-
Amplify アプリを初期化する
次に、バックエンドをデプロイし、バックエンド環境をローカルで初期化します。
a.Amplify コンソールで [バックエンド環境] を選択し、[開始] を選択します。バックエンドがデプロイされるのを待ちます。
b.[バックエンド環境] タブで [Studio を起動する] を選択します。
c.[バックエンド環境] タブに戻り、[ローカル設定手順] セクションを展開します。コマンドをクリップボードにコピーし、コンピュータでターミナルを開きます。
d.コマンドをターミナルに貼り付け、セットアップ手順に従います。
? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building javascript ? What javascript framework are you using react ? Source Directory Path: src ? Distribution Directory Path: build ? Build Command: npm run-script build ? Start Command: npm run-script start ? Do you plan on modifying this backend? Y
まとめ
Amplify プロジェクトを初期化し、機能を追加する準備ができました。次のモジュールでは、わずか数行のコードでユーザー認証フロー全体を追加します。
時間を問わず、Amplify プロジェクトをダッシュボードで表示するには、次のコマンドを実行します。
amplify console
? Which site do you want to open? AWS console