AWS の開始方法

フルスタック React アプリケーションを構築する

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

はじめに: フルスタック React アプリケーションを構築する

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

概要

このチュートリアルでは、AWS Amplify を使用してシンプルなフルスタックウェブアプリケーションを作成します。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 をインストールする必要があります

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

 利用するサービス

AWS Amplify

 最終更新日

2023 年 4 月 28 日

モジュール

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

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

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

このページはお役に立ちましたか?

React アプリケーションをデプロイおよびホストする