<h2 id="hf6d1b152c7">🐳Dockerとは</h2><p style="text-align: start"><strong><span class="highlight">仮想環境を簡単に作って動かせるツール</span></strong>。</p><p style="text-align: start">通常、Node.js や PHP、MySQL などを使いたいときは、PCに直接インストールする必要がある。<br>Docker を使えばそれらを「コンテナ」という軽量な仮想環境に閉じ込めて動かせる。（PCの中に小さな仮想マシンを作るイメージ。）</p><p style="text-align: start"><br>仮想環境をいくつでも作成できるため、アプリごとに異なる開発環境を用意することも可能。<br>チームでの開発にも強く、全員が同じ環境で作業することで<strong>環境差異によるバグ</strong>を減らすことができる。</p><p style="text-align: start">Dockerなら、あらかじめ構築しておいた開発環境を「<strong>image</strong>」という形で再利用・共有できる。</p><h2 id="ha86a965332">🧾 Docker image</h2><p>仮想環境の種類。<br>MySQL環境を作りたい場合はMySOL環境のDocker image、nginx環境を作りたい場合はnginx環境のDocker imageを入手する。</p><p>入手する場所は、Docker hubというサイトで配布されている。</p><p>取得済みのimagesは下記で確認が可能。</p><pre><code>docker images</code></pre><h2 id="hb92cedb211">🧾 コンテナ</h2><p>Imageをもとに実際に動かす実行環境。<br>オブジェクト指向でいうとDocker imageがクラスで、コンテナはインスタンス。<br>イメージからコンテナを作成することを「ビルドする」という。</p><p>Docker imageでどんな環境が必要なのかを決めて、コンテナで実際に呼び出して使うというイメージ。</p><h3 id="hc7ae10dae5"><u>🔧コンテナの作成と実行</u></h3><p><code>docker run</code>で<strong>単体</strong>のコンテナの作成と実行を行う。（このコマンドはdocker buildとdocker startが実行されている）</p><pre><code>docker run -d -p 8080:80 --name my-nginx-container my-nginx</code></pre><p></p><h2 id="h480160eaf7">🧾 Dockerfile </h2><p>Dockerfile は、自分の使いたい環境を定義する設計図。<br>例：Node.jsの開発環境を作りたいときの Dockerfile 。</p><pre><code class="language-yaml">FROM node:18-alpine     # ベースにするイメージ（Node.jsが入っている）
WORKDIR /app            # コンテナ内での作業ディレクトリ
COPY . .                # ローカルの全ファイルをコンテナにコピー
RUN npm install         # 依存関係をインストール
CMD [&quot;npm&quot;, &quot;run&quot;, &quot;dev&quot;] # デフォルトで実行するコマンド</code></pre><p>→ このDockerfileを <code>docker build</code> すれば、環境を自動構築できる。</p><p></p><h2 id="h9944b26a1b">📦 docker-compose </h2><p style="text-align: start">開発現場ではphpのコンテナ、Apachのコンテナ、mySqlのコンテナというように複数のコンテナを同時に立ち上げている。<br>複数のコンテナを<strong>まとめて起動・管理できるのが docker-compose</strong>。<br>その設定ファイルの「 docker-compose.yml」ファイルは「どのイメージを使って、どういう設定でコンテナを起動するか」を書く設定ファイル。<br><br>例：フロントエンド＋バックエンド（PHP）をまとめて起動する構成：</p><pre><code class="language-yaml">version: &apos;3&apos;
services:
　db: postgres
 web:
  build: .
  frontend:
    build: ./frontend
    ports:
      - &quot;3000:3000&quot;
    volumes:
      - ./frontend:/app
  backend:
    image: php:8.1-apache
    ports:
      - &quot;8080:80&quot;
    volumes:
      - ./backend:/var/www/html</code></pre><ul><li><code>services:</code> → コンテナの一覧</li><li><code>build:</code> → Dockerfile から作る</li><li><code>image:</code> → 既存の公式イメージを使う</li><li><code>volumes:</code> → ローカルとコンテナのファイルを同期</li><li><code>build: .</code>の場合は同じ階層にあるDockerfileを参考に環境を構築する</li></ul><p></p><h2 id="h7af74e5136">💻 よく使うコマンド</h2><p>覚えておくべきDockerの基本コマンド：</p><table><tbody><tr><th colspan="1" rowspan="1"><p>コマンド</p></th><th colspan="1" rowspan="1"><p>目的</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>docker -v</code></p></td><td colspan="1" rowspan="1"><p>Dockerのバージョン確認</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker-compose up -d</code></p></td><td colspan="1" rowspan="1"><p>コンテナの起動（バックグラウンド）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker-compose down</code></p></td><td colspan="1" rowspan="1"><p>コンテナを完全に終了・削除</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker-compose stop</code></p></td><td colspan="1" rowspan="1"><p>コンテナを一時停止</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker-compose exec サービス名 bash</code></p></td><td colspan="1" rowspan="1"><p>コンテナの中に入って作業する</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker ps</code></p></td><td colspan="1" rowspan="1"><p>起動中のコンテナ一覧を表示</p></td></tr></tbody></table><p></p><h3 id="h9c5764ab43">📁 ボリュームのマウント（bind mount）</h3><pre><code class="language-yaml">volumes:
  - ./frontend:/app</code></pre><p>こうしておくと、ローカルの frontend フォルダで保存した内容が、コンテナ内の /app に即時反映される。<br>→ ホットリロードも効く。Next.jsやViteなどのフロント開発では必須の設定。</p><p>（ホットリロード・・・コードを編集して保存すると、自動でブラウザやアプリに変更内容が反映される仕組みのこと。）</p><h2 style="text-align: start" id="hcf83e1357e"></h2><h1 style="text-align: start" id="h8602e45761">💻 フロントエンドでのDocker活用イメージ</h1><table><tbody><tr><th colspan="1" rowspan="1"><p>使い方</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p>Node.js環境を統一</p></td><td colspan="1" rowspan="1"><p>全員が同じNode.jsバージョンで開発できる</p></td></tr><tr><td colspan="1" rowspan="1"><p>ViteやNext.jsをコンテナで実行</p></td><td colspan="1" rowspan="1"><p><code>npm run dev</code> をコンテナ内で実行</p></td></tr><tr><td colspan="1" rowspan="1"><p>ホットリロード対応</p></td><td colspan="1" rowspan="1"><p>ローカル編集が即座に反映される</p></td></tr><tr><td colspan="1" rowspan="1"><p>API・DBとの連携</p></td><td colspan="1" rowspan="1"><p>バックエンドやDBもコンテナ化して一括管理</p></td></tr></tbody></table><p></p><h2 style="text-align: start" id="hcbf02d874a">⭐️簡単なプロジェクト開始手順</h2><h3 id="h958c68bc11">Dockerインストール</h3><ol><li>公式サイトからDockerをインストール<br>　→ <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer nofollow">https://www.docker.com/</a></li><li>インストール後、ターミナルでバージョン確認</li></ol><pre><code>docker -v docker-compose -v</code></pre><hr><h3 id="ha7e06bdcec">①ファイルの作成｜web/index.php</h3><ol><li>プロジェクト用のフォルダを作成。</li><li>その中に任意のフォルダを作成。今回は<code>web</code> で作成。</li><li><code>web</code>フォルダ内に<code>index.php</code> を作成。</li></ol><pre><code class="language-php">&lt;?php 
　phpinfo(); 
?&gt;</code></pre><hr><h3 id="h74cb6e4d76">② サーバー設定ファイルを用意</h3><p>プロジェクト内に、<code>docker-compose.yml</code> という拡張子がymlの設定ファイルを作成。<br>→ポート8080でアクセス可能になる。</p><hr><h3 id="hc273425918">③Dockerでサーバーを起動</h3><p><code>docker-compose up</code>は複数のコンテナをまとめて起動するコマンド。docker-compose.yml に定義された複数のサービス（Webサーバー、DBなど）を一括で起動。</p><pre><code>docker-compose up -d</code></pre><ul><li><code>-d</code> はバックグラウンドでの実行オプション</li><li>初回はイメージのダウンロードがあるため少し時間がかかる</li></ul><hr><h3 id="hbf6a22914c">④ブラウザで確認</h3><p style="text-align: start">ブラウザを開いて以下のURLにアクセス：</p><pre><code>http://localhost:8080</code></pre><p>→PHPの情報画面（phpinfo）が表示されればOK⭐️</p><hr><h3 id="h4f1176e8f5">⏸️ Dockerを停止する</h3><pre><code>docker-compose stop</code></pre><p><code>docker-compose stop -d</code>は全体とストップさせる。<br><code>docker stop my-nginx</code>で単体をストップさせる。</p><hr><h3 id="h09b2060d44">▶️Dockerを再開する</h3><pre><code>docker-compose up -d</code></pre><p><code>docker-compose up -d</code>は全体とスタートさせる。<br><code>docker up my-nginx</code>で単体をスタートさせる。</p><h3 id="hc1177aec47">💡すべての状態を確認する</h3><p>起動中のコンテナと停止中のコンテナ全ての状態を確認することができる。</p><pre><code>docker ps -a</code></pre><h3 id="ha445b5a575">🆑コンテナを削除する</h3><p>下記でコンテナを削除できる。削除後にまた必要となった時はビルドし直す必要がある。</p><pre><code>docker rm my-nginx</code></pre><p></p><p></p>

Dockerを使用して複数人でも開発しやすい環境を作る

開発環境構築

Docker｜Dockerとは？Dockerを使用して開発環境を構築する