初めての AWS Amplify：簡単な React アプリを GitHub 経由でデプロイする手順をまとめてみた

## はじめに

この記事では、AWS Amplify を使って React アプリを GitHub 経由でデプロイする方法を紹介します。

https://aws.amazon.com/jp/amplify/

簡単に試せる構成になっているので、気になる方はスクロールしてみてください！

## 書こうと思ったきっかけ

個人的にずっと使ってみたいと思っていたサービスだったのですが、実際には触れたことがなかったため、休みの日を利用して手を動かしながらキャッチアップしてみました。

**構成はこんな感じです**

![Screenshot 2025-05-24 at 13.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/3e796ac7-50ab-42a9-b07b-86b685d01c82.png)

引用画像：https://aws.amazon.com/jp/blogs/news/build-a-graph-application-with-amazon-neptune-and-aws-amplify/

なんとなく「**便利そう？**」というイメージは以前からあったのですが、実際に使ってみたら本当に超便利で、個人的にとても感動しました。

## 実際にやってみた

### 最低限の React + Amplify 用プロジェクト構成

#### 1. プロジェクト作成（ローカル）

```bash
npx create-react-app amplify-hello
cd amplify-hello
```

#### 2. `src/App.js` を以下のように変更

```jsx
// src/App.js
function App() {
  return (
    <div>
      <h1>Hello, Amplify!</h1>
    </div>
  );
}

export default App;
```

#### 3. 開発サーバーを起動してローカル確認

```bash
npm start
```

**コマンド実行後の画面**

![Screenshot 2025-05-24 at 13.26.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/8eb1fca1-e17f-4c40-a26f-2ff1422cfb20.png)

#### 4. ブラウザで確認

自動で開かない場合は、下記 URL にアクセス：

```
http://localhost:3000
```

「Hello, Amplify!」と表示されればローカル動作は成功です。

**実際のアクセス画面**

![Screenshot 2025-05-24 at 13.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/e57815ce-173d-4518-9ebc-6c94e5393a7b.png)

### GitHub にプッシュ

#### 5. GitHub リポジトリを作成

GitHub 上でリポジトリ名を `Amplify` として作成します。

#### 6. 以下をローカルで実行

```bash
git init
git remote add origin https://github.com/あなたのユーザー名/Amplify.git
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main
```

**正常に`push`できていることが確認できました**

![Screenshot 2025-05-24 at 13.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/09c46555-a873-43e8-9ff1-31ff3ea59937.png)

### AWS Amplify に接続してデプロイ

[Amplify コンソール](https://console.aws.amazon.com/amplify/) にアクセス

![Screenshot 2025-05-24 at 13.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/cefcb0c9-3bb6-4772-8272-cf2433c4f3c9.png)

「アプリケーションをデプロイ」→「GitHub から」

![Screenshot 2025-05-24 at 13.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/93cdb912-9ec6-4235-800d-3e7468dd84f5.png)

作成した `Amplify` リポジトリを選択（リポジトリとブランチを追加）

![Screenshot 2025-05-24 at 13.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/44858cbb-1097-4e93-9eed-c483973a4d27.png)

`amplify.yml` は自動生成されたままでOK（`build` フォルダが成果物）

![Screenshot 2025-05-24 at 13.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/5cde5c9c-04f1-4cd3-9a6a-0fa4244e7a17.png)

**`amplify.yml`は以下になります（デフォルトのまま）。**

```amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*
```

**ビルド → デプロイ完了！（確認画面はそのまま進みました）**

![Screenshot 2025-05-24 at 13.37.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/6ccb2f37-309d-4640-9dd2-462262fcc5e3.png)

**画面右下の「保存してデプロイ」をクリック**

![Screenshot 2025-05-24 at 13.38.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/ee7cf64a-5110-40d4-b8e6-0ff488a0cb3e.png)

**デプロイ中の画面**

![Screenshot 2025-05-24 at 13.40.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/0ec95512-aab0-4b2f-9fa9-d0f0bcb9817d.png)

### 表示結果

ブラウザで以下が表示されれば成功：

```
Hello, Amplify!
```

**問題なくデプロイできていました！**

![Screenshot 2025-05-24 at 13.42.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/86843aee-9331-4c8d-9732-7ed782d652aa.png)


## まとめ

ここまで読んでいただき、ありがとうございました！AWS Amplify を使えば、React アプリのホスティングがとても簡単できました。

:::note info
**最初の一歩として "Hello, Amplify!" を表示するだけでも、画面操作わずか5分ほどでデプロイまで完了できたので、今後も積極的に活用していきたいと感じました。**
:::

次は、カスタムドメインの設定や API 連携にも挑戦してみたいと思います…！