React × AWS Amplifyで爆速開発＆自動デプロイ（Route53管理のドメイン適用）

はじめに

この記事では、ReactとAWS Amplifyを活用して作成した「旅BASE」アプリのフロントエンド構築手順を解説します。以下の図は、このプロジェクトで採用したアーキテクチャ構成です

サービスのアーキテクチャ構成

• フロントエンド: AWS Amplifyで管理するReactプロジェクト
• バックエンド: AWS SAMとGitHub Actionsを活用したAPI Gateway、Lambda、RDSの連携
• カスタムドメイン: Route 53を利用し、お名前.comで取得したドメインを割り当て

この記事のスコープ

この記事では、以下の内容にフォーカスして解説します：

1. AWS AmplifyによるReactプロジェクトのホスティング
2. GitHubリポジトリとの連携
3. お名前.comドメインのDNS管理とRoute 53への移行
4. カスタムドメイン設定

バックエンド（API GatewayやLambda）の詳細については以下の記事で解説しています。

サービス概要

本記事では、旅行者向けの情報共有プラットフォーム「旅BASE」は、Reactを用いたフロントエンドとAWSのサーバーレス技術を活用したバックエンドで構成されています。ユーザーは簡単に旅行プランを作成・共有できる機能を利用できます。

詳しくは以下のリンクからご覧ください：

---

AWS Amplifyの概要と料金シミュレーション

AWS Amplifyの概要

AWS Amplifyは、フロントエンドおよびフルスタックアプリケーションの開発を簡素化するためのサービスです。
Amplifyを用いれば、GitHubのリモートリポジトリにpushしただけで、後は自動でビルド・デプロイまで行ってくれるため大変便利です。

料金シミュレーション

AWS Amplifyは使用量に応じた料金体系です。以下が主なコスト要素です：

• ビルド & デプロイ: $0.01/分
• ホスティング:
  • データ転送: $0.15/GB
  • ストレージ: $0.023/GB/月

詳細な料金シミュレーションは、AWS公式サイトの料金計算ツールを活用してください。ただ、想像よりも非常に安価な値段で利用可能です。

---

ステップ1: Reactプロジェクトの作成

1. Node.jsとnpmのインストール:

   • Node.js公式サイトからLTS版をインストール。
   • バージョン確認:

     node -v
     npm -v
     

2. Reactアプリケーションの作成:

   npx create-react-app my-react-app
   cd my-react-app
   npm start
   

   上記コマンドでローカルサーバーが起動し、http://localhost:3000で確認できます。

---

ステップ2: GitHubリモートリポジトリの作成

1. GitHubにログインし、「New Repository」をクリック。

2. 以下を設定:

   • リポジトリ名（例: my-react-app）
   • パブリック/プライベート設定

3. Create repositoryをクリックしてリポジトリを作成。

4. ローカルプロジェクトをGitHubにプッシュ:

   git init
   git remote add origin https://github.com/your-username/my-react-app.git
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git push -u origin main
   

---

ステップ3: AWS Amplifyアプリの作成

1. AWSコンソールでAmplifyにアクセスし、「新しいアプリを作成」を選択。
   

2. 「GitHub」を選択し、GitHubアカウントへのアクセスを承認。
   

3. 作成したリポジトリとブランチ（例: main）を選択。
   

4. reactが検出されたことを確認し、必要に応じて環境変数等を設定する。
   

5. 内容を確認し、保存してデプロイすることで完了。

---

ステップ4: お名前.comで発行したドメインのDNSサーバーをRoute 53で管理

以下のリンクの記事を参考に、お名前.comで取得したドメインのホストゾーンをRoute53で管理する。

---

ステップ5: Amplifyアプリにカスタムドメインを割り当てる

1. Amplifyコンソールで「ホスティング」→「カスタムドメイン」を選択。

2. 「ドメインを追加」をクリックし、Route53に移管したドメイン名を入力。
   

3. DNS設定画面でAmplifyが提示するCNAMEレコードを登録。
   

4. 設定が反映されるまで待機し、ブラウザでアクセス可能か確認。

---

以上がReactプロジェクトとAWS Amplifyによるホスティング、カスタムドメイン設定までの手順です。