AWS の開始方法

React アプリケーションの構築

AWS Amplify を使用してシンプルなウェブアプリケーションを作成する

はじめに: React アプリケーションを構築する

ステップバイステップの指示に従って、最初の React アプリケーションを構築します。

概要

このチュートリアルでは、AWS Amplify を使用してシンプルなウェブアプリケーションを作成します。これは、ウェブホスティングサービスを含む一連のツールとサービスです。最初のモジュールでは、AWS で React アプリケーションを構築してホストします。残りの 4 つのモジュールでは、CLI を使用してローカルアプリを初期化し、認証を追加し、GraphQL API とデータベースを追加し、アプリを更新して画像を保存します。

学習内容

このチュートリアルでは、上記のサンプルウェブアプリケーションを作成するステップが説明されます。学習内容:

  • ホスティング: AWS グローバルコンテンツ配信ネットワーク (CDN) で React アプリケーションを構築してホストします。
  • 認証: アプリケーションに認証を追加して、サインインとサインアウトを有効にします
  • データベースとストレージ: GraphQL API、データベース、ストレージソリューションを追加します。

 AWS の体験

初心者

 所要時間

50 分

 完了までのコスト

無料利用枠の対象

 チュートリアルの前提条件

  • 管理者レベルのアクセス権を持つ AWS アカウント*
  • Node.js: Node.js v10.x 以降
  • GitHub アカウント
  • Git**: Windows ユーザーは Git をインストールする必要があります
  • テキストエディタ。以下に、お勧めの無料のテキストエディタを (アルファベット順で) いくつか示します: AtomNotepad++SublimeVimVisual Studio Code

[*] 過去 24 時間以内に作成されたアカウントは、このチュートリアルに必要なサービスへのアクセス権がまだ付与されていない可能性があります。
[**] Git が標準で付属しているため、iOS ユーザーには適用されません

モジュール

このチュートリアルは 5 つの短いモジュールに分かれています。次のモジュールに進む前に、各モジュールを順番に完了する必要があります。

  1. React アプリをデプロイしてホストする (10 分): React アプリを作成し、AWS Amplify を介してデプロイしてホストします。
  2. ローカルアプリを初期化する (5 分): AWS Amplify を使用してローカルアプリを初期化します。
  3. 認証を追加する (10 分): アプリケーションに認証を追加します。
  4. GraphQL API とデータベースを追加する (15 分): GraphQL API を作成します。
  5. 画像を保存する機能を追加する (10 分): アプリにストレージを追加します。

コマンドプロンプト/ターミナル、テストエディタ、AWS ウェブコンソールを使用して、この React アプリケーションを構築します。

React アプリをデプロイする