WSL2、Docker、VS codeでWebマップ開発環境を構築する
はじめに
今回も自分用のメモだ。
Webマップの開発環境を変えたいと思いはじめてから大分時間が経ってしまった。
今まではHyper-Vで仮想マシンを作成していたが、WSL2も使えるようになったし、Dockerも触りたい。もう少しモダンな開発環境を作ろうということで以下の3つを使った開発環境を作ることにした。
- WSL2
- Docker
- VS Code
WSL2上でDockerを動かして、HostのマシンからVS Codeのエクステンションを使ってリモートでコンテナに接続する。Hostの環境を汚すことなく、VS Codeを使ってローカルで開発しているかのような感じで開発できるようだ。
出典:Developing inside a Container
この記事では上記3つのツールを使って開発環境を構築し、JavaScriptではじめるWebマップアプリケーションにあるMapbox GL JSを使ったWebマップのサンプルを動かすところまでやってみる。
以下のような感じのアプリが動くのがゴールだ。
WSL2
WSL (Windows Subsystem for Linux) はWindows内でLinuxを実行できる仕組みらしい。詳しいことは知らない。
2になってファイルシステムのパフォーマンスが向上して、システムコールが完全に互換性を持ったためDocker等が動くようになったとのこと(参考)。Hyper-VでLinuxマシンを使うのと本質は変わらないようだが起動が圧倒的に早い。
WSL2のインストール
公式のドキュメントに従ってインストールした。Windows Insiders Programに入っていてプレビュー版のWindows 10を使っているともっと簡単なインストール方法があるようだが、今回はマニュアルでインストールした。 Windows 10のバージョンが1903以上、Build 18362以上であれば以下の手順でWSL2をインストールできる。
- WSLを有効化
- 管理者としてPowershellを起動し、以下のコマンドを実行
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
- 仮想マシン機能を有効化
- 管理者としてPowershellを起動し、以下のコマンドを実行
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
- Linuxカーネルの最新パッケージをダウンロードし実行
- WSL2をデフォルトのバージョンにする
- Powershellを起動し、以下のコマンドを実行
- wsl --set-default-version 2
- MSストアからLinuxのディストリビューションをインストールする
- 今回はUbuntuにした
さらにWindows Terminalをインストールすれば、Powershellだけでなく上記でインストールしたLinuxのターミナルも統合して扱えるので便利だ。前の記事ではAnaconda Powershell Promptを追加する方法を書いた。
Docker Desktop for Windowsのインストール
この記事を読む人には説明はほとんど不要だと思うので割愛する。インストーラーをダウンロードして実行すればよい。インストールしたら設定でWSL2 based engineを使うようにチェックを入れる。
VS Codeとエクステンションのインストール
公式サイトでインストーラーをダウンロードして実行するだけなので、VS Codeのインストールも割愛する。
エクステンションは、VS CodeからリモートでLinux環境やコンテナに接続するために以下をインストールする。
最後のRemote Developmentだけでも良さそうな気もしたが、とりあえず全部入れたった。
プロジェクトディレクトリの作成とGitHubのレポジトリのクローン
必要なツールがそろったのでLinuxマシンの中に入ってプロジェクト用のディレクトリを作成する。
Remote - WSLのエクステンションを入れているので、UbuntuのターミナルからでもVS Codeが起動する。
Ctrl+Shift+`
でVS Codeからターミナルを開くとUbuntuのターミナルにアクセスしており、HostのVS CodeからWSL2にリモートで接続できていることがわかる。
VS Codeで開いたターミナルに以下のコマンドを打ってサンプルアプリをレポジトリからクローンする。
git clone https://github.com/dayjournal/mapboxgljs-starter.git
コンテナでフォルダを開く
準備が整ったので、コンテナでフォルダを開く。以下手順に入る前にDocker Desktop for Windowsは起動しておこう。
- 左下に><のようなアイコンがあるのでクリックするとコマンドパレットが展開する
- Remote - Containers: Add Development Container Configuration Files... をクリック
- 作成するDockerコンテナのテンプレートがあらかじめ用意されており、リストから選択できるのでNode.JS の Version 14を選択する
- ディレクトリに.devcontainerフォルダが追加される
.devcontainerフォルダの中にはDockerfileとdevcontainer.jsonの二つのファイルが含まれている。
DockerfileはDockerイメージの設計書だが、devcontainer.jsonはVS Codeがどのようにコンテナにアクセスするかを規定する設定ファイルのようだ(詳細)。
VS Codeの右下にプロンプトが出てコンテナでフォルダを開きなおすか聞かれるので、Openをクリックする。
Dockerfileとdevcontainer.jsonの設定内容に従ってDockerイメージとコンテナが作成され、プロジェクトのディレクトリが自動でマウントされる。
アプリの起動
JavaScriptではじめるWebマップアプリケーションのREADMEに従ってパッケージをインストール、ビルド、アプリの起動を行う。
VS Codeのターミナルで以下のコマンドを実行する。ユーザーがnodeというユーザーになっているので、パッケージのインストールはsudoで行う。
cd mapboxgljs-starter/
sudo npm install
npm run build
npm run dev
ブラウザで以下のようなWebマップのアプリが起動したら成功。
ソースコードの編集
このままだと編集権限がなく、アプリのカスタマイズができなかったので以下のコマンドを実行してソースコードのディレクトリのオーナーを変えた。
chown -R $USER:$USER .
スマートなやり方ではないのだろう。devcontainer.jsonを編集すれば上手く捌けそうだがどうだろうか。 その辺がわかったらまたブログでメモを残す。
以上で最低限の開発環境は構築できた。ソースコードを編集して保存すると以下のようにアプリ側に即反映される。いい感じだ。