最近のvscodeはリモートに接続していろいろできるらしいと聞いてお試ししてみる

wsl2 インストール

この記事の記述に従ってwsl2をインストール
https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

最後に適当なディストリインストールする。この記事では Ubuntu 20.04を使用する。

docker for windows インストール

この記事の記述に従って docker for windows をインストールする
https://docs.docker.jp/docker-for-windows/install.html

wsl2 も docker for windows 基本的にはデフォルトのオプションでOK

wsl2 設定

一部のコンテナではメモリが足らないと起動しなかったり起動後動作がおかしかったりするのでその設定。

%UserProfile% に .wslconfig ファイルを作成する。

[wsl2]
memory=4GB
swap=0

vscode でリモートのディレクトリを開く

wsl2マシンからvscodeを開く。

ubuntu コンソールを開き以下のコマンドを実行する
(ホスト名、ユーザー名はubuntu初回実行時に決定されている)

okada@BETA:~$ mkdir sample
okada@BETA:~$ cd sample
okada@BETA:~/sample$ code .
okada@BETA:~/sample$

これでリモートwslに接続したvscode が開く。

container 設定

お試し用の nginx を実行してみる

ディレクトリ構成

単純に index.html を表示するだけの構成。

sample/
    nginx/
        config/
            default.conf
        public/
            index.html
    docker-compose.yml

docker-config.ymlを書く

version: '3'

services:

  web:
    image: nginx:latest 
    ports:
        - "80:80"
    volumes:
        - ./nginx/public:/var/www/html
        - ./nginx/config/default.conf:/etc/nginx/conf.d/default.conf

config と表示用htmlを準備する。

container 設定を生成する

ネットに転がってる解説では ".devcontainer を作って config書きましょう" が主流だけど vscode で作れる。

vscode と wsl を接続した時点で、vscodeウインドウの左下に "wslでの編集" リンクがあるのでクリックすると関連メニューが表示される。

メニューから "Add Development Container Configuration File..." > "From docker-compose.yml" を選択すると関連ファイルができる。

この時「devcontainerがあるけど実行する？」みたいなメッセージが表示されるけどいったん無視

dev container 内にできた docker-compose.ymlを変更する

nginx はデーモンモードで起動する必要があるけど、生成されたファイルだと勝手に終わるとか待ちすぎるとかでサイトにつながらない。
なので生成された docker-compose.yml を調整する

.devcontainer/docker-compose.yml を編集。

 # Overrides default command so things don't shut down after the process ends.
 # この行を削除する
 #  command: /bin/sh -c "while sleep 1000; do :; done"

コンテナ実行

wsl メニューから "Reopen in Container" を選択する。

確認

http://localhost/index.html をブラウザで表示する

その他の記述

ファイル共有関連

windows ファイルシステムでcontainer 作ると "共有ファイルは遅いけどいいの？"みたいなメッセージが表示されるけど、このやり方だとそういうのはない。
windowsから実行するよりは wsl経由で実行したほうが良いのかも。

windows から関連ファイルを直接参照する

wsl がスペシャルなファイルシステムでマウントされているようで、 c:... ではなく \\wsl$\Ubuntu-20.04\home\okada\sample みたいな場所にファイルが存在する。vscode でなくほかのエディタ等を使いたいならそっちから触ることになるのかも。