WSL2＋VScode+Dockerの環境構築

これからRuby on Railsチュートリアルの学習内容を章ごとにアウトプットしていきます。

１周目は第１章～第８章まで、２周目は第１章～第１４章まで進め、一度アプリの完成版までは触っている状態となります。

３周目はブログへアウトプットしながら、理解している部分は飛ばし読みし、曖昧な部分は深堀りをする、といったスタイルでおこないます。

Ruby on Railsチュートリアルを進めるにあたって、まずは環境構築から始めることとなります。

１周目と２周目の時点でWSL2+VScodeの環境構築は終えているので、今回はDockerを導入しRailsチュートリアルを進められるような状態まで持っていきたいと思います。

一応後からまた同じような環境構築をしたいとなった際に思い出せるように、WSL2+VScodeの部分も少し触れておきます。

WSL2+VScode環境構築

PCスペック

• 本体：ASUS Zenbook UX330U
• OS：Windows　10 Home(64ビット)
• メモリ：8GB
• 容量：256GB(SSD)

※プログラミング学習を始める際は、Macbookを購入することが一般的かと思います。

WSL2+VScode構築の参考サイト

Ruby on Railsのための、WSL2+VScode環境の構築は、Railsチュートリアルの『コマンドライン編』で紹介されていた以下のサイトを参考にしました。

www.hanselman.com

WSL2+VScode環境構築のおおまかな流れ

1. WSL2の有効化
2. WindowsストアからUbuntuを入手
3. VScodeにリモート拡張パックをインストール
4. VScodeとWSL2を接続
5. Ruby on RailsをVScodeを操作し導入(Docker上に構築する場合は不要)

Ruby on Railsの導入は上記サイトの中にリンクが載っています。

私はUbuntu22.04を使用したため、こちらのリンク（ https://gorails.com/setup/ubuntu/22.04 )の手順で進めました。データベースはRuby on Railsチュートリアルで推奨されているPostgreSQLを選択。

この内容まで進めれば、とりあえずRuby on Railsチュートリアル自体は問題なく進めることが出来ました。

以下本題のDocker導入。

WSL2+VScode環境へDockerを導入

Dockerを導入しようと思った理由

コンテナ技術のDockerは学習必須事項という程度には知っておりましたが、どのタイミングから始めればいいか悩んでおりました。

ちょうどこれからRailsチュートリアルの3周目突入するというタイミングでしたので、より現場に近い形で学習を進めるべきと考え、Dockerまで入れた状態を作り今のうちから触っておこうと思った次第です。

WSL2+VScode+Dockerの相性

まず、やろうとしているWSL2+VScode+Dockerという環境はそもそも作れるのか？という疑問が最初はありましたので、探していたところかなり分かりやすく解説している動画がyoutubeにありました。第4章が特にこの内容に触れています。

www.youtube.com

要約すると

• Docker Desktop for WindowsはMoby VMという仮想マシンを起動する必要があり、このMoby VMの起動にはHyper-Vという仮想化ハイパーバイザーが必要。
• 但しHyper-VはWindows10 pro以上で無いと入っていない。
• WSL2はWindows10 Homeに対し、WSL2専用の軽量化Hyper-Vが構築されるため、WSL2があればDocker Desktop for Windowsが利用可能。
• 更にVScodeのリモート開発拡張機能は、開発に必要なコンテナを自動生成してくれる。

結論、WSL2+VScode+Dockerは相性抜群！とのことでした。

導入にあたって参考にしたサイト

Ruby on Railsチュートリアルの中ではローカル環境で進める方向けに、ヘルプの中に『Visual Studio Code と Docker を使って開発する』というそのままな内容が記載されていました。

railstutorial.jp

おそらく、WSL2+VScode環境までは構築しているので、後はこの内容に沿って進めればよいだけだと思います。

必要なもののインストールなど

1. まずはDocker Desktop for Windowをダウンロード。
   ダウンロード後の初期設定はMicrosoft公式の解説ページを参照。
   ちなみにここでもちゃんとWSLをインストールしてからDocker入れてねと記載してありました。
   

   WSL での Docker コンテナーの概要 | Microsoft Learn

2. Dockerがインストールされていることを確認。
   

   $ docker --version
   Docker version 20.10.24, build 297e128

3. この時点でvmmem(仮想マシン由来のプロセスらしい)のメモリ使用量が2GBを超えてファンがもの凄く頑張っていたので、以下を参考にメモリの使用上限を1GBに設定しておきました。設定後は比較的静かになってくれたと思います。
   

   【最新】Windows 11/10で「Vmmem」のメモリ使用量が高い時の対処法 - Driver Easy

4. VScodeの拡張機能「Remote Development」をインストール。Microsoftでは拡張機能「Docker」も入れておけと記載があったのでこの２つを入れておいた。

これで一通り必要なものはインストール完了。

GitHubからリポジトリをクローン

1. Railsチュートリアルで紹介されている、Rails7用の環境を使用。
   

   github.com

2.  自分のGitHubへリポジトリをコピーしておく。
3. VScode上ででgit cloneコマンドを入力し、ローカル環境へダウンロード。
4. VScodeから先ほどダウンロードしたコンテナを開く。
   接続出来るとVScodeの左下の接続アイコンが↓のようになりました。いけてそう。
   

   

   VScodeからコンテナへ接続

   
   
   
5. rubyやrailsがインストールされているかターミナルで確認。
   

   vscode ➜ ~/environment (master) $ ruby -v
   ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [x86_64-linux]
   vscode ➜ ~/environment (master) $ rails -v
   Rails 7.0.3
   vscode ➜ ~/environment (master) $ bundler -v
   Bundler version 2.3.26

6. 一応「localhost:3000」への接続を確認してみる。
   

   

   localhost:3000への接続確認

   
   
   
7. 無事、WSL2+VScode+Dockerの環境構築完了

これはすごい。

Dockerを学習している際のメリットの一つに、”誰でも同じ環境が構築出来る”ということが挙げられていたが、GitHubからイメージだけ持ってきて後は勝手にやってくれるので、これなら確かに誰でも同じ環境になる。

WSL2+VScodeの導入が出来た方にとっては、非常に簡単に環境を導入出来ると思う。

Dockerの扱い方に関しては今後、チュートリアル等を進めながら慣れていきたいと思います。

まとめ

• WSL2+VScodeへDocker環境を構築することは相性が良い。そもそもDocker Desktop for WindowsはWSL2導入が必須。
• 私のように低スペックPCを使用している人は、Docker導入にあたって、WSL2のメモリ制限をおこなった方がいいかもしれない。
• GitHubの公開リポジトリから、作成済みのコンテナイメージを持ってくるだけで、Docker+Ruby on Rails環境を簡単に構築出来る。