12時間悩んだ末にDocker + VS Code なWeb開発環境が出来たよ＾～

んほ＾～

※Windowsを対象にしてるけど、デスクトップ環境でコンテナ動けばどうでもいい。

知っ得情報は後のほうに書いてあるから、実施の段を読み飛ばしてもいい。

◆要確認事項：2020/9/6

手を出すのが、ちょっとはやいかも。あんま悩んでもしょうがねぇから、つみですと思ったら諦めて時が経つのを待てばいいと思う。

どっから話せばいいのかわからんが。すべては時間が解決するものであったりする。

▼Windowのバージョン

Windows Homeはまだ無理かも。なんやかんや試したけど動かんかった。Docker Desktopが動かなくて謎。いやでも18462以上であればHomeでイケるって情報ある。謎。

Windowsのバージョンが20H1以上であるか否かってのもある。ただ、20H1はまだ不具合残ってるから自己責任になるな。俺は別に問題なかったけど。

▼Docker Desktop

Windowsの20H1更新を受け入れればstable版でも大丈夫。

20H1にせずにDocker DesktopでWSL2の恩恵にあやかるには、2020年9月現在、Docker DesktopのEdge版（つまりPreview版）を使わないといけない。

▼VS Code

Insider版（Preview版）がある。別にInsider版じゃなくていいけど、UIがちょっと見やすかったりもする。

▼動確取れた組み合わせ

動確とれたのはWindows Proの20H1 + Docker Desktop安定版。

20H1じゃないWindows ProとDocker Desktop Edge版ではgitリポジトリが認識されないっていう事象が発生した。ホストマシンでgit操作しなきゃならんっていうめんどくささが残る。たぶんDocker Desktopが悪い。

→https://stackoverflow.com/questions/60495428/is-there-a-way-to-get-git-to-work-properly-from-within-a-dev-container-using-vs

以上。

◆結論

https://github.com/Connect-a/devcontainer_sample_pnpm

ホストマシンの環境が汚れないという特色を活かし、yarnじゃなくてpnpmを使ってみるやつ。「pnpmつかわねぇわ。余計なことすんな」と思ったんなら読み進めて全てを理解しやがれ。

PHPとかRubyを使ってるんなら、それもまた読み進めて何をやっているのかを理解せねばなるまいて。

◆何が可能であるか

何の遺恨もなく極めて美しい感じに VS Code + Docker なWeb開発環境をでっち上げることができますです。VS Codeのオススメ拡張機能ですらコンテナに無料で隔離できちまうんだ！

既存のソースもほぼ汚さないどころか、寧ろ設定ファイルとか綺麗になるかもな。

実は一個だけ遺恨あるっちゃあるけど、知ってたら問題ない。

▼利点

• いまふう。
• Docker使えれば、環境構築のWikiなど書かずともよい。
• なんかDockerの勉強になる。
• 汚れた環境を簡単にポイできるし、簡単に生やし直せる。
• Linuxだし、Linuxなんだけど、別に意識しなくてもいい。

◆事前準備

Docker Desktop for WindowsとWSL2を準備する。とはいえ、MacでもDocker Desktopあれば別に構わん。

20H1がバグだらけだったもんでWSL2がバックポートされて過去バージョンでも使えるようになった。やったね。

1. WSL有効化。
   ⇒Winキー押して「機能」って入力して「Windows の機能の有効化または無効化」を開く。
   ⇒「Linux 用 Windows サブシステム」とか、「Windows Subsystemなんちゃら」ってやつを探してチェック入れる。
   ⇒OKして再起動。
2. WSL有効化後に、Windowsの更新を確認しとく。
   Winキー押して「windows」とか入力して、「更新プログラムの確認」する。
3. Linuxカーネルを取ってくる。そしてインストールする。
   https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi
   ※ARM民は↓
   https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi
   ARMかどうかの判断つかないやつは、Winキー押して「sys」って入力して「システム情報」を開いて「システムの種類」を確認。
4. （WSL2がちゃんと動いているかどうか確認してもいい。むしろしたほうがいい。Windowsキー押して「cmd」って入力してコマンド開いたら、「wsl」って入力しろ。）
5. Docker Desktopをインストール
   https://www.docker.com/products/docker-desktop
   ⇒「WSL2なんちゃら」って言われたらOKしておく。

※Docker Desktopの設定をいじるには、タスクバーのアイコンを右クリックして「Settings」を選択する。

※「WSL 2 requires an update to～」とか言われたらここみる。

※WSL2とのつなぎがうまく行かないときは、Docker DesktopをHyper-Vで起動しなきゃいけないかもしれない。というのも、Docker DesktopのSettingをいじるにはDocker Desktopが起動されてないといけないんですね。起動に失敗するとSettingがいじれない。欠陥だと思う。
Hyper-VでDocker Deskopを起動するためには、「Windows の機能の有効化または無効化」でHyper-Vを有効化しなければならん。

◆いれこみ

前提として、既にVS CodeでVueとかReactの開発しているものとする。そうでもないかなと思うならプロジェクト作れ。「vue-cli プロジェクト 作成」とかでググればええじゃないか。

あと、複数人で開発しているものとする。

1. VS Codeで開発しているフォルダトップに、以下の「.dockercontainer」フォルダをぶちこむ。詳しいことは後述。
   ⇒https://github.com/Connect-a/devcontainer_sample_pnpm

Remote-Containers拡張機能をVS Codeに導入する。下の手順を参考に「推奨拡張機能」として管理してもいい。

1. ここを参考に、.vscode/extensions.jsonを書く。
2. 「.gitignore」から「.vscode」の記述取り除く。もとから無いならどうでもいい。

⇒extensions.jsonについての詳しいこと。

◆起動

1. VS Codeを開いて「Ctrl + Shift + P」からの「reopen」とか入力。
2. 「Remote-Containers: Reopen in Container」を選択。
3. 待つ。（初回はなんやかんや時間かかる）
4. 動く。
5. 嬉しい。

※左のツールバーに出現しているであろうモニターっぽいマークから「Reopen Folder in Container」ボタンをクリックしても同じことが起こる。

あと、VS Codeのプレビュー版である「VS Code Insider」のほうが機能が充実している。

◆全体像

お察しの通り、「.devcontainer」フォルダが鍵を握っている。VS Codeは.devcontainerというフォルダやらその中のdevcontainer.jsonを自動検出する。だから「Reopen～」ってサジェスト出来ている。

▼Dockerfile

環境の元ネタ。 今回はMicrosoftが用意したNode.jsが既に入っているイメージを使った。けど、不要なTypeScriptも入ってるから別のイメージ使うなりしてもいいでしょうね。そのへんはググれ。

▼devcontainer.json

設定いろいろ書くことができるッス。ウッス。Dockerfileを参照したりしてんね。

extensionsというプロパティにVS Code拡張機能のIDを入れていけば、コンテナの開発環境に拡張機能を事前インストールしておくことが可能。俺が適当に書いただけなので好きに書き換えればいい。空配列にしたっていい。あと、やってみりゃ分かるんだけども、日本語化の拡張機能と「Bracket Pair Colorizer 2」はローカルにインストールしてねって表示が出てる。ホストマシンに入れないといかんのだと思う。

例えばVueで開発してないんであれば「octref.vetur」なんて一切不要ですよね。

postCreateCommandのプロパティには、初回起動時に動くコマンドを書き連ねることが出来ます。お前への嫌がらせとしてyarnのアンインストールを叩いている。「apt-get -y remove yarn」だな。それを取り除いたりしろ。

「git config core.ignorecase false」ってコマンドも、意味を理解してお好みな感じにしろ。

その他「devcontainer.json」で何が設定可能であるかはこのページをみろ。英語だけど。

◆解決済み課題についての解説

ごちゃごちゃ書いている色々について解説させて頂く。

▼pnpm の installこけた人へ

このファイルを参考にして、トップレベルに「.npmrc」ファイルを置けばいいかも。

▼Dockerfile

・ENV（文字コード設定）

消してもいいけど、lsコマンドとかでUTFな文字が化けたりします。

ja-JPとかインストールされて無かった。この世には存在してるし入れることもできるんだけど、べつにen_USでも問題ねぇと思うよ。

▼devcontainer.json

・mounts

重要。コンテナと、コンテナをホストしているOSが居ますよね。今回で言うところのWindowsがホスト。

コンテナとホストではソースファイルを9Pってプロトコルで共有しております。でも、node_modulesとかdistとかってホストマシンに共有する必要なくね？コンテナの中にあるだけでよくね？

その辺の解決がmountsにかかれています。

あと、パッケージマネージャー（今回で言えばpnpm）の生み出したキャッシュもグローバルに持っておきたいよね。コンテナ消したらキャッシュも消えたってなったら悲しみ。パッケージのダウンロードにまた時間がかかっちゃう。

mountが何かっていうのは各自詳しく確認していただきたいのだが、つまりvolumeっていう記憶域が用意される。ホストマシンで「docker volume ls」ってコマンド打てば確認できます。

初めてのdockerであれば、全削除しても問題なかろう。「docker volume prune」でポイだ。

っていうか、捨てて困るものはそもそも仮想環境で扱わないようにしなよ。何も考えずに捨てられるもの、言い換えると、コマンド叩くだけですぐに再現可能なものだけをコンテナでアレしろ。さもないと「これ削除していいんだっけ」ってなるでしょ。管理不能になるぜ。

・containerEnv.CHOKIDAR_USEPOLLING

HMRのため。コードを書き換えたら自動でビルドされるやつ。

・postCreateCommand

「git config core.autocrlf input」はあったほうがいいけど、意味を理解しとくのも大切。

ここでの説明はしない。

Resolving Git line ending issues in containers

◆開発環境開発のコツ

▼コンテナ操作

VS Codeの左のツールバーのモニターっぽいマークで色々操作できるから、遊んでみそ。環境を弄って調整したいならコンテナ右クリからのリビルドが便利。

困ったらremoveだ。消せ。お前は今！壊れてもいい環境を手に入れたのだ！うおおおおおおおおおおおおおおおおおおおおおおおおおおお！！！！

▼変な動きするとき

gitの設定を疑う。

Windows で git から clone したファイルをもとに～

あと、コンテナをビルドしている最中に右下に出てくる通知リンクをクリックすると、ビルドのメッセージを確認することができる。エラーがあってもそれ通知してくれなかったりするから要確認。

▼Dockerの掃除

Dockerがどれくらい容量使ってるのかは以下のコマンドで確認。叩くのはホストマシンでな。

docker system df

お掃除したいときは以下のコマンド。全部消える。

docker builder prune
docker system prune
docker volume prune

volumeは個別にpruneするんでもいいかも。

◆zshって知ってる？

…知らない。うむ。そうか。知らないなら以下をやっとけ。gitやら何やらのコマンド操作がクソほど便利になる。っていうか、デフォルトbashはまずもって視認性が悪すぎ。

devcontainer.jsonのpostCreateCommandに以下のコマンドを追加。&&で最後尾につなげ。

sed -i -e 's/bash/zsh/g' /root/.vscode-server-insiders/data/Machine/settings.json

ただ、この方法は今後いらなくなるかも知れない。というのも、書き換え対象であるところの意味不明なsettings.jsonが悪さしてるだけなんだよね。このファイルいらねぇ。デフォルトをzshにしようとして散々悩んだ挙げ句この意味不明なデフォルトゴミ既定値を発見した。

ENV SHELLで上書きできなくてずっと悩んでた。ローカルでsettings.jsonのterminal.integrated.shell.linuxに指定してもダメだし「chsh -s /bin/zsh」叩いてもダメだし。マジでビルゲイツいい加減にしろよ。

で、いま使ってるイメージはoh-my-zshっていう時代遅れっぽいものを使っているから、Preztoっていう良い感じのを使いたいときはDockerfileに以下を追記しろ。

RUN git clone --recursive \
        https://github.com/sorin-ionescu/prezto.git \
        $HOME/.zprezto
RUN ln -s -f $HOME/.zprezto/runcoms/zlogin    $HOME/.zlogin \
    && ln -s -f $HOME/.zprezto/runcoms/zlogout   $HOME/.zlogout \
    && ln -s -f $HOME/.zprezto/runcoms/zpreztorc $HOME/.zpreztorc \
    && ln -s -f $HOME/.zprezto/runcoms/zprofile  $HOME/.zprofile \
    && ln -s -f $HOME/.zprezto/runcoms/zshenv    $HOME/.zshenv \
    && ln -s -f $HOME/.zprezto/runcoms/zshrc     $HOME/.zshrc
ENV SHELL /bin/zsh

ENV SHELLは要らないけど、入れといてもいいだろ。

◆結論

そんな感じ。なんか動かねぇとか補足とかパソコン蛾物故割れたとかあったらコメントしろ。