<h2 id="hf6d1b152c7">🐳Dockerとは</h2><p>Dockerとは、アプリケーションの開発やその実行を行うためのオープンプラットフォーム（土台）を提供するツールです。</p><p>これまでは、Node.jsがインストールされている私のPC自体が土台となって、ReactやNext.jsでアプリ開発を行っていました。</p><p>一人で個人開発をしているには、特に不便さは感じませんでした。</p><p>しかし、チーム開発や他の人が作ったアプリを開発するとなった時、この土台の<strong>環境差異</strong>が生まれてしまう可能性があります。</p><p>アプリAのNode.jsバージョンは18。アプリBはNode.jsバージョン24。AさんのPCにはNode.jsバージョン16…など。<br>自分のPCでは動くのに、他の人のPCでは動かないなんていうことも起こり得るそうです。</p><p>そんな問題を防ぐときに、Dockerの出番です。</p><p>Dockerを使えばそれらのアプリケーションが動くのに必要な環境を、それぞれ仮想環境に閉じ込めることができます。</p><p>PC内部の汚染を防ぎ、アプリごとに異なる開発環境を用意することも可能となります。<br>チーム全員が同じ環境で作業し、開発から本番まで同じ環境を使うため、環境差異によるトラブルを大幅に減らせる優れもののようです✨</p><h3 id="hf02b67ccc8">今回の目標</h3><p>Dockerについて調べれば調べるほど混乱してしまったため、まずは「既存のNext.jsのアプリケーションをDockerで動かす」を目標にします。</p><p>覚えたい用語は「Dockerfile」「Container」「image」の3つにしぼりました。</p><hr><h2 id="h86e0b5125c"> Dockerfile </h2><p>Dockerfile は、自分の使いたい環境を定義する設計図。<br>今回はNext.jsなので、Node.jsの開発環境を設定します。</p><h2 id="haaa74bfc7f">Docker image</h2><p>DockerFileをbuildをすると、DockerFileで設定された環境「image」がDocker上で作られる。</p><p>このイメージから、実際に動く「コンテナ」を起動する。</p><h2 id="h06e8ee7688">コンテナ</h2><p>「image」をもとに作られる、アプリケーションを実際に動かす実行環境。</p><h2 id="he526c848ff">Dockerでの環境構築のイメージ</h2><pre><code>Dockerfile（イメージを作る設計書ファイル）

↓

docker build（イメージを作るコマンド）

↓

compose.yaml（イメージから、コンテナをどう起動するか決める設定書ファイル）

↓

docker compose up（コンテナを起動するコマンド）</code></pre><hr><h2 id="h26a0edfa5b">実際に動かしてみる</h2><h3 id="h07238f6dcb">①Dockerfileを作成する</h3><p>アプリケーションのディレクトリ直下に作成し、Next.jsを動かす環境を設定する。</p><pre><code class="language-yaml">/Dockerfile

#1.Node.js 24入りのイメージを使うという宣言
FROM node:24
#2.Dockerコンテナの中の作業ディレクトリを/appに指定
WORKDIR /app
#3.依存関係を作業コンテナへコピーする(./は現在のディレクトリ)
COPY package.json package-lock.json ./
#4.依存関係をインストールを実行する(npm installやpnpm install)
RUN npm ci
#5.アプリのソースコードをコンテナへコピー
COPY . .
#6.コンテナが起動したら下記コマンドを実行するように指示
CMD [&quot;npm&quot;, &quot;run&quot;, &quot;dev&quot;] </code></pre><h3 id="h048e4b60cf">②docker-compose.yamlを作成</h3><p style="text-align: start">コンテナを<strong>起動・管理できるのが docker-compose.yaml</strong>。<br>「どのイメージを使って、どういう設定でコンテナを起動するか」を書く設定ファイル。</p><pre><code class="language-yaml">#Dockerをどう起動するか設定するファイル
#Composeで起動するサービス一覧を定義する。frontend:やbackend:やdb:のようになる
services:
  #サービス名
  app:
    #コンテナを作るためのイメージはどうやって作るかを指定する
    build:
      #. は現在のディレクトリ。このプロジェクトルートをDockerへ渡す。この指定によって、Dockerfile内のCOPY . .が、ホスト側 calorieach/→コンテナ /appとしてコピーできる
      context: .
      #PCとコンテナの通信設定。ホスト側 : コンテナ側
    ports:
      - &apos;3000:3000&apos;
      #環境変数を渡す設定
    env_file:
      - .env</code></pre><h3 id="h545e03b7c1">③build コマンド実行</h3><p>下記コマンドを実行し、imageを構築する。</p><pre><code>docker compose build</code></pre><p>ここでターミナル上でビルドが始まるのですが、終わるまでに150秒くらい待ちました。</p><p>毎回こんなに待つの…？と不安でしたが、次回はキャッシュが効くのでもっと早くなるとのこと。</p><h3 id="h4e9fb51983">④コンテナ起動をする</h3><p>次はいよいよコンテナを起動します。</p><p>下記コマンドを実行。</p><pre><code>docker compose up</code></pre><p>・<br>・<br>・</p><p>下記が表示された✅</p><pre><code>app-1  | ✓ Ready in 1292ms</code></pre><p>これでコンテナの中でNext.jsが正常に起動した状態です🎉</p><hr><h2 id="hf5ea08fbda">💻 操作コマンド</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</code><br><code>docker compose up -d</code></p></td><td colspan="1" rowspan="1"><p>コンテナの起動<br>コンテナの起動（detached mode）</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 down</code></p></td><td colspan="1" rowspan="1"><p>コンテナを完全に終了・削除</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>docker rm app</code></p></td><td colspan="1" rowspan="1"><p>コンテナを指定して削除</p></td></tr></tbody></table><hr><h2 id="hf0468c4be6">Volumesを設定</h2><p>以前はNext.jsを開発環境でコードを編集して保存すると、すぐに反映される<span class="highlight">「ホットリロード」</span>が効いていた。</p><p>しかし今のままだとホットリロードが効いていないので、コードを書き換えても画面上で確認ができず不便です。<br>それを解決するのが<code>volumes</code>の設定。</p><h3 id="hba33095e55">📁 volumes</h3><p><code>docker-compose.yaml</code><strong>ファイルに下記を追加する</strong></p><pre><code class="language-yaml">volumes:
 - .:/app　#← 現在のプロジェクトフォルダ.を、コンテナ内の/appに同期
 - /app/node_modules</code></pre><p>※/app/node_modules<br>ソースコードはホストとコンテナで共有しますが、node_modulesはコンテナ側のものを使用します。これは、ホストとコンテナではOSが異なる場合があり、ホストでインストールしたライブラリがコンテナ上で正常に動作しないことがあるためです。</p><p><span class="highlight">node_modulesはDockerで開発する場合はDocker側を使う構成が一般的</span></p><p></p><p><strong>コンテナを立ち上げ直す</strong></p><pre><code>docker compose down
docker compose up</code></pre><p>上記でコンテナを立ち上げ直そうとしたところ、下記エラーが発生。</p><pre><code>Error response from daemon: error while creating mount source path...</code></pre><p>原因は、私のMacがDockerがDesktopファイルにアクセスするのを許可していなかったことが原因でした。</p><p>設定から許可をすることで、無事コンテナを立ち上げ直すことができました。</p><p>そして、試しにコンポーネントの文字を一部変更すると、ホットリロードが効いて即時反映されました🎉</p><hr><h2 id="ha214098e44">まとめ</h2><p>一連の流れを実際に試してみましたが、Dockerは概念を理解することが難しく、自分が今何のためにこのファイルを書いているのか、何のためにこのコマンドを実行しているのかを、その都度確認しながら進める学習となりました。</p><p>現時点では、個人開発においてDockerを使用するメリットを実感できるところまでは理解できませんでした。</p><p>ただ、チーム開発ではなぜ開発環境を統一する必要があるのか、また、そのためにDockerがどのように活用されているのか学ぶことができました。</p><p>今回理解したいと考えていた「Dockerfile」「Image」「Container」に加え、「Volume」の役割についても知ることができました。</p><p>Dockerはただチーム内の開発環境を整えるだけでなく、さらにできることが多くありそうです。</p><p>今後も触れる機会を作りながら、少しずつ理解を深めていきたいと思います。</p>

Dockerってなんだろう？なぜ必要なのか、どういう仕組みなのかを考えながら調べました。

開発環境構築

Docker｜Dockerとは？なぜDockerを使うの？