Zenn
⚡

Vite + TypeScript + React

2024/01/20に公開
Docker
React
TypeScript
Tailwind CSS
Vite
tech

技術構成

ライブラリ

Name Version
Vite 5.0.1
TypeScript 5.3.3
React 18.2.0
TailwindCSS 3.4.1
Docker Compose 2.5.0

開発環境

Name Version
MacBook Air Apple M1
macOS Sonoma 14.1.1

環境構築

プロジェクト作成


npm create vite@latestを実行

terminal
$ npm create vite@latest
? Project name: プロジェクト名


Reactを選択

terminal
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others


TypeScript + SWを選択

terminal
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC


依存パッケージのインストール

terminal
$ npm -i


TailwindCSSのインストール[1]

terminal
$ npm i -D tailwindcss postcss autoprefixer

$ npx tailwindcss init -p

設定ファイルの編集


Viteの設定

./vite.config.ts[2]

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // 規定ポートを3000番にする
    host: true  // ローカルホスト以外のすべてのアドレスに接続する（Dockerでの開発用）
  }
})


TailwindCSSの設定

./tailwind.config.js

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


TailwindCSSの読み込み

./src/index.css

index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Docker


Dockerfileの作成

./docker/Dockerfile[3]

Dockerfile
FROM node:16.17.0-bullseye-slim as build
WORKDIR /app
COPY ../ /app/


docker-compose.ymlの作成

./docker/docker-compose.yml

docker-compose.yml
services:
  app:
    build: .
    volumes:
      - ../:/app
      - node_modules/nodel_modules # node_modulesをボリュームから除く
    ports:
      - "3000:3000" # viteサーバーのポートにフォワーディング
    tty: true
    command: >
      node -v &&
      npm -v &&
      npm list

volumes:
  node_modules:


dockerignoreの作成

./docker/.dockerignore

**/temp?
**/node_modules
**/docker
**/.gitignore
**/.git


$ docker compose 実行

terminal
$ docker compose -f ./docker/docker-compose.yml -p vite_project build --no-cache
脚注

  1. Install Tailwind CSS with Vite ↩︎

  2. Vite : サーバーオプション ↩︎

  3. 最適な Node.js Docker イメージを選択する (snyk) ↩︎

Discussion