Amplify Gen 2 × React × Tailwind CSS で始めるモダンなフルスタック開発環境構築

はじめに

こんにちは！この記事では、Amplify Gen 2、Vite + React、Tailwind CSS を組み合わせたモダンな開発環境をゼロから構築する手順をまとめます。
コードベース＆Gitブランチで完全管理する構成を採用しています。

📦 技術スタック

フロントエンド：React 19（+ TypeScript）
CSS：Tailwind CSS
バンドラ：Vite
バックエンド：Amplify Gen 2（Cognito、Lambda など）
デプロイ：Amplify Console（GitHub連携）

1. React プロジェクトの構築（Vite）

npm create vite@latest my-app --template react-ts
cd my-app
npm install
npm run dev

--template react-ts によって TypeScript + React の構成が自動で準備されます。

2. Tailwind CSS の導入

npm install tailwindcss @tailwindcss/vite

vite.config.ts を編集する

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
      react(),
      tailwindcss()],
})

src/index.css を編集する

@import "tailwindcss";

App.tsx を編集する

function App() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <h1 className="text-3xl font-bold text-blue-500">
        Hello, Tailwind CSS with Vite!
      </h1>
    </div>
  )
}

3. Amplify Gen 2 の導入

npm create amplify@latest

対話形式で「このディレクトリに作成」(.)を選択

自動的に amplify/ ディレクトリ が生成されます

4. GitHub に push ＆ Amplify Console に連携

git add .
git commit -m "feat: initial Amplify Gen2 + Vite + Tailwind project"
git push

Amplify Console から GitHub を連携 → 対象リポジトリとブランチを選ぶ！

5. amplify.yml の構成

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

まとめ

この記事では、Amplify Gen 2、Vite + React、Tailwind CSS を使ったモダンなフロントエンド開発環境の構築手順を解説しました。