React + Vite + TypeScript + Docker + docker-compose セットアップ方法

はじめに
やり方

はじめに

そこまで難しくないし手間でもないけど、備忘録慣れするために残しとく
最近viteの速さにドキドキしたからviteを使うようにする。

API連携はしない予定だけど、docker-compose.ymlの作成まで行う。

react_test_appというgitリポジトリに作っていく!!

やり方

Dockerfile作成

以下の内容でDockerfileを作成する。

FROM node:18.4.0-alpine

RUN apk update && \
  apk upgrade && \
  apk add --no-cache vim yarn bash

COPY ./ /react_test_app/
WORKDIR /react_test_app

リモートリポジトリにpushする

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/[アカウント名]/react_test_app.git
git push origin master

イメージビルド

docker build . -t [イメージ名]

reactプロジェクト作成

コンテナ起動

docker run --mount type=bind,src="$(pwd)",target=/react_test_app -it [イメージ名]:latest /bin/bash

ここからはコンテナ内での作業
viteを使ってreactプロジェクトを作成する

npm create vite@latest

# viteをインストールしてもいいか聞かれるのでyを入力
Need to install the following packages:
  create-vite@2.9.4
Ok to proceed? (y) y

# project_nameを聞かれるので入力
# Dockerfileをプロジェクトファイルに内包させたいので、gitリポジトリと同じ名前にする
✔ Project name:react_test_app

# フレームワークは今回はreactを選択(矢印キー & Enter)
? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

# typescript使いたいので、react-tsを選択
? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts

最後にこの表記が出たら完了

Scaffolding project in /react_test_app/react_test_app...

Done. Now run:

  cd react_test_app
  npm install
  npm run dev

表記に従い、画面を表示させてもいいが、コンテナにポートとか渡してなので、docker-compose.ymlを作るときまで後回しにする。

また、Dockerfileはプロジェクトファイルに内包させたいので、以下を実行する。
( 以下ローカルPCでの作業 )

$ ls
Dockerfile      react_test_app
$ mv ./react_test_app/.[^\.]* ./
$ mv ./react_test_app/* ./
$ rm -rf react_test_app
$ ls -a
.                       .gitignore              package.json            tsconfig.node.json
..                      Dockerfile              src                     vite.config.ts
.git                    index.html              tsconfig.json

viteでdev serverのポートを指定したい場合はvite.config.jsをこのように変更する

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  }
})

Dockerfile更新

ビルド時にパッケージをインストールして欲しいので、Dockerfileを編集する

FROM node:18.4.0-alpine

RUN apk update && \
  apk upgrade && \
  apk add --no-cache vim yarn bash

COPY ./ /react_test_app/
WORKDIR /react_test_app

# 追記
RUN yarn install

ビルドした時にyarn installが走り、node_modulesが作成されるようになる。
ただ、コンテナにフォルダをマウントしとかないと、ローカルPC上にはnode_modulesは作られない。
エディタの拡張機能を使ってる場合、ローカルPCにもnode_modulesが作成された方が都合がいいので、ビルドはdocker-compose.ymlを作成してからにする。

docker-compose.yml作成

version: '3'

services:
  react:
    build:
      context: ./
      dockerfile: ./Dockerfile
    # --hostオプションがついてないとサーバー立ててもアクセスできないよ
    command: >
      bash -c "yarn dev --host"
    volumes:
      - ./:/react_test_app
    ports:
      - "3000:3000"

ようやくビルドする

docker-compose build react

ローカルにもnode_modulesが欲しいので、以下を実行する

docker-compose run --rm react yarn install

動かしてみる

docker-compose up react

これでlocalhost:3000にアクセスしていつものページが表示されればOK

他にも色々設定とかも残しときたいけど別で