実装

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

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

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

• GitHub リポジトリを初期化する

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

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

  

  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] を選択し、サービスコンソールを開きます。
  

  

• アプリを AWS Amplify でデプロイする

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

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

  

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

  

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

  

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

  

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

  

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

  

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

  

• コードの変更を自動的にデプロイする

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

  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 コンソールのサムネイルを選択して更新されたアプリを確認します。