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

概要

AWS AmplifyでReactアプリをデプロイした手順をまとめます。

ローカルでReactアプリを作成する

• 作業ディレクトリとしてamplify_react_demoを作成し、VSCodeで開く。

mkdir amplify_react_demo
code amplify_react_demo

• create-react-appを使って、Reactアプリケーションを作成する。

npx create-react-app app

• create-react-appコマンドが完了した後、アプリケーションのディレクトリに移動してローカルでReactを起動させる。

cd app
npm start

• ポート3000でブラウザからアクセスできることを確認
  

• 任意のGitHubリポジトリにプッシュする

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin [e-mail]:Junpei-Nakasone/amplify_react_demo.git
git push -u origin main

AWS Amplifyの設定

• AWS Amplifyのコンソールから「ウェブアプリケーションをホスト」の「使用を開始する」をクリック
  

• 「Amplifyのホスティングの開始方法」からGitHubを選択し、「続行」をクリック
  

• GitHubアカウントでAWS Amplifyを認証する画面に遷移するので、動作確認用のamplify_react_demoリポジトリを選択し、「Install & Authorize」をクリック
  

• AWS AmplifyにデプロイしたいGitHubのリポジトリとブランチを選択し,「次へ」をクリック
  

• ビルドの設定はデフォルトのままにして「次へ」をクリック
  

• 内容に問題ないことを確認し「保存してデプロイ」をクリック
  

• Amplifyのコンソールからデプロイまで完了していることが確認できたら、URLをクリックする
  

• ブラウザにReactアプリが表示される
  

自動デプロイの確認

• App.jsを少し書き換えて、GitHubのmainブランチにプッシュする

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" />
        <p>
          Amplifyの動作確認
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

git add src/App.js
git commit -m "Amplifyの動作確認"
git push origin main

• 新しくコードがプッシュされたのを検知してAmplifyも自動でプロビジョンが動作する
  

• Amplifyのデプロイまで完了したら、再度URLにアクセスする
  

• 画面表示が更新されていることが確認できる