🐳

DockerとVS Code Remote Containersを用いたフロントエンド開発環境構築

2021/12/29に公開

2件

背景

プロジェクトの新規立ち上げや、新しくプロジェクトに新規メンバーが入った場合に環境構築に手間取ることが多いため、Docker＋VS Code Remote Containersのフロントエンドアプリケーション開発環境構築ができるリポジトリを作成しました。

本記事では上記リポジトリを用いた環境構築手順とCreate React Appによる簡単なアプリ開発例を説明します。
また、上記リポジトリをgit cloneしなくても一から同じ環境を構築できるように、リポジトリに含まれるファイル群についてもそれぞれ説明します。

本記事の対象はフロントエンドですが、バックエンドのプロジェクト構築も基本的には同じ知識で構築できるはずです。

前提条件

本記事では以下を前提条件とします。ただし、WindowsやLinuxでも基本的には問題ないはずです。

macOS Monterey
Visual Studio Code
VS Code拡張機能 Remote - Containers
Docker Desktop

環境構築手順

環境構築手順を説明します。

はじめに、リポジトリをクローンします。
（用意するファイルは大してないので、手動でファイル群を作成しても良いですが、説明を簡単にするためここでは私の作成したリポジトリを使用します）

git clone https://github.com/LeftLetter/vscode-compose-template.git

uiディレクトリをVS Codeで開き（注：プロジェクトルートを開くわけではない）、左下の緑色のアイコンをクリックします。

Repoen in Containerを選択します。

コンテナのビルドが走るのでしばし待ちます。
画面右下にポップアップが表示され、「show log」をクリックするとログが表示されます。

ビルドが正常に完了した場合、VS Codeの左下にコンテナ名が表示されているはずです。

これでVS Codeからコンテナの中身を直接触ることができるようになります。全てはコンテナ内で完結するので、リンターやフォーマッタをローカルにインストールする必要はありません。

また、カレントディレクトリはバインドマウントされるため、万が一コンテナが消えてしまってもホスト側にファイルは残ります。

次章では構築したコンテナ環境にCreate React Appでフロントエンドアプリケーションを作成し、デバッグする方法を説明します。

Create React Appでアプリを作成し、デバッグしてみる

VS Code内のターミナルで、以下のコマンドを実行し、Reactアプリのテンプレートを作成します。

$ create-react-app test_project
$ shopt -s dotglob
$ mv test_project/node_modules/* node_modules
$ mv test_project/* .
$ rm -rf test_project/

既にChromeが起動している場合、終了します。その後、以下のコマンドでChromeをデバッグモードで起動します。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check

以下のコマンドでdevサーバを起動します。

$ yarn start

Chromeでlocalhost:3000にアクセスし、Create React Appのサンプルページが開くことを確認します。

F5キーを押下し、VS Codeのデバッガを起動します。
適当な箇所でブレークポイントを設定した後、Chromeをリフレッシュし、ブレークポイントでプログラムが停止すればOKです。

設定ファイルの説明

設定ファイル群についてそれぞれ詳細を説明します。

ディレクトリ構成

ディレクトリ構成は以下の通りです。serverディレクトリにはフロントエンドアプリケーション開発のためのモックサーバを、uiディレクトリには開発対象のフロントエンドアプリケーションを配置する想定です。

/
├server/
│ ├.devcontainer/
│ │ ├swagger.yml
│ │ ├Dockerfile
│ │ └devcontainer.json
├ui/
│ ├.devcontainer/
│ │ ├Dockerfile
│ │ └devcontainer.json
│ └.vscode/
│   └launch.json
├.gitignore
├README.md
└docker-compose.yml

ファイルの個別説明

docker-compose.yml

コンテナ起動のエントリーポイントとなります。

ボリューム

ui-node-modules:はnode-modulesのボリュームマウントです。これによりyarn addなどのコマンドの高速化が可能です。こちらは公式ドキュメントに書かれているテクニックです。必要に応じて、buildやdistなどのディレクトリもボリュームマウントすることでビルドの高速化が見込まれます。

参考：Use a targeted named volume

ui-extensions:はVS Codeの拡張機能のボリュームマウントです。再ビルドのたびに拡張機能のインストールを行うのを防ぎますが、devcontainers.jsonに新たにインストールしたい拡張機能を追加しても反映されないため、その際はボリュームを削除する必要があります。こちらも同様に、公式ドキュメントに書かれているテクニックです。

参考：Avoiding VS Code extension reinstalls