Windows WSL Docker+Git 開発環境構築（Docker Desktop不使用）後編

はじめに

この記事では、Windows 11 環境において、WSL（Windows Subsystem for Linux） を活用し、Docker および Git を使った開発環境を構築する手順を開発者向けに解説します。

↓↓↓前編↓↓↓

後編では、VSCode（Visual Studio Code） ¹ のセットアップを行い、Git でサンプルリポジトリのクローン、docker-compose ² でDockerコンテナを起動したのちにコード編集を実施して変更が反映されるまでを説明します。

この記事を通じて、docker-composeの基本的な操作方法やファイル構造、Docker起動後の挙動を確認いただけたら嬉しいです。

目次

• はじめに
• 操作手順
  • 1. VSCodeのセットアップ
  • 2. サンプルリポジトリのクローンとVSCodeの起動
  • 3. docker-composeを使ったコンテナの起動
  • 4. コードの編集と反映の確認
• 備考
  • ワークスペースの保存について
  • docker-composeコマンドについて
• 参考

操作手順

1. VSCodeのセットアップ

1. VSCodeのインストール
   VSCodeの公式サイトからWindows版をダウンロードし、インストールします。
   
   
2. 日本語拡張機能のインストール
   VSCodeを起動し、左メニューの拡張機能のアイコンをクリックして”Japanese”と入力して「Japanese Language Pack for Visual Studio Code」拡張機能をインストールし、VSCodeを再起動します。
   
   
   
3. WSL拡張機能のインストール
   VSCodeを起動し、左メニューの拡張機能のアイコンをクリックして”wsl”と入力して「WSL」拡張機能をインストールします。
   

2. サンプルリポジトリのクローンとVSCodeの起動

1. Ubuntuを起動し、GitHubにある筆者が作成したサンプルリポジトリをクローンします。
   以下のコマンドを実行してください。

   git clone https://github.com/joyrswd/sample.git
   ls -la ./sample
   # sampleディレクトリが作成されていることを確認してください。
   

   
   

2. クローンしたリポジトリをVSCodeで開きます。

   code ./sample
   # VSCodeが起動し、クローンしたリポジトリが開きます。
   # 初回起動時は、Ubuntu内に必要なパッケージがインストールされるため少し時間がかかります。
   

   
   

3. 「このフォルダー内のファイルの作成者を信頼しますか？」と聞かれたら、「はい、作成者を信頼します」を選択してください。
   

ワークスペースの保存について

3. docker-composeを使ったコンテナの起動

1. VSCodeのターミナルを開きます。
   （メニューから「ターミナル」→「新しいターミナル」を選択）
   
   
   

2. 画面下のターミナル内で以下のコマンド入力し、Dockerコンテナを起動します。

   docker-compose up -d
   # -dオプションは、コンテナをバックグラウンドで起動するためのものです。
   

   
   
   
   

3. ブラウザでウェブサーバーが起動していることを確認します。
   （ http://localhost:8080/ にアクセスしてください）
   

docker-composeコマンドについて

4. コードの編集と反映の確認

1. VSCodeの左メニューのエクスプローラーアイコンをクリックして、html>index.htmlを開きます。
   
   
2. index.htmlを開いたら、任意の箇所を編集して保存します。
   （例：<h1>Hello World</h1>の下に<p>こんにちは</p>を追加）
   
   
   
3. ブラウザをリロードし、変更が反映されていることを確認します。
   （ http://localhost:8080/ にアクセスしてください）
   

備考

• ワークスペースの保存について

  VSCodeで開いたフォルダは、以下の手順でワークスペースとして保存することができます。

  1. メニューから「ファイル」→「名前を付けてワークスペースを保存」を選択
     
     

  2. 画面中央に「ワークスペースを保存」ダイアログが表示されたら、「ローカルを表示します。」を選択
     
     

  3. Windowsのエクスプローラーが開くので、任意の場所に名前を付けて保存します。
     （例：ドキュメントフォルダ内に「sample.code-workspace」として保存）
     
     

  4. 次回からは保存したワークスペースファイルをダブルクリックすることで、VSCodeが起動し保存したフォルダが開きます。

• docker-composeコマンドについて

  以下のコマンドを実行することで、Dockerコンテナを停止することができます。

  docker-compose down
  # 上記コマンド実行後は、http://localhost:8080/ にアクセスできなくなります。
  # 再度起動する場合は、docker-compose up -dコマンドを実行してください。
  

  サンプルリポジトリではコンテナが自動起動する設定をしていないため、
  PCの再起動などした場合は、docker-compose up -dコマンドを実行する必要があります。

参考

サンプルリポジトリ

1. VSCode（Visual Studio Code） とは、Microsoftが開発したオープンソースのコードエディタで、軽量でありながら強力な機能を備えています。
   拡張機能を追加することで、さまざまなプログラミング言語やフレームワークに対応し、デバッグやGitの統合などの機能も提供しています。
   ↩

2. docker-composeとは、Dockerを使用した複数のコンテナを一括で管理するためのツールです。
   docker-compose.ymlファイルを使用して、アプリケーションのサービス、ネットワーク、ボリュームなどを定義し、簡単なコマンドでDockerコンテナの作成、起動、停止を操作できます。
   ↩