AWS の開始方法

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

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

モジュール 1: React アプリケーションをデプロイしてホストする

このモジュールでは、React アプリケーションを作成し、AWS Amplify のウェブホスティングサービスを使ってそれをクラウドにデプロイします。

はじめに

AWS Amplify は、サーバーレスバックエンドを持つ静的ウェブサイトあるいは単一ページのウェブアプリケーションの構築、デプロイ、ホスティングのための詳細なワークフローを提供します。Git リポジトリに接続すると、Amplify では、Amplify CLI で設定されたフロントエンドフレームワークと任意のサーバーレスバックエンドのリソースの両方のビルド設定を決定し、すべてのコードコミットを使用して自動的に更新をデプロイします。

このモジュールでは、まず新しい React アプリケーションを作成し、それを GitHub リポジトリにプッシュします。その後、リポジトリを AWS Amplify のウェブホスティングに接続し、amplifyapp.com ドメイン上でホストされる、グローバルに利用可能なコンテンツ配信ネットワーク (CDN) にデプロイします。次に、React アプリケーションに変化を加えることで継続的デプロイ機能を説明し、マスターブランチに新しいバージョンをプッシュして自動的に新しいデプロイが開始するようにします。

学習内容

  • 新しい React アプリケーションを作成する
  • GitHub リポジトリを初期化する
  • アプリを AWS Amplify でデプロイする
  • コードの変更を実装してアプリを再デプロイする

主要な概念

React アプリケーション – React はウェブアプリケーションフレームワークで、デベロッパーが JavaScript を使用して高性能の単一ページアプリケーションをすばやく構築できるようにします。

Git – デベロッパーがファイルを保存し、ファイルとディレクトリ、バージョン、およびファイルへの変更間の関係を維持および更新できるようにするバージョン管理システム。

 所要時間

10 分

 使用するサービス

実装

  • 新しい React アプリケーションを作成する

    簡単に React アプリケーションを作成するには、create-react-app のコマンドを使用します。コマンドプロンプトまたはターミナルで次のコマンドを使用して、このパッケージをインストールします。

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • GitHub リポジトリを初期化する

    このステップでは、GitHub レポジトリを作成してコードをレポジトリにコミットします。このステップを完了するには、GitHub アカウントが必要です。まだお持ちでない場合はこちらでサインアップしてください。

    a.アプリ用の新しい GitHub レポジトリを作成します (リンク)

    Front End GitHub Repository Module 1

    b.Git を初期化して、コマンドラインインターフェイスで以下のコマンドを実行する新しい GitHub レポジトリにアプリケーションをプッシュします。

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master
  • AWS マネジメントコンソールにログインします。

    このステップバイステップガイドを開いたままにしておくため、AWS マネジメントコンソールを別ウィンドウで開きます。画面が読み込まれたら、ユーザー名とパスワードを入力して作業を開始します。次に、検索バーに「Amplify」と入力して [AWS Amplify] を選択し、サービスコンソールを開きます。

    Front End AWS Console Find Amplify Module 1
  • アプリを AWS Amplify でデプロイする

    このステップでは、先ほど作成した GitHub レポジトリを AWS Amplify サービスに接続します。これにより、アプリを AWS 上でビルド、デプロイ、ホストできるようになります。

    a.AWS Amplify サービスコンソールで、[デプロイ] の下の [使用開始] を選択します。

    Front End Amplify Deploy Module 1

    b.レポジトリサービスとして [GitHub] を選択し、[続行] をクリックします。

    Front End Amplify GitHub Module 1.png

    c.GitHub で認証し、Amplify コンソールに戻ります。先ほど作成したレポジトリとマスターブランチを選択してから、[次へ] を選択します。

    Front End GitHub Add Repository Module 1.png

    d.デフォルトのビルド設定を使用し、[次へ] を選択します。

    Front End GitHub Add Repository2 Module 1.png

    e.最終的な詳細を確認し、[保存してデプロイ] を選択します。

    Front End GitHub Add Repository3 Module 1.png

    f.AWS Amplify によってソースコードがビルドされ、アプリが https://...amplifyapp.com にデプロイされます。

    Front End Amplify Deploy Source Module 1

    g.ビルドが完了したら、サムネイルを選択してウェブアプリが稼動していることを確認します。 

    Front End Initial App Module 1
  • コードの変更を自動的にデプロイする

    このステップでは、テキストエディタを使ってコードにいくつかの変更を加えて、その変更をアプリのマスターブランチにプッシュします。

    a.次のコードで src/App.js を編集して保存します。

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Hello from V2</h1>
          </header>
        </div>
      );
    }
    
    export default App;

    b.コマンドプロンプト (Windows) またはターミナル ( macOS) で GitHub に変更をプッシュして、新しいビルドを自動的に開始します。 

    git add .
    git commit -m “changes for v2”
    git push origin master

    c.ビルドが完了したら、AWS Amplify コンソールのサムネイルを選択して更新されたアプリを確認します。

    Front End HelloV2 App Module 1

まとめ

AWS Amplify を使用して GitHub と統合することによって、AWS クラウドで React アプリケーションをデプロイできました。AWS Amplify では、継続的にアプリケーションをクラウドにデプロイし、グローバルで利用可能な CDN でホストできます。

次に、アプリのローカルバージョンを作成して、開発を続け、新しい機能を追加します。

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

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

ローカルアプリを初期化する