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

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

***↓↓↓前編↓↓↓***

https://qiita.com/joyrswd/items/4e1dfb768883de7157ba

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

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

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

## 操作手順

### 1. VSCodeのセットアップ
1. VSCodeのインストール\
     [VSCodeの公式サイト](https://code.visualstudio.com/)からWindows版をダウンロードし、インストールします。
    <br>
2. 日本語拡張機能のインストール\
    VSCodeを起動し、左メニューの拡張機能のアイコンをクリックして”Japanese”と入力して「Japanese Language Pack for Visual Studio Code」拡張機能をインストールし、VSCodeを再起動します。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/80eb7d99-7a79-4240-a4c5-3831fa02fa1d.png" alt="スクリーンショット 2025-05-19 144559.png" width="50%">
    <br>
3. WSL拡張機能のインストール\
    VSCodeを起動し、左メニューの拡張機能のアイコンをクリックして”wsl”と入力して「WSL」拡張機能をインストールします。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/f15ebd50-236c-4506-8fe3-5ed7a2d6969e.png" alt="スクリーンショット 2025-05-19 144836.png" width="50%">

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

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

    ```bash
    git clone https://github.com/joyrswd/sample.git
    ls -la ./sample
    # sampleディレクトリが作成されていることを確認してください。
    ```
    <br>
2. クローンしたリポジトリをVSCodeで開きます。 

    ```bash
    code ./sample
    # VSCodeが起動し、クローンしたリポジトリが開きます。
    # 初回起動時は、Ubuntu内に必要なパッケージがインストールされるため少し時間がかかります。
    ```
    <br>
3. 「このフォルダー内のファイルの作成者を信頼しますか？」と聞かれたら、「はい、作成者を信頼します」を選択してください。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/83a7ea53-a1ce-48d7-9554-cea3aa2fa701.png" alt="スクリーンショット 2025-05-19 145023_2.png" width="50%">
:::note
[ワークスペースの保存について](#ワークスペースの保存について)
:::
### 3. docker-composeを使ったコンテナの起動
1. VSCodeのターミナルを開きます。\
   （メニューから「ターミナル」→「新しいターミナル」を選択）
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/0bf8ad84-87d4-4c85-91f9-9face695b198.png" alt="スクリーンショット 2025-05-19 173314.png" width="50%">
    <br>
2. 画面下のターミナル内で以下のコマンド入力し、Dockerコンテナを起動します。 

   ```bash
   docker-compose up -d
   # -dオプションは、コンテナをバックグラウンドで起動するためのものです。
   ```
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/acdd6227-1936-4660-a9b1-3a48edcd068e.png" alt="スクリーンショット 2025-05-19 145227.png" width="50%"><br>
    <br>
3. ブラウザでウェブサーバーが起動していることを確認します。\
   （ http://localhost:8080/ にアクセスしてください）
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/6643ecf5-9f6c-4012-99e2-cb662456f3e0.png" alt="スクリーンショット 2025-05-19 145308.png" width="50%">
:::note
[docker-composeコマンドについて](#docker-composeコマンドについて)
:::

### 4. コードの編集と反映の確認
1. VSCodeの左メニューのエクスプローラーアイコンをクリックして、`html>index.html`を開きます。 
    <br>   
2. index.htmlを開いたら、任意の箇所を編集して保存します。\
   （例：`<h1>Hello World</h1>`の下に`<p>こんにちは</p>`を追加）
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/4cff48f2-dbae-40b3-b229-e1dd30e2334f.png" alt="スクリーンショット 2025-05-19 145344.png" width="50%"> 
    <br>
3. ブラウザをリロードし、変更が反映されていることを確認します。\
   （ http://localhost:8080/ にアクセスしてください）
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/e971ccdc-0725-4f15-8573-b84f13e8b43c.png" alt="スクリーンショット 2025-05-19 145400.png" width="50%">

## 備考

- #### ワークスペースの保存について
  VSCodeで開いたフォルダは、以下の手順でワークスペースとして保存することができます。
  1. メニューから「ファイル」→「名前を付けてワークスペースを保存」を選択
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/cb03ccd5-cc6d-4b41-b6bb-9fc26c338143.png" alt="スクリーンショット 2025-05-19 152033.png" width="25%"><br>

  2. 画面中央に「ワークスペースを保存」ダイアログが表示されたら、「ローカルを表示します。」を選択
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/441cc490-3495-4769-9aa3-efc3977b47b7.png" alt="スクリーンショット 2025-05-19 152104.png" width="25%"><br>

  3. Windowsのエクスプローラーが開くので、任意の場所に名前を付けて保存します。\
  （例：ドキュメントフォルダ内に「sample.code-workspace」として保存）
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3682125/65e716df-5f06-44d6-8632-30048d70dd92.png" alt="スクリーンショット 2025-05-19 152129.png" width="25%"><br>

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

- #### docker-composeコマンドについて
    以下のコマンドを実行することで、Dockerコンテナを停止することができます。
    ```bash
    docker-compose down
    # 上記コマンド実行後は、http://localhost:8080/ にアクセスできなくなります。
    # 再度起動する場合は、docker-compose up -dコマンドを実行してください。
    ```
    サンプルリポジトリではコンテナが自動起動する設定をしていないため、\
    PCの再起動などした場合は、`docker-compose up -d`コマンドを実行する必要があります。


## 参考

サンプルリポジトリ

https://github.com/joyrswd/sample


[^VSCode]:**VSCode（Visual Studio Code）** とは、Microsoftが開発したオープンソースのコードエディタで、軽量でありながら強力な機能を備えています。\
拡張機能を追加することで、さまざまなプログラミング言語やフレームワークに対応し、デバッグやGitの統合などの機能も提供しています。<br>
[^docker-compose]:**docker-compose**とは、Dockerを使用した複数のコンテナを一括で管理するためのツールです。\
docker-compose.ymlファイルを使用して、アプリケーションのサービス、ネットワーク、ボリュームなどを定義し、簡単なコマンドでDockerコンテナの作成、起動、停止を操作できます。<br>