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

🐳Dockerとは

Dockerとは、アプリケーションの開発やその実行を行うためのオープンプラットフォーム（土台）を提供するツールです。

これまでは、Node.jsがインストールされている私のPC自体が土台となって、ReactやNext.jsでアプリ開発を行っていました。

一人で個人開発をしているには、特に不便さは感じませんでした。

しかし、チーム開発や他の人が作ったアプリを開発するとなった時、この土台の環境差異が生まれてしまう可能性があります。

アプリAのNode.jsバージョンは18。アプリBはNode.jsバージョン24。AさんのPCにはNode.jsバージョン16…など。
自分のPCでは動くのに、他の人のPCでは動かないなんていうことも起こり得るそうです。

そんな問題を防ぐときに、Dockerの出番です。

Dockerを使えばそれらのアプリケーションが動くのに必要な環境を、それぞれ仮想環境に閉じ込めることができます。

PC内部の汚染を防ぎ、アプリごとに異なる開発環境を用意することも可能となります。
チーム全員が同じ環境で作業し、開発から本番まで同じ環境を使うため、環境差異によるトラブルを大幅に減らせる優れもののようです✨

今回の目標

Dockerについて調べれば調べるほど混乱してしまったため、まずは「既存のNext.jsのアプリケーションをDockerで動かす」を目標にします。

覚えたい用語は「Dockerfile」「Container」「image」の3つにしぼりました。

Dockerfile

Dockerfile は、自分の使いたい環境を定義する設計図。
今回はNext.jsなので、Node.jsの開発環境を設定します。

Docker image

DockerFileをbuildをすると、DockerFileで設定された環境「image」がDocker上で作られる。

このイメージから、実際に動く「コンテナ」を起動する。

コンテナ

「image」をもとに作られる、アプリケーションを実際に動かす実行環境。

Dockerでの環境構築のイメージ

Dockerfile（イメージを作る設計書ファイル）

↓

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

↓

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

↓

docker compose up（コンテナを起動するコマンド）

実際に動かしてみる

①Dockerfileを作成する

アプリケーションのディレクトリ直下に作成し、Next.jsを動かす環境を設定する。

/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 ["npm", "run", "dev"] 

②docker-compose.yamlを作成

コンテナを起動・管理できるのが docker-compose.yaml。
「どのイメージを使って、どういう設定でコンテナを起動するか」を書く設定ファイル。

#Dockerをどう起動するか設定するファイル
#Composeで起動するサービス一覧を定義する。frontend:やbackend:やdb:のようになる
services:
  #サービス名
  app:
    #コンテナを作るためのイメージはどうやって作るかを指定する
    build:
      #. は現在のディレクトリ。このプロジェクトルートをDockerへ渡す。この指定によって、Dockerfile内のCOPY . .が、ホスト側 calorieach/→コンテナ /appとしてコピーできる
      context: .
      #PCとコンテナの通信設定。ホスト側 : コンテナ側
    ports:
      - '3000:3000'
      #環境変数を渡す設定
    env_file:
      - .env

③build コマンド実行

下記コマンドを実行し、imageを構築する。

docker compose build

ここでターミナル上でビルドが始まるのですが、終わるまでに150秒くらい待ちました。

毎回こんなに待つの…？と不安でしたが、次回はキャッシュが効くのでもっと早くなるとのこと。

④コンテナ起動をする

次はいよいよコンテナを起動します。

下記コマンドを実行。

docker compose up

・
・
・

下記が表示された✅

app-1  | ✓ Ready in 1292ms

これでコンテナの中でNext.jsが正常に起動した状態です🎉

💻 操作コマンド

覚えておくべきDockerの基本コマンド：

Volumesを設定

以前はNext.jsを開発環境でコードを編集して保存すると、すぐに反映される「ホットリロード」が効いていた。

しかし今のままだとホットリロードが効いていないので、コードを書き換えても画面上で確認ができず不便です。
それを解決するのがvolumesの設定。

📁 volumes

docker-compose.yamlファイルに下記を追加する

volumes:
 - .:/app　#← 現在のプロジェクトフォルダ.を、コンテナ内の/appに同期
 - /app/node_modules

※/app/node_modules
ソースコードはホストとコンテナで共有しますが、node_modulesはコンテナ側のものを使用します。これは、ホストとコンテナではOSが異なる場合があり、ホストでインストールしたライブラリがコンテナ上で正常に動作しないことがあるためです。

node_modulesはDockerで開発する場合はDocker側を使う構成が一般的

コンテナを立ち上げ直す

docker compose down
docker compose up

上記でコンテナを立ち上げ直そうとしたところ、下記エラーが発生。

Error response from daemon: error while creating mount source path...

原因は、私のMacがDockerがDesktopファイルにアクセスするのを許可していなかったことが原因でした。

設定から許可をすることで、無事コンテナを立ち上げ直すことができました。

そして、試しにコンポーネントの文字を一部変更すると、ホットリロードが効いて即時反映されました🎉

まとめ

一連の流れを実際に試してみましたが、Dockerは概念を理解することが難しく、自分が今何のためにこのファイルを書いているのか、何のためにこのコマンドを実行しているのかを、その都度確認しながら進める学習となりました。

現時点では、個人開発においてDockerを使用するメリットを実感できるところまでは理解できませんでした。

ただ、チーム開発ではなぜ開発環境を統一する必要があるのか、また、そのためにDockerがどのように活用されているのか学ぶことができました。

今回理解したいと考えていた「Dockerfile」「Image」「Container」に加え、「Volume」の役割についても知ることができました。

Dockerはただチーム内の開発環境を整えるだけでなく、さらにできることが多くありそうです。

今後も触れる機会を作りながら、少しずつ理解を深めていきたいと思います。