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 を設定する

    Amazon IAM (Identity and Access Management) を使用すると、AWS でユーザーとユーザーアクセス許可を管理できます。CLI は IAM を使用して、CLI を介して、ユーザーに代わってプログラムでサービスを作成および管理します。

    CLI を設定するには、configure コマンドを実行します。CLI 設定プロセスの動画チュートリアルを表示するには、こちらをクリックしてください。

    amplify configure
  • Amplify アプリを初期化する

    次に、アプリをローカルで初期化します。既に Amplify プロジェクトを作成しているので、作成済みのアプリ設定を使用できます。

    a.Amplify コンソールで、[バックエンド環境] をクリックします。

    Front End BackEnd Environments Module 2

    b.[バックエンド環境] タブで、amplify init コマンドをキーボードにコピーします。

    Front End BackEnd Environments2 Module 2

    c.以下のコマンドを使用して、Amplify プロジェクトをローカルで初期化します。

    注意: 選択するプロファイルが、既にデプロイした Amplify プロジェクトと同じリージョンを使用して設定されていることを確認してください。

    amplify init --appId your-app-id
    
    ? Enter a name for the project: amplifyapp
    ? Enter a name for the environment: dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that youre 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 want to use an AWS profile? Y
    ? Please choose the profile you want to use: your-aws-profile
    

まとめ

Amplify プロジェクトを初期化し、機能を追加する準備ができました。 次のモジュールでは、ほんの数行のコードでユーザー認証フロー全体を追加します。

時間を問わず、Amplify プロジェクトをダッシュボードで表示するには、次のコマンドを実行します。

amplify console

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。