y-ohgi's blog

TODO: ここになにかかく

vite x React x TypeScript でgithub pages にデプロイする

vite React TypeScript

f:id:y-ohgi:20210811214918p:plain

TL;DR

  • 話題のvite を使ってReact x TypeScript のSPA を作るサンプル
  • GitHub Pages へGitHub Actions でCD も行う
  • vite、とても良い

概要

vite を最近良く見るので、使ってみたなど。

構築

version

  • node
    • 16.6.1
  • npm
    • 7.20.3
  • vite
    • 2.4.4

Repository

https://github.com/y-ohgi/y-ohgi.github.io

vite でReact の環境を構築する

vite でreact のTypeScript テンプレートを指定して構築する

$ npm init vite@latest aboutme -- --template react-ts
$ tree aboutme/
aboutme/
|-- index.html
|-- package.json
|-- src
|   |-- App.css
|   |-- App.tsx
|   |-- favicon.svg
|   |-- index.css
|   |-- logo.svg
|   |-- main.tsx
|   `-- vite-env.d.ts
|-- tsconfig.json
`-- vite.config.ts

Dockerize

Dockerize 兼VSC で使用するための設定を行います。

Dockerfile

FROM node:16-alpine

ENV HOST 0.0.0.0

WORKDIR /app

COPY package.json package-lock.json /app/

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run", "dev"]

docker-compose.yaml

version: "3.9"

services:
  app:
    build: .
    ports:
      - 3000:3000
    volumes:
      - .:/app
      - node_modules:/app/node_modules

volumes:
  node_modules: {}

VSC 上でDevelopment Container のファイル作成コマンドを実行

>Add development Container Configuration Files

docker-compose.yaml に合わせて書き換える

.devcontainer/devcontainer.json

- "workspaceFolder": "/workspace",
+   "workspaceFolder": "/app",

.devcontainer/docker-compose.yml

    volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
-      - .:/workspace:cached
+      - .:/app:cached

最後にvite のオプションでコンテナの外へポート開放を行います

`package.json

-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",

あとは localhost:3000 へアクセスし、vite のテンプレートが実行されていることを確認します。

SPA をつくる

お好きな感じでReact をゴニョる

GitHub Actions を設定する

main ブランチへpush されたイベントをフックして、vite でビルドして gh-pages ブランチへpush するActions の設定を書きます。
${{ secrets.GITHUB_TOKEN }} はデフォルトでGitHub Actions に入っているので、このままコピペで動きます。

また、カスタムドメインを使用したい場合は CNAME ファイルは必須なのでコピペして置いておきます。

.github/workflows/pages.yaml

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - uses: actions/cache@v2
        with:
          path: ~/.npm
          key: node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            node-

      - name: Install and Build
        run: |
          npm ci
          npm run build
          cp CNAME dist/

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

まとめ

vite がwebpack の代替として使用できると聞き、いざ触ってみるとvite 公式でReact とTypeScript のテンプレートを配布してくれているためサクッとはじめられました。
また、webpack のような複雑な設定を記述することなくTypeScript を"素早く"ビルドすることができること、ホットリロードに対応していること、単純にReact でSPA を作るときはvite を使いたいなと思えるような素晴らしいビルドツールでした。

Ref: