React＋ViteをGithub Actionsでデプロイするまで

Dockerで作るNextアプリ、どう頑張ってもホットリロードができないのでViteに逃げます。
おはようございます、若下です。

動作環境(いつもの)

・Windows11
・VSCode
・Docker Desktop ｖ4.12.0
・やる気

初期ディレクトリ構成

.
├─ docker
│   └─ Dockerfile
└─ docker-compose.yml

環境構築

docker-compose.ymlの作成

初回作成時はcommandコメントアウトしてください

version: '3'
services:
  app:
    container_name: vite
    build: docker/
    working_dir: /var/www/html/app
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./:/var/www/html
    ports:
      - '3000:3000'
    command: "npm run dev"
    tty: true

Dockerfile作成

FROM node:22.9-alpine

WORKDIR /var/www/html

RUN apk update && \
    npm install -g npm 

EXPOSE 3000
ENV HOST 0.0.0.0

コマンド打っていく

ルートディレクトリで以下のコマンドを打つ

docker-compose up -d --build

ビルドが完了したらコンテナが自動起動します、オプションって便利だね

コンテナに入る

いつものことながらbash打つのがめんどいのでDocker Desktopの「Open in terminal」から入ります

プロジェクトの作成

ワーキングディレクトリを「/var/www/html/app」に設定しているため、プロジェクトディレクトリを作る必要がないので「./」と入れています

npm create vite@latest ./

なんか聞かれるから答える

Need to install the following packages:
    create-vite@5.4.0
Ok to proceed? (y) y
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

Scaffolding project in /var/www/html/app...

Done. Now run:

  npm install
  npm run dev

/var/www/html/app #

この時点では各種インストールされないので「npm install」してから立ち上げる

立ち上げる

portをpackage.jsonに指定しないと5173固定になるので"dev"にポートとホストを追記する

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3000 --host 0.0.0.0",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

/var/www/html/app # npm run dev

> app@0.0.0 dev
> vite --port 3000 --host 0.0.0.0


  VITE v6.0.7  ready in 729 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://172.28.0.2:3000/
  ➜  press h + enter to show help

webにアクセスするとReactのロゴがぐるぐる回ってるページが出てくるので、環境構はこれでおわり

Github Pagesにデプロイする

詳しい手順は公式サイトにあります

静的サイトのデプロイ

公式にあった内容を基に自環境用にvite.ymlを作成します

• ブランチをmain→masterへ

• cache-dependency-pathの追記

• working-directoryの追記

ルートディレクトリではなくappディレクトリにあるのですべてにapp指定しています
（nodeも合わせたほうがいいんだろうけど20でも動いたから良しとする）

# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages

on:
  # デフォルトブランチを対象としたプッシュ時にで実行されます
  push:
    branches: ['master']

  # Actions タブから手動でワークフローを実行できるようにします
  workflow_dispatch:

# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
permissions:
  contents: read
  pages: write
  id-token: write

# 1 つの同時デプロイメントを可能にする
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # デプロイするだけなので、単一のデプロイジョブ
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: app/package-lock.json
      - name: Install dependencies
        working-directory: app
        run: npm ci
      - name: Build
        working-directory: app
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        with:
          path: './app/dist'
        uses: actions/upload-pages-artifact@v3
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

あとは指定したブランチにpushしたらあとはGithub Actionsがいい感じに勝手にデプロイしてくれます

環境構築後のディレクトリ

.
├─ .github
│   └─ workflows
│      └─ vite.yml
├─ app
│   ├─ node_modules
│   ├─ public
│   ├─ src
│   └─ ...(package.jsonとかコンフィグファイル)
├─ docker
│   └─ Dockerfile
└─ docker-compose.yml

おしまい