Mooの技術メモ

技術的なメモ中心。

WSL2、Docker、VS codeでWebマップ開発環境を構築する

はじめに

今回も自分用のメモだ。

Webマップの開発環境を変えたいと思いはじめてから大分時間が経ってしまった。

今まではHyper-V仮想マシンを作成していたが、WSL2も使えるようになったし、Dockerも触りたい。もう少しモダンな開発環境を作ろうということで以下の3つを使った開発環境を作ることにした。

WSL2上でDockerを動かして、HostのマシンからVS Codeのエクステンションを使ってリモートでコンテナに接続する。Hostの環境を汚すことなく、VS Codeを使ってローカルで開発しているかのような感じで開発できるようだ。

f:id:hiromoooo:20210111233904p:plain
VS Codeからリモートでコンテナにアクセス

出典:Developing inside a Container

この記事では上記3つのツールを使って開発環境を構築し、JavaScriptではじめるWebマップアプリケーションにあるMapbox GL JSを使ったWebマップのサンプルを動かすところまでやってみる。

以下のような感じのアプリが動くのがゴールだ。

f:id:hiromoooo:20210112000203g:plain
JavaScriptではじめるWebマップアプリケーションのサンプルアプリ

WSL2

WSL (Windows Subsystem for Linux) はWindows内でLinuxを実行できる仕組みらしい。詳しいことは知らない。

2になってファイルシステムのパフォーマンスが向上して、システムコールが完全に互換性を持ったためDocker等が動くようになったとのこと(参考)。Hyper-VLinuxマシンを使うのと本質は変わらないようだが起動が圧倒的に早い。

WSL2のインストール

公式のドキュメントに従ってインストールした。Windows Insiders Programに入っていてプレビュー版のWindows 10を使っているともっと簡単なインストール方法があるようだが、今回はマニュアルでインストールした。 Windows 10のバージョンが1903以上、Build 18362以上であれば以下の手順でWSL2をインストールできる。

さらにWindows Terminalをインストールすれば、Powershellだけでなく上記でインストールしたLinuxのターミナルも統合して扱えるので便利だ。前の記事ではAnaconda Powershell Promptを追加する方法を書いた。

moo-tech.hatenablog.com

Docker Desktop for Windowsのインストール

この記事を読む人には説明はほとんど不要だと思うので割愛する。インストーラーをダウンロードして実行すればよい。インストールしたら設定でWSL2 based engineを使うようにチェックを入れる。

f:id:hiromoooo:20210112184000p:plain

VS Codeとエクステンションのインストール

公式サイトインストーラーをダウンロードして実行するだけなので、VS Codeのインストールも割愛する。

エクステンションは、VS CodeからリモートでLinux環境やコンテナに接続するために以下をインストールする。

最後のRemote Developmentだけでも良さそうな気もしたが、とりあえず全部入れたった。

プロジェクトディレクトリの作成とGitHubのレポジトリのクローン

必要なツールがそろったのでLinuxマシンの中に入ってプロジェクト用のディレクトリを作成する。

  • Windows Terminalを起動し、インストールしたUbuntuのターミナルを開く。

f:id:hiromoooo:20210112000954p:plain
Windows Terminalには自動でWSL2のUbuntuが追加されている

  • /home/[user]に移動しmkdirで任意のプロジェクト用のディレクトリを作成
  • code .VS Codeを起動

Remote - WSLのエクステンションを入れているので、UbuntuのターミナルからでもVS Codeが起動する。

Ctrl+Shift+`VS Codeからターミナルを開くとUbuntuのターミナルにアクセスしており、HostのVS CodeからWSL2にリモートで接続できていることがわかる。

f:id:hiromoooo:20210112001706p:plain

VS Codeで開いたターミナルに以下のコマンドを打ってサンプルアプリをレポジトリからクローンする。

  • git clone https://github.com/dayjournal/mapboxgljs-starter.git

コンテナでフォルダを開く

準備が整ったので、コンテナでフォルダを開く。以下手順に入る前にDocker Desktop for Windowsは起動しておこう。

  • 左下に><のようなアイコンがあるのでクリックするとコマンドパレットが展開する
  • Remote - Containers: Add Development Container Configuration Files... をクリック

f:id:hiromoooo:20210112001823p:plain
左下のアイコンからリモート開発関連のコマンドパレットを展開できる

  • 作成するDockerコンテナのテンプレートがあらかじめ用意されており、リストから選択できるのでNode.JS の Version 14を選択する
  • ディレクトリに.devcontainerフォルダが追加される

.devcontainerフォルダの中にはDockerfileとdevcontainer.jsonの二つのファイルが含まれている。

DockerfileはDockerイメージの設計書だが、devcontainer.jsonVS Codeがどのようにコンテナにアクセスするかを規定する設定ファイルのようだ(詳細)。

VS Codeの右下にプロンプトが出てコンテナでフォルダを開きなおすか聞かれるので、Openをクリックする。

f:id:hiromoooo:20210112002222p:plain
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マップのアプリが起動したら成功。

f:id:hiromoooo:20210112000203g:plain

ソースコードの編集

このままだと編集権限がなく、アプリのカスタマイズができなかったので以下のコマンドを実行してソースコードディレクトリのオーナーを変えた。

  • chown -R $USER:$USER .

スマートなやり方ではないのだろう。devcontainer.jsonを編集すれば上手く捌けそうだがどうだろうか。 その辺がわかったらまたブログでメモを残す。

以上で最低限の開発環境は構築できた。ソースコードを編集して保存すると以下のようにアプリ側に即反映される。いい感じだ。

f:id:hiromoooo:20210112174730g:plain