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

# はじめに

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

## **サービスのアーキテクチャ構成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/05635b94-e96c-4e89-fc5c-23de3f10d811.png)


- **フロントエンド**: 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）の詳細については以下の記事で解説しています。

https://qiita.com/ten-056/items/723620bcb5cd9b48dfe5

## **サービス概要**

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

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

https://www.tabibase.com

---

## **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版をインストール。
   - バージョン確認:
     ```bash
     node -v
     npm -v
     ```

2. **Reactアプリケーションの作成**:
   ```bash
   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にプッシュ:
   ```bash
   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にアクセスし、「新しいアプリを作成」を選択。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/937fddc8-8b63-dc37-14d6-8d565dc201b2.png)

2. 「GitHub」を選択し、GitHubアカウントへのアクセスを承認。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/cfd09c8b-1145-9dde-7108-bf9a792a9417.png)

3. 作成したリポジトリとブランチ（例: `main`）を選択。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/3a6db43f-3e73-d7c7-d5be-fe2b0f26dc32.png)

4. reactが検出されたことを確認し、必要に応じて環境変数等を設定する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/c4edfbc2-5ee3-0eb4-1869-a58cbedf2619.png)

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

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

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

https://dev.classmethod.jp/articles/route53-domain-onamae/

---

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

1. Amplifyコンソールで「ホスティング」→「カスタムドメイン」を選択。
2. 「ドメインを追加」をクリックし、Route53に移管したドメイン名を入力。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/d057c862-8725-00df-7977-0cdfb0373625.png)

3. DNS設定画面でAmplifyが提示するCNAMEレコードを登録。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628846/fd23a6db-494c-b585-0baa-63fe81e38028.png)

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

---

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