「VSCode 開発環境」とかで検索するとめちゃくちゃ出てくる内容だとは思うんですが、備忘録として残しておこうと思います。
画像を入れつつ書いたらそれなりなボリュームになってしまったので、準備編と実践編で分けています。
Remote Containerとは？
VSCodeの拡張機能で、Dockerコンテナを開発環境として利用できます。
VSCodeの拡張機能や設定も行うことが出来るため、チーム開発を行う際にとても便利な機能です。
Developing inside a Container
必要なもの
- Docker Desktop
- WSL(Ubuntu)
- Windowsターミナル(任意)
- VSCode
- Git
※PCに何もインストールされていない状態からの手順を記載しているので、既に完了している部分は適宜読み飛ばしてください。
Docker Desktop
インストーラのダウンロード
Docker Desktop for Mac and Windows | Docker
「Download for Windows」をクリックし、インストーラ(Docker Desktop Installer.exe)をダウンロード。
※2021/11/14時点では4.2.0
インストール
Docker Desktop Installer.exeをダブルクリックするとインストールが開始します。
どちらもチェックをつけたまま「OK」をクリック。
インストールが完了したら「Close」をクリック。
デスクトップのショートカットをクリックしてDocker Desktopを起動。
「I accept the terms」にチェックをつけて「Accept」をクリック。
↑の画面が表示されれば起動成功。
「WSL 2 installation is incomplete.」ダイアログが出た場合
https://aka.ms/wsl2kernelにアクセスして、「x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ」をクリックしてパッケージをダウンロードし、インストールしてください。
インストール完了後にDockerを再起動すれば、正常に起動できます。
WSL(Ubuntu)
Docker Desktopをインストールする際にdocker-desktopとdocker-desktop-dataというディストリビューションもついてきます。
これがあればRemote Containerを動かすことはできるのですが、dockerを動かすためのものなので、
開発環境用にUbuntuのインストールを行います。
インストール
PowerShellを起動して、以下のコマンドを入力します
PS C:\Users\(ユーザ名)> wsl --install -d Ubuntu
ダウンロード中: Ubuntu
インストール中: Ubuntu
Ubuntu はインストールされました。
Ubuntu を起動しています...
Ubuntuの設定
インストールが完了すると自動でUbuntuが起動します。ユーザ名とパスワードの入力が求められるので入力します。
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: (ユーザ名)
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
(省略)
Ubuntuで以下のコマンドを入力してパッケージの更新を行います。
途中ディスクに〇〇MB追加されるよ？と聞かれるので「Y」を入力。
sudo apt update && sudo apt upgrade
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Get:2 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [987 kB]
(省略)
After this operation, 209 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
(省略)
done.
WSLディストリビューションの変更
PowerShellでWSLディストリビューションの変更をします。
PS C:\Users\(ユーザ名)> wsl -s Ubuntu
PS C:\Users\(ユーザ名)> wsl -l -v
NAME STATE VERSION
* Ubuntu Running 2
docker-desktop Running 2
docker-desktop-data Running 2
Dockerの設定
アイコンメニューからDockerアイコンを右クリックして「Settings」をクリック。
Resources->WSL INTEGRATIONを選択し、UbuntuのトグルをONにした後「Apply＆Restart」をクリック。
Windowsターミナル
Ubuntu起動して操作してもよいのですが、何かと使い勝手が良いのでWindowsターミナルを入れておきます。
インストール
ここから インストールします。
※途中Microsoftアカウントのログインを求められますが、ログインしていなくてもインストールできます。
設定
Windowsターミナルを起動し、設定を開きます。
スタートアップの既定のプロファイルを「Ubuntu」に変更します。
Ubuntuのコマンドラインに「wsl.exe -d Ubuntu bash」開始ディレクトリに「//wsl$/Ubuntu/home/(Ubuntuのユーザ名)」を入力し、「保存」をクリック。
これで次回Windowsターミナルを開いた際はUbuntuのユーザホームで開きます。
ソースファイルをWindowsのCドライブ配下に置くと、WSLから見ると「/mnt/c/」配下となります。
この「/mnt/c/」配下のファイルはWindowsのファイルシステムからWSLのファイルシステムに変換かける処理が発生する為、処理がとても重くなります。
Windowsターミナルを入れなくてもよいですが、ソース管理や実行はUbuntuの「/mnt/c/」以外の場所で行うようにしてください。
VSCode
インストーラのダウンロード
ここから インストーラ(VSCodeUserSetup-x64-(バージョン).exe)をダウンロードします。
※11/14時点で1.62.2
インストール
インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。
拡張機能
最低以下の拡張機能は入れておきましょう。
Japanese Language Pack
Remote Development
今回入れたいRemote ContainerとUbuntuから「code (ソースフォルダ)」でVSCodeを起動できるWSL-Remoteが入ってます。
Git
インストーラのダウンロード
ここから インストーラ(Git-(バージョン)-64-bit.exe)をダウンロードします。
※11/14時点で2.33.1
インストール
インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。
初期設定
Windowsターミナルを起動して、以下のコマンドを入力します。
(名前)は任意のユーザー名、(メールアドレス)は任意のメールアドレスに置き換えてください。
git config --global user.name "(名前)"
git config --global user.email "(メールアドレス)"
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe"
これで準備は完了です。