Webアプリケーション開発環境構築（Docker+VSCode）
自分用の勉強メモ
1.前提条件
- Windows 11 Pro
2.追加機能
- WSL2
- Docker Desktop
- VS Code
3.WSLを有効にする
WSLのインストール
PowerShellを管理者モードで起動する。
PowerShell
wsl --install
PCを再起動する。
ディストリビューションを一覧表示する。
PowerShell
wsl -l -v
接続する。
PowerShell
wsl
OSの情報を確認する。
Linux
$ cat /etc/os-release
アップデートを行う。（たまに手動で行う）
Linux
$ sudo apt update && sudo apt upgrade
参考サイト
- WSL2のインストールと分かりやすく解説【Windows10/11】
https://chigusa-web.com/blog/wsl2-win11/ - Install Linux on Windows with WSL
https://learn.microsoft.com/en-us/windows/wsl/install
4.Dockerをインストールする
「Use WSL 2 instead of Hyper-V (recommended)」にチェックを入れたままにする。
設定を変更する。
「Start Docker Desktop when you log in」のチェックを外す。（ログイン時に起動しないように）
起動する。
PowerShell
docker run -d -p 80:80 docker/getting-started
ブラウザでアクセスする。
http://localhost/
参考サイト
- 【Docker Desktop】Windowsにインストール（WSL2）
https://chigusa-web.com/blog/windows%E3%81%ABdocker%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6python%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89/
5.VS Codeをインストールする
以下を追加する。
- Japanese Language Pack for Visual Studio Code
- Prettier - Code formatter
- indent-rainbow
- Material Icon Theme
- zenkaku
- Dev Containers
参考＆引用：
- 【VS Code】インストール手順を解説 【Windows/M1 Mac対応】
https://chigusa-web.com/blog/vs-code-install/ - Download Visual Studio Code
https://code.visualstudio.com/download - 【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】
https://chigusa-web.com/blog/vs-code%e3%81%ae%e3%82%aa%e3%82%b9%e3%82%b9%e3%83%a1%e3%81%ae%e8%a8%ad%e5%ae%9a%e3%83%bb%e6%8b%a1%e5%bc%b5%e6%a9%9f%e8%83%bd%e3%83%bb%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88/ - 【VS Code】Dockerコンテナの環境でリモート開発【Win/Mac】
https://chigusa-web.com/blog/vs-code%e3%81%a7docker%e3%81%aepython%e7%92%b0%e5%a2%83%e3%81%a7%e3%83%aa%e3%83%a2%e3%83%bc%e3%83%88%e9%96%8b%e7%99%ba/ - 【図解】VScodeのRemote Container拡張機能とは？わかりやすく
https://penpen-dev.com/blog/vscode-remote-container-toha/