Reactで作ったアプリをウェブ上に公開: AWS Amplifyでの自動デプロイとAWS Route53によるカスタムURL設定 #AWS

Reactで作成したアプリケーションをウェブ上に公開するために、AWS AmplifyとAWS Route53というサービスを使用しました。これらを用いることで、Reactで作成したアプリの公開の仕方や自動デプロイのやり方も知らない人でも、以下のことが簡単に実現可能です。

ウェブ上への公開: AWS Amplifyを利用することで、アプリケーションをウェブ上に公開することができます。
自動デプロイの設定: GitHubにプッシュしたコードの変更をトリガーに、AWS Amplifyがアプリケーションのビルドとデプロイを自動的に行うことが可能になります。
独自ドメインの適用: AWS Route53を利用して独自のドメインを取得し、それをアプリケーションに適用することが可能です。これにより、アプリケーションがそれっぽく見え、信頼性が増します。
手軽なデプロイ管理: AWS Amplifyのインターフェイスを通じて、デプロイのプロセスを一元管理することができます。また、異なるブランチで異なるバージョンのアプリケーションをデプロイすることも可能です。

前準備(これらを完了させてから読み進めてください)

AWSアカウントを作成済み
Reactのプロジェクト作成済み
GitHubにそのプロジェクトをアップロード済み

AWS Amplifyの初期設定

Amplifyの設定ファイルを用意

フォルダ構成は以下の通りにしました。

リポジトリのルート
|-Reactのプロジェクト(筆者はfrontendという名前で作成)
|-amplify.yml

amplify.ymlでは以下のように設定します。フォルダ構成やnpmを使っているかyarnを使っているかで変わってくると思います。

version: 1
frontend:
  phases:
    preBuild: 
      commands:
        - cd frontend
        - npm ci
    build: 
      commands:
        - npm run build
  artifacts: 
    baseDirectory: frontend/build
    files:
      - '**/*'
  cache:
    paths:
      - frontend/node_modules/**/*

この設定により、ビルド前に必要な依存関係をインストールし、アプリケーションをビルドしてその結果を保存します。

2. AWS Amplify の設定

次に、AWS コンソールにログインし、Amplifyサービスを開きます。「Get Started」を選択し、GitHubをソースプロバイダとして選択します。

3. リポジトリの選択

GitHubアカウントを連携し、デプロイしたいリポジトリとブランチを選択します。

4. ビルド設定の定義

事前に用意したamplify.ymlを選択して利用します。

5. アプリケーションのレビューとデプロイ

ビルド設定が適切に定義されたら、「Next」を選択し、アプリケーションの設定をレビューします。問題がなければ、「Save and deploy」を選択します。

6. Web アプリケーションの公開

デプロイが成功すると、公開されたWebアプリケーションへのリンクが表示されます。このリンクをクリックすると、デプロイされた Reactアプリケーションを確認できます。

URLの変更

次に、デプロイされたアプリケーションのURLを独自ドメインに変更します。

1. AWS Route53でドメインを取得

まず、AWS Route53を使用してドメインを取得します。

2. AWS Amplify Consoleでドメイン管理を開く

AWS Amplify Consoleのダッシュボードでドメイン管理を開きます。

3. 取得したドメインを接続

取得したドメインを入力し、接続します。

4. サブドメインを設定

ドメイン接続後、必要に応じてサブドメインを設定します。

以上で、ReactプロジェクトのAWS Amplifyを使用したデプロイと、独自ドメインへの設定が完了します。

AWS Route53でドメイン設定をしない場合、デフォルトのURL（https://[app-name]-[branch-name].amplifyapp.comみたいな形式）が使用されます。

[app-name]と[branch-name]はそれぞれAmplifyとGitHubで設定することができますが、amplifyapp.com部分を変更するためには独自のドメインが必要となります。また、[branch-name]は個人的にはURLを含めたくありません。