AWS Amplifyを使ってReactアプリをデプロイ

はじめに

React アプリを作成してローカルの開発サーバで動きを確認できたので、デプロイしていく。AWS EC2 インスタンスにサーバ構築をしてデプロイしようと調べていたところ、AWS Amplify という便利なサービスを見つけたので、AWS で React アプリケーションを構築するを参考に試してみる。
なお、React アプリはすでに作成して GitHub レポジトリにプッシュ済みを前提としている。

1. React アプリをデプロイしてホストする

AWS マネジメントコンソールにログインして、AWS Amplify コンソールへ遷移。公式では [Deploy] の下の [GET STARTED] を選択と書かれているが、現在の画面にはないので [Deliver] の下の [Get started] を選択。

自身が使用している Git レポジトリプロバイダを選択する。今回の場合は、GitHub を選択。GitHub で認証する。

認証完了後に、レポジトリとブランチを指定する。

ビルド設定 amplify.yml が出てくるので、デフォルトのままと進める。

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install # yarn install から修正
    build:
      commands:
        - yarn run build # yarn run build から修正
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

ビルド設定をデフォルトのまま進めて、最終的な詳細を確認して[保存してデプロイ]を選択。しばらく待つとビルドおよびデプロイ完了となる。

おわりに

驚くほど簡単にデプロイができた。これをベースに Amplify CLI での扱いなどを理解していきたい。