AmplifyでReact+Viteアプリをデプロイする

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はAmplifyを使ってReact(Vite)のアプリをデプロイしてきたいと思います。
※当方インフラのエンジニアなので、フロント系の話は勉強中です。その認識で閲覧頂ければと思います。

環境イメージ

手順

github

githubにamplifyというリポジトリを作成しておきます
名前は任意のもので大丈夫です

併せてローカルのPCにC:\Users\ohtsu\Documents\AWSを用意します

VSCodeで上記フォルダを開きます
次にVSCodeで以下を実行し、リポジトリをクローンします。

C:\Users\ohtsu\Documents\AWS>git config --global user.email "メールアドレス"
C:\Users\ohtsu\Documents\AWS>git config --global user.name "名前"
C:\Users\ohtsu\Documents\AWS>git clone https://github.com/ohtsuka-shota/amplify
Cloning into 'amplify'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (3/3), done.

GitHubからクローンしたフォルダ（C:\Users\ohtsu\Documents\AWS\amplify）で以下を実行
（ローカルでnode.jsとかをインストールしてREACTが実行できる必要があります。）
vite@latestで実行するとAmplifyでデプロイする際にバージョンエラーを吐かれるので、あえて6.0.0でやっています。

C:\Users\ohtsu\Documents\AWS>cd amplify
C:\Users\ohtsu\Documents\AWS\amplify>npm create vite@6.0.0 . -- --template react

> npx
> cva . --template react

√ Current directory is not empty. Please choose how to proceed: » Ignore files and continue

Scaffolding project in C:\Users\ohtsu\Documents\AWS\amplify...

Done. Now run:

  npm install
  npm run dev


C:\Users\ohtsu\Documents\AWS\amplify>npm install 

added 197 packages, and audited 198 packages in 8s

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

found 0 vulnerabilities

npm run devを実行して、REACTのウェルカムページを表示できることを確認します。

C:\Users\ohtsu\Documents\AWS\amplify>npm run dev

> amplify@0.0.0 dev
> vite


  VITE v7.0.2  ready in 815 ms

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

githubにpushしていきます

C:\Users\ohtsu\Documents\AWS\amplify>git add .
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'eslint.config.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'vite.config.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.jsx', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.jsx', LF will be replaced by CRLF the next time Git touches it

C:\Users\ohtsu\Documents\AWS\amplify>git commit -m "first-push" 
[main 42e6d5c] first-push
 10 files changed, 2166 insertions(+), 67 deletions(-)
 create mode 100644 public/vite.svg
 create mode 100644 src/App.css
 create mode 100644 src/App.jsx
 create mode 100644 src/assets/react.svg
 create mode 100644 src/index.css
 create mode 100644 src/main.jsx

C:\Users\ohtsu\Documents\AWS\amplify>git push origin main
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 20 threads
Compressing objects: 100% (13/13), done.
Writing objects: 100% (15/15), 20.00 KiB | 10.00 MiB/s, done.
Total 15 (delta 3), reused 7 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/ohtsuka-shota/amplify
   e77db01..42e6d5c  main -> main

GitHubにpushできたことを確認します。

Amplifyでアプリのデプロイ

Amplipyの管理画面にアクセスしてアプリケーションをデプロイを押下します。

Githubと連携するので、それを選択して次に進みます。

Githubのログイン画面がポップするので自分のユーザアカウントを入力してサインインします。

リポジトリはamplify、branchはmain。

アプリの名前を任意のものにして次に進む

確認してデプロイしていきます。

デプロイが進行します。

デプロイが完了するとデプロイ済みとなります。ドメインを押下すると、Reactの画面が出てきます。
デプロイできていますね。

リポジトリやデプロイ履歴を確認することも出来るようですね。

Reactアプリを更新してみる

App.jsxを更新し、それをGithub・Amplify経由でデプロイしていきます。
更新した内容は以下になります。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React Ver 2.0</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

変更したら、内容を確認するためにローカルでnpm run devを実行します。
以下のように出力内容が変わっていることがわかります。

これをGitHubにpushします。
changes for v2というメッセージとともにpushしました。

C:\Users\ohtsu\Documents\AWS\amplify>git add .
warning: in the working copy of 'src/App.jsx', LF will be replaced by CRLF the next time Git touches it

C:\Users\ohtsu\Documents\AWS\amplify>git commit -m "changes for v2"
[main 154e8b7] changes for v2
 1 file changed, 1 insertion(+), 1 deletion(-)

C:\Users\ohtsu\Documents\AWS\amplify>git push origin main
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 20 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 367 bytes | 367.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/ohtsuka-shota/amplify
   42e6d5c..154e8b7  main -> main

AmplifyでGitHubにpushされたことを検知してデプロイが自動で走ります。
デプロイ済みになったら、ドメインを押下します。

変更が反映されてことが確認できました。