Dev Containerを使った共通開発環境構築（docker, VSCode, extension）

# Dev Containerを使った共通開発環境構築について

人売りの派遣先でソフトウェア開発を行うことが多いのですが、大抵の場合その現場でPCを貸与されることは無く持ち込みのPC（とくにWindows）となります。そのときOSのバージョンが違ったりするとその現場の開発環境を構築することができなかったりで１週間過ごすなんていうのがざらです。あとどうやっても構築できないとか・・・
そして究極はソフトウエアのバージョンが微妙でダメだとか。

長くなりましたが、開発環境の再現性っていうの最近知ったのが Dev Containerを使った開発環境構築なのです。
メリットデメリットありますが個人的にはかなりよいと思っています。
　メリット
　　・ローカル環境の汚染度が低い
　　・再現性のある開発環境ができ開発者全員に同じ開発環境を提供できる
　　・gitによるリポジトリ開発が用意
　　・本番環境にデプロイしやすい

　デメリット
　　・マシンスペックがそこそこ必要となる（最低でも core-i7, ryzen7 あたり）
　　・メモリがそこそこ必要となる（最低でも ８GB以上欲しい）
　　・起動が遅い

最近個人的に思っているのは「開発環境をまるっとVMにしてもらう。ローカルからはRDPする。自分のローカルを汚さない」っていうのがベストプラクティスと思っています。

# Python & PostgreSQL 環境を構築してみます
色々と遊べる「[Python & PostgreSQL](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/python-3-postgres)」のコンテナで環境を構築してみます。
特に PostgreSQL は、後ほど コンテナ内からだけでなく外からも参照できるようにport解放するとかもありますので勉強になるのではないでしょうか？

# 事前の準備
Dev Containe を使った開発環境を構築するには事前の準備が必要です。下記の順番で準備を進めていきます。
　・BIOS での Intel VT-x および AMD-V Virtualization ハードウェア拡張の有効化
　・WSL2 のインストール（windowsのみ）
　・[Docker Desktop for Windows](https://www.docker.com/) のインストール（macの場合は、Docker Desktop for Mac）
　・[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) のインストール
　・VSCode の extension インストール

# WSL2 のインストール
Docker を動かすために WSL2 のインストールが必要です。windows10の場合、デフォルトでWSL2 で無いため本章の手順が必要です。（windows11が手元にないですが、きっと同じだと思う・・・）

あとWindows10 では下記の縛りがあります。
　・バージョン 22H 以上
　・64ビットOS
　・ともかく最新のWindows updateを適応（場所によってはできないとこもありますね）


## Windowsの機能の有効化
「コントロール パネループログラム」を開き "Windowsの機能の有効化または無効化" をクリックします。
そして「Linux用Windowsサブシステム（WSL）」と「仮想マシン プラットフォーム」をチェック（有効化）します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/5277443a-50c9-0019-9791-38d8edcff473.png)

再起動が必要と言われるので指示に従う。

## WSL2 のインストール
まずこの段階でWindows Updateもしくは、22Hなどの拡張機能をすべてアップデートしておきます。
調べると「WSL2用Linuxカーネルをインストールする」とありますが、下記のコマンドだけでインストールできます。
ちなみにDOS窓は、管理者権限にて実行してください。

```text
C:\Windows\system32> wsl --update
C:\Windows\system32> wsl --install
```

`install` コマンド時に好みのディストリビューションを指定することもできますが、docker との相性を考えると Ubuntu 一択なのでここでは何も指定しません＝Ubuntu。
また　`install` が終了すると、初期のユーザ/パスワードを求められてくるので入力します（typoしてしまったら、アンインストールがいいらしい下記リンクを参照）
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/63edfe14-5ef6-9c76-149a-4f573220a101.png)

　・[WSL2 Ubuntuの導入でLinux管理ユーザを登録し損ねた](https://zenn.dev/ikkik/articles/462feec65f53f8)

続いて、WSL2を既定のバージョンで利用できるようにします。

```text
C:\Windows\system32> wsl --set-default-version 2
```

ここまで終了すると、windowsメニューに以下３つが表示されます。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/b2aa68cd-ac3d-5a6c-bb16-07b83adc0048.png)

## [Docker Desktop for Windows のインストール
[Docker Desktop for Windows](https://www.docker.com/) のインストールを実施します。
特に注意することはありませんが、WSL2 が正しくインストールされていないとインストール時に怒られます。
インストールが正常に終わるとログアウトを求められるので従いましょう。あと必ず起動しましょう（１回目は、異様に時間がかかりますね）。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/46a3b553-2d60-3330-9922-c1ac0ccc5ccf.png)

## VSCode のインストール
[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) をダウンロードしてインストールします。
日本語になっていると嬉しい人なので 先に 日本語extension を入れておきましょう。 

## VSCode の extension インストール
記事をみると"[Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)" をインストールする。とありますがうまくインストールがいかなかったので、次の手順にしました。

左下の手裏剣？マークをクリック
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/92f0599f-edef-c94c-b31b-be53fb1a7b3a.png)

メニューに表示された「Dev Containers」をクリック
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/80c0e6c6-9db4-f0e0-566e-340549b11e48.png)

# 新規にDev Containerを使った開発環境を構築（Python & PostgreSQL）
調べた記事が古いのか手順とおりにしてもメニューの表示が微妙に異なりました。まず Docker Desktop を実行、そのあとにVSCode新規に Dev Containerを使った開発環境を構築してみます。コンテナは色々と種類がありますが今回は「Python & PostgreSQL」を選択してみます。

左下の手裏剣？マークをクリックすると、「新しい開発コンテナー...」メニューが表示されるのでクリックします。
![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/beb34b31-8208-5262-f8e6-de15c7cdaaee.png)

すると作成可能なコンテナ一覧が表示されるので「Python & PostgreSQL devcontainers」を選択します。
![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/2889ac6d-70d4-95fe-fef2-de4c389af64b.png)
![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/7d29e117-2000-bc14-f058-eaea57d36deb.png)

結構時間がかかるので「開発コンテナーの開始（ログの表示）」を押下してログを眺めてみましょう
![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/1a2615a7-0767-14bd-7344-f658f39371f7.png)

とりあえず、下記ができていれば成功ですｗ
![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/c6c2eaa7-677c-6564-22eb-23b65bffe393.png)

## PostgreSQL 動作確認
VSCodeの環境（ここでは /workspace/postgres を指す）内では、コンテナー間で PostgreSQL が接続できる（ハズ）ので、psqlによる対話型コマンドで実行してみます。
ちなみに今回作った「Python & PostgreSQL」コンテナーには、psql コマンドはインストールされていないので　`apt` にて別途インストールしました。
![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/832ac882-41e1-88fe-64fa-f04e4b068152.png)

確認できた

## PostgreSQL のポート開放
VSCodeの環境で PostgreSQL が接続できたことを確認できたが、こんどはwindowsホスト側から接続できるようにしてみます。いわゆるポート開放です。
でwindowsホストが汚れるといいつつもコマンドラインでSQLを操作するのは苦痛なので SQLクライアントソフト「A5-Mk2」をインストールします。そして コンテナー上の PostgreSQL ポートの開放をします。

VSCodeのターミナルウインドウにある「ポート」をクリックします。すると "Foward a Port" のボタンが表示されているので押下します。
![50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/8d733971-c206-f4db-d122-24bae23fb698.png)

「ポート番号またはアドレス」の青枠が表示されていることを確認します。
![51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/f66ed628-16f1-8946-f96d-ed170dbca75e.png)

この青枠に 5432 と入力するだけです。
![53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/5a59503d-b383-16fb-f87a-fc9d8f91a064.png)

この状態で [A5-Mk2](https://a5m2.mmatsubara.com/) から 接続してみます。接続できましたね。
![54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/7d8fd6b5-af64-84be-04be-39fd7b169a0c.png)

# Dev Containerを使った開発環境の再現性を試してみる
Windows10 を別途用意する。といってもOSは高いので・・・

マイクロソフトWindows10（11も）は、期限付き開発者向け評価用版があり今回の様に、動作検証するうえで　別途OSライセンスを購入しなくとも試せる仕組みがあります。（商用で使用する場合は、注意が必要）
なのでVirtualBoxやVMwareを使った仮想マシンのISOや、別途インストーラISOがありProxmoxなどにインストールすることが可能になっています。若干使いにくい点とすれば、デフォルトが英語かつローカルアカウントとなるのでその点だけ注意すれば、普通に遜色なく使用することができます。

で、再現性の本題。
　
Python & PostgreSQL 環境を作成したので、そのプロジェクトをそのまま使えるか試してみます。

ここで再現性ということですが、流石にワンプッシュで ”簡単に！！”ってな訳でなく基本的な環境そのものは
　事前にインストールが必要です。
　・WSL2 のインストール（windowsのみ）
　・[Docker Desktop for Windows](https://www.docker.com/) のインストール（macの場合は、Docker Desktop for Mac）
　・[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) のインストール
　・VSCode の extension インストール

## .devcontainer の場所
先に作成した「Python & PostgreSQL」コンテナーで作成された `.devcontainer` ディレクトリをコピーしておきます。

場所は変わるかもしれませんが、2023/9/1 時点で下記でした。違っているようでしたら、エクスプローラーで検索するといいです。

```text
\\wsl.localhost\docker-desktop-data\data\docker\volumes\postgres\_data\postgres\.devcontainer
```

ちなみに `wsl.localhost` は、WSL2 をインストールするとできるフォルダです。エクスプローラーからみると下記のような感じになっています。
![62.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/b3cc9117-b71c-b1ea-23f9-cb1fe707c6cc.png)

## 開発環境を再現したい Windows に .devcontainer をコピーする
タイトルのとおりです。  
開発環境を再現したい Windows に `.devcontainer` をコピーします。  
適当でいいのでディレクトリを作成しその直下に `.devcontainer` を配置しましょう。

`C:/postgres_python/.devcontainer`　　みたいな

そして VSCode を起動して（docker 起動しとく） 、上記のフォルダ`C:/postgres_python` を指定して開きます。

しばらくすると・・・下記が表示されるので `コンテナーで再度開く` ボタンを押下する。
![60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/224ce9b4-9eee-b975-0f02-ef693e37c771.png)

暫く時間がかかり、そのうち Python & PostgreSQL 環境が構築されます。

なんか新規ファイルを作成すると `C:/postgres_python` 直下に作成されるのが少しモヤっときますが（私が知らないだけですｗ）、まあよしとします。

## さらに共通開発環として
git使ったりなんやらすれば、共通開発環としてよさそうですね。

# 最後に
今回特に思ったのが WSL2 が進化していたことに今更ながら 便利だなと 思いました。Windows で Linux 使うのに Git bash だったりしてたのがこれでおさらばできるのかなと。あとやはりコンテナーですかね。Linuxでも１からOS入れてアプリの設定は Ansible,Chef 使ってもよしだけどコンテナーだとそんな設定もいらず。

Dev Container ですが、VSCode しか対応していないんですってね。うちの会社は、Eclipse 信者が多いので使ってくれるかな。。。ｗ

# 参考にさせて頂いたサイト様
・[VSCode Dev Containerを使った開発環境構築](https://blog.kinto-technologies.com/posts/2022-12-10-VSCodeDevContainer/)
・[Devcontainer(Remote Container) いいぞという話 ~開発環境を整える~](https://qiita.com/yoshii0110/items/c480e98cfe981e36dd56)
・[VSCode と devcontainer で始める開発環境構築](https://qiita.com/haruhikonyan/items/291e1e5413a827fc6d9a)
・[Windows 10でLinuxを使う(WSL2)](https://qiita.com/whim0321/items/ed76b490daaec152dc69)
・[WSL2のインストールを分かりやすく解説](https://chigusa-web.com/blog/wsl2-win11/)