Zenn
🐳

Docker+Viteでローカル環境を汚さないJSフレームワーク(Vue,React,etc...)の環境構築をしてみる(Windows)

2022/06/30に公開
Docker
React
Vue.js
Node.js
Vite
tech

はじめに

  • この記事はWeb開発経験1年ちょっとの学生が初めて執筆した備忘録です。
  • 間違い、指摘がありましたら報告お願いします。
  • 「これ見ればとりあえず環境構築できちゃうよ！」って感じの内容です。詳しい説明は各ドキュメント等をご覧ください(わかりやすく説明できる自信もないので；；)
  • ローカル環境にDockerが動く環境さえあればコンテナ内で完結できます。

Dockerfile,docker-compose.ymlはこちらから。適宜クローンしてください。
https://github.com/ayuukumakuma/common_node_env

前提

Docker環境があること。

環境構築

Dockerfileの作成

  1. 任意のディレクトリ直下にDockerfileを作成。
  2. 以下のように編集。
Dockerfile
# Alpine Linuxベースの最新バージョンnodeを採用
FROM node:18-alpine
# コンテナ内の作業ディレクトリ
WORKDIR /app

ENV LANG=C.UTF-8 \
 TZ=Asia/Tokyo

# ↓↓↓ここはまだコメントアウト(後ほど使用)↓↓↓
# COPY package.json yarn.lock ./

RUN yarn install

# 3000番でコンテナを公開
EXPOSE 3000

docker-compose.ymlを作成

  1. Dockerfileを作成したディレクトリにdocker-compose.ymlを作成。
  2. 以下のように編集(コメントアウト部分に注意)。
docker-compose.yml
version: "3.8" # docker-composeのバージョン選択
services:
  node: # サービス名
    build: # Dockerfileの設定
      context: . # Dockerfileがあるディレクトリ
      dockerfile: Dockerfile # Dockerfileの名前
    volumes: # データの永続化
      - ./:/app:cached # ホストのカレントディレクトリとコンテナ内の作業ディレクトリを同期
      # ↓↓↓コメントアウトしたまま↓↓↓
      # - node_modules:/app/node_modules # 特定のパスを独立した名前付きボリュームとして定義
    environment: # 環境変数
      - HOST=0.0.0.0 # localhost接続をする際に必要
      - CHOKIDAR_USEPOLLING=true # ホットリロードを可能にする
    tty: true
    ports: # ホストのポートとコンテナのポートを接続
      - "3000:3000"
    command: yarn dev # 実行コマンド 今回はviteの実行コマンド
# ↓↓↓コメントアウトしたまま↓↓↓
# volumes: # 名前付きボリュームの設定
#   node_modules:

Docker Image作成

Dockerfile, docker-compose.ymlがあるディレクトリに移動して下記実行。

$ docker-compose build

エラーが出なければ成功。

Vite導入

下記実行。

$ docker-compose run [サービス名] yarn create vite

成功すると色々聞かれるのでお好きにどうぞ。
今回はreactで進める。

? Project name: vite-react

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
 ❯  react
    preact
    lit
    svelte
    
? Select a variant: › - Use arrow-keys. Return to submit.
    react
 ❯  react-ts

下記のように出れば成功。

Scaffolding project in /app/vite-react...

Done. Now run:

 cd vite-react
 yarn
 yarn dev

Done in 182.19s.

ここでDockerfile, docker-compose.ymlを作成したディレクトリを見てみると次のような構成になっているはず

任意のディレクトリ
├─node_modulesフォルダ
├─先ほど作成したviteプロジェクト名のフォルダ(今回であれば「vite-react」)
├─docker-compose.yml
└─Dockerfile

このままでは、ディレクトリ構成の都合がよろしくないので先ほど作成したフォルダの内容を移動する必要がある。
以下実行。

$ mv ./[プロジェクト名]/* ./
$ rm ./[プロジェクト名]/

次のような構成になればOK。

任意のディレクトリ
├─node_modulesフォルダ
├─srcフォルダ
├─.gitignore
├─docker-compose.yml
├─Dockerfile
├─index.html
├─package.json
├─tsconfig.json
├─tsconfig.node.json
├─vite.config.ts

これにてひとまずViteの導入は終わり。

いろいろ設定

DockerでViteを使うとホットリロードが効かない。なので以下のようにvite.config.jsを設定。

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

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

ホスト側のnode_modulesが空なのでコンテナ内のnode_modulesの中身を持ってくる。
下記実行。

$ docker run --rm -v ${PWD}:/app -w /app node:18-alpine yarn install

ホスト環境のnode_modulesに内容が生成されていれば成功。

いよいよコンテナ起動！...の前に

Dockerfile, docker-compose.ymlのコメントアウトを外す。
再ビルドする。

$ docker-compose build --no-cache

エラーが起きなければOK

お待たせしました

下記実行。

$ docker-compose up

localhost:3000にアクセス。

以下のように表示されれば成功。

あとは適宜gitなど導入しちゃってください。

今回はViteでやってみましたがyarn create viteを実行する時点でnpx create-nuxt-appやnpx create-next-appなどを実行すればそちらの環境構築も可能かと思います。(未検証)
ただ、その場合docker-compose.ymlのcommand部分を変更しないといけないかもです。

おわりに

初めての記事執筆で読みづらいところがあったらごめんなさい；；
これからもちょいちょい書いていければと思います。

Discussion