WSL+Docker+DevContainersによるフロントエンド開発環境の構築

はじめに

フロントエンドの開発環境構築について紹介します。
チーム内での開発環境を統一するためにDockerを利用しています。
また、前提としてチームではWindowsPCを利用しています。
この記事では使用言語やフレームワーク、ライブラリなどは紹介しません。
※この記事の内容はテックブログでも公開しています。

フロントエンドの開発環境

WSL + Docker + VSCode + DevContainers

準備

VSCodeの拡張機能であるDev Containersを使って開発環境を構築します。
Dockerコンテナを開発環境とすることで下記のようなメリットがあります。

• OSやNode.jsのバージョン違いによるトラブル防止
• ローカル環境にプロジェクトごとの必要なツールなどをインストールする必要がなくなる

Dockerfileおよびdocker-compose.ymlは下記のようになっています。

Dockerfile

FROM node:18-alpine

RUN mkdir -p /{プロジェクトディレクトリ名}/node_modules &&\\
chown -R node:node /{プロジェクトディレクトリ名} &&\\
apk add openssh &&\\
apk add git &&\\
apk add keychain

USER node

ENV HOST 0.0.0.0
EXPOSE 3000

docker-compose.yml

version: '3.8'
services:
  development:
    container_name: {任意のコンテナ名前}
    build: .
    ports:
      - '3000:3000'
      - '6006:6006'
      - '24678:24678'
    working_dir: '/{プロジェクトディレクトリ名}'
    volumes:
      - .:/{プロジェクトディレクトリ名}:cached
      - node_modules_volume:/{プロジェクトディレクトリ名}/node_modules
    tty: true
volumes:
  node_modules_volume:

node_modulesのような容量が大きなディレクトリはマウントしているとDockerの動作が遅くなることがあります。
そのため、npm installしたライブラリはVolumeに保存されるようにしています。

こうすることでDockerの動作も問題なくなり、LinterやFormatterなどの開発時に必要なライブラリも動作させることができます。
また、Dockerfileでインストールしているgitやkeychainについては、開発環境上でのGitコマンドやVSCodeで差分のあるファイルを検知するために利用しています。

環境構築の流れ

開発環境構築の流れは下記のようになります。

1. Dockerインストール
2. WSL2 + Ubuntuをインストールして有効化
3. WSL上にリポジトリをクローン
4. Dockerビルド
   • プロジェクトで利用するNode.jsのバージョンアップなどがあれば、Dockerfileを更新してDockerビルドをし直せば良い。
5. Gitなどの設定
6. プロジェクトの初期設定
   • Dockerコンテナ上でのnpm installや環境変数ファイルの配置など。

注意点

環境構築上での注意点などは下記のようなものがあります。

• WSL上へのGitクローンで128エラーで失敗することがある。
  • GitConfigでクローン先のディレクトリを信頼させることで解決する。
  • 詳細は弊社テックブログのこの記事の記事で解説しています。
• Docker環境とWindowsローカルで予期せぬGit差分が発生することがある。
  • 改行コードの違いによるもので、.gitattributesで改行コードを指定することで回避可能。

* text=auto eol=lf
*.sh text eol=lf
*.bat text eol=crlf
*.cmd text eol=crlf
*.ps1 text eol=crlf

• WSLへのメモリ割り当てが少なく、開発中にメモリ不足になることがある。
  • Windowsビルド20175以降ではWSLに割り当てられるメモリがWindowsの50%もしくは8GBの少ない方となる。
    • https://learn.microsoft.com/en-us/windows/wsl/wsl-config#main-wsl-settings
  • WSLへの割り当てメモリを指定することで解消。
    • Dockerコンテナでfree -hで割り当てられているメモリを確認できる。
  • 下記の手順で割り当て可能
    1. C:\\Users\\<yourUserName>\\に.wslconfigを作成
    2. 割り当てるメモリを記載

       [wsl2]
       memory=24GB
       

    3. WSLを再起動(wsl --shutdown)

おわりに

Dockerを利用した開発環境について紹介しました。
WSL上にGitクローンしているためSourcetreeを利用すると動作が重いなどの課題もありますが、チームとしては大きな問題なく開発出来ています。
今後も気持ちよく開発していけるように更に改善を重ねていきたいと考えています。
ここまで見ていただき、ありがとうございまし