AWS Amplify Hosting に React (Vite) アプリをデプロイする

2024/05/15
この記事の内容は古いです．

Ubuntu 22.04 (WSL2) で実行しています．

Vite + React プロジェクトを作成

> npm create vite@latest
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y)
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /home/be4rr/projects/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

> cd vite-project
> npm install
added 153 packages, and audited 154 packages in 11s

37 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

開発サーバーを起動して動作を確認します．

> npm run dev

  VITE v4.4.11  ready in 138 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

http://localhost:5173 をブラウザで開くとReactアプリが動作しているのを確認できます．

満足したらターミナル上でCtrl+Cを押して開発サーバーを停止します．

GitHub にアップロード

ここでGithubにプロジェクトをアップロードします．GitHubへのアップロードはコマンドで行っても良いですが，VSCodeから行うととても簡単です．

GitHubにリポジトリが作成され，プロジェクトの中身がアップロードされます．

Amplify Hosting にデプロイ

AWSマネジメントコンソールから AWS Amplify を開きます．AWS Amplify のページを下の方までスクロールして Amplify Hosting の「使用を開始する」を押します．Amplify Studio ではないので注意してください．

GitHubを選択します．

先ほど作成したGitHubリポジトリとブランチを選びます．米初回の場合はGitHubとの接続を求められます．

「構築とテストの設定」で「編集」を押し，ビルド設定を編集します．

ビルド設定を次のように変更します．

- baseDirectory: /
+ baseDirectory: dist

最後に設定を確認し，「保存してデプロイ」します．

画面が遷移しデプロイが始まります．デプロイが完了後に左下のURLを開くとデプロイされたアプリを確認できます．

アプリの削除

デプロイしたアプリを削除するには，右上の「アクション」から「アプリの削除」を選択します．

参考