はじめに

Vite×Reactで作成したアプリケーションをAWS Amplifyにデプロイしてみます。

環境

react：18.2.0
vite：5.2.0

1.React側の準備

Viteを利用してデプロイするアプリケーションを準備していきます。
今回はデフォルトのものを使用します。
次のコマンドでVite プロジェクトを作成します。

npm create vite@latest

プロジェクトを作成出来たら、パッケージをインストールします。

npm i

ローカルでプロジェクトを起動してみます。

npm run dev

プロジェクトの起動を確認できました。

ここまでできたら、AWS Amplifyに連携させるためのリポジトリを準備しておきます。
GitHubのリモートリポジトリを作成し、上記のソースをリモートに上げておきます。

2. Amplify側の準備

新規アプリを作成

AWSにログインし、コンソール画面からAmplifyを選択します。
Amplifyのホーム画面で「新しいアプリを作成」を選択します。

今回はGitHubを利用しデプロイしていきます。
対象のReactアプリケーションを格納したリポジトリを選択していきます。

GitHubとAmplifyを連携させます。

「select repositories」から対象のリポジトリを選択し、
「install & Authorize」をクリックします。

次に表示される画面で、デフォルトで選択したリポジトリ名が表示されています。
デプロイ対象のブランチを選択し「次へ」をクリックします。今回は「main」ブランチをデプロイします。

次の画面では、デフォルトで「アプリケーション」ビルドコマンド、出力先のディレクトリが選択されています。今回はデフォルトのままの設定で「次へ」を選択します。

最後に設定内容を確認し、「保存してデプロイ」を選択します。

デプロイ直後は下記のようにデプロイ中となっていますが、少し待つと「デプロイ済み」に変更されます。
デプロイ済みになった後、「デプロイされたURLにアクセス」を選択すると、デプロイされたアプリケーション画面に遷移できます。

以下のように、ローカルで確認したものと同じ画面が表示されている事が確認できました。

変更の自動反映を確認する

最後にローカルで開発した内容をデプロイ後の画面に反映させていきます。
デフォルトで生成されているApp.tsxのreturnの中身を下記のように入れ替えてみます。

App.tsx

import './App.css'

function App() {

  return (
    <h1>hello world!</h1>
  )
}

export default App

修正できたらコミット、プッシュを行いリモートリポジトリのmainブランチに修正を反映させます。
mainブランチを更新するとAmplifyでは再度ビルド中の表示になりますが、少し待つと再度「デプロイ済み」に切り替わります。
デプロイ後のURLにアクセスしてみると、以下のようにhello wordl!が表示され修正内容が自動で反映されれている事を確認できました。