LoginSignup
1
3

More than 1 year has passed since last update.

開発環境を構築する(WSL2 + Docker + VSCode - Remote Containers) 2022年1月版

Posted at

PCを新調したので、開発環境を再構築。
以前も整理しようとした挙句にグチャグチャになってしまったので、ローカルではなくやはりコンテナ環境を使う方式へ。
どうせだったらVSCode Remote Container を使おうと。
環境はWindows11Homeです。VSCodeはインストール済みとします。

WSL2 のインストール

コントロールパネル->プログラムと機能->Windowsの機能の有効化または無効化から、Linux用Windowsサブシステムをチェックを入れてインストールする(要再起動)
image.png

Docker Desktop のインストール

DockerHubよりインストーラーをダウンロードしてインストールします。
これによって、以下のモジュールがインストールされます
* Dcoker Compose
* Notary
* Kubernetes
* Credential Helper

インストールにあたっての選択肢はそれほどなく、そのまま進めてしまっても問題ないかと思います。
image.png

一通りインストールが終わるとサインアウトを要求されるので実施します。
image.png

ログインしなおして進めていくと、カーネルアップデートを要求されるので指定リンクから実施します
image.png

image.png

インストール後、DockerのRestartを実行後に下記ダイアログが表示されます。
Startをするとチュートリアルが開始されるので不要な人はスキップしましょう。
image.png

Ubuntu のインストール

今回、実行環境としてはUbuntuを使用することにしたのでこちらをインストールします。
インストールはMicrosoftStoreから検索して入手を押すだけ
image.png

Ubuntuを開くとUbuntu用のユーザを作成する処理が動くので、ユーザ・パスワードを設定します

VSCode の環境構築

Remote - Containers のインストール

何か忘れてるな、、と思ったら、肝心のRemote-Containersをインストールしていませんでした。
VSCode のプラグインを検索してインストールします
image.png

Remote - WSL のインストール

WSLと連携するために必要となるプラグインをインストールします
image.png

ここまでで準備は完了。

WSL2上のUbuntuへ VSCodeから接続する

WindowsTerminalを起動します
image.png

通常はPowerShellが起動されるので、横のプルダウンからUbuntuを選択します。
image.png
image.png

適当に今回のプロジェクトフォルダを作成し、docker-compose.ymlを作成してVSCodeを起動させます。

$ mkdir /home/<ユーザ>/workspace/sample
$ cd /home/<ユーザ>/workspace/sample
$ touch docker-compose.yml
$ code.

起動したVSCode の左下が「WSL:Ubuntu-20.04」となっていて、WSL上で実行されたことが確認できます
image.png

docker-compose.ymlの設定

起動したVSCodeを使って、docker-compose.ymlを編集。Nodeの環境を定義します。
(コンテナ名がsample-containerの場合)

version: '3'
services:
  node:
    image: node:lts
    container_name: node-container sample-container

Remote - Containers でコンテナ起動

VSCode左下の緑のマークをクリックすると出てくるプロンプトから「Reopen in Container」を選択
image.png

ここで書きエラーが起きることがあります

[56613857 ms] Start: Run in Host: docker version --format {{.Server.APIVersion}}
[56613991 ms] 
The command 'docker' could not be found in this WSL 2 distro.
We recommend to activate the WSL integration in Docker Desktop settings.

For details about using Docker Desktop with WSL 2, visit:

https://docs.docker.com/go/wsl2/

その場合はDockerDesktopの設定を変更しましょう
image.png

続いて「From 'Dcokerfile'」を選択
image.png

しばらくするとDocker上でVSCodeが再度立ち上がります。
VSCode上のTerminalを表示させるとちゃんと作成したプロジェクトフォルダとなっていることがわかります
image.png

終わりに

ほぼ初期状態から構築したので、ずいぶんと手がかかってしまった感があるけど、これであとは開発対象によってDockerfileをいじればいいだけになったかな。
docker-composeも試してみたけど、こちらは正直まだうまくいかず。。。どこかでリベンジを。

いや、なんかローカルでしこしこ開発している時代から随分と変わりましたね。
開発環境をきちんと定義して、ポータビリティも持たせられる。いい話だ。

一方で、今動かしているのがWindows上なのかDocker上のものなのか。。。とか、この状態で進めていくと混乱しないのかな?が少し心配。
でもまぁ、次第に慣れていくでしょう。

参考

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3