はじめに

フロントエンドの開発環境構築について紹介します。
チーム内での開発環境を統一するために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で差分のあるファイルを検知するために利用しています。

環境構築の流れ

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

Dockerインストール
WSL2 + Ubuntuをインストールして有効化
WSL上にリポジトリをクローン
Dockerビルド
- プロジェクトで利用するNode.jsのバージョンアップなどがあれば、Dockerfileを更新してDockerビルドをし直せば良い。
Gitなどの設定
プロジェクトの初期設定
- .devcontainerファイルの作成や、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を利用すると動作が重いなどの課題もありますが、チームとしては大きな問題なく開発出来ています。
今後も気持ちよく開発していけるように更に改善を重ねていきたいと考えています。
ここまで見ていただき、ありがとうございました。