こんにちは！この記事では、僕が初めてDockerを使って環境構築をしたときの体験をもとに、初心者でもわかりやすくDockerを始める方法を紹介します。
僕は、FrontendにReact + Material UI、BackendにNode.js + MySQLを使ったウェブページの制作でDockerを初めて使いました。
正直、「Dockerって難しそう・・・」と思っていたんですが、いくつかの基本だけ覚えれば意外と簡単でした！ ~~（完璧に使いこなせるとは言ってない）~~
3では、実際にやった手順とポイントを共有しながら実際にDockerで記述したindex.htmlを表示してみます！

1. Dockerって何？

Dockerは、簡単に言うと「仮想環境を作るツール」です。
似たサービスでいうとHyper-VなどのVM(仮想マシン)や、LXC(Linux Containers)などなど
（VMやLXCとの違うポイントは2つめのポイントに記述してます）
例えば、ReactやMaterial UIのバージョン違いでエラーが出る問題も、Dockerを使ってちゃんとバージョン管理すれば解消できます。
プロジェクトごとに独立した環境を作ることで、設定の手間を減らせるんです！

2. Dockerを使うと何がいいの？

僕がDockerを使って感じたメリットは以下の4つです。

ローカルがスッキリ！
Node.jsやMySQLのインストールが必要なく、ローカル環境がスッキリ綺麗！
軽量でスピーディーな開発が可能！
Dockerのコンテナはとにかく軽量！だから、起動するのにかかる時間はほぼ一瞬！
一方、VM(仮想マシン)やLXCはOSレベルの仮想化を行うから時間がかかるのと、ある程度のLinuxの知識が必要
コンテナはメモリやディスクの消費量を最小限に抑えて仮想化する仕組みなので、速い＆効率的！~~（LXC詳しくないから間違えてたらすまん）~~
開発環境の共有
別のPCでも同じ設定で簡単にアプリを動かせる！
普段持ち歩いているMacbookと家のWindows PCで開発してたんですけど同じ環境をすぐ再現できのがらくすぎる～

3. 必要な準備

①まずはDockerをインストールします。

Docker公式サイトにアクセス
自分のOS（Windows/macOS/Linux）に合ったDocker Desktopをダウンロード
インストール後、Docker Desktopを起動

② . Dockerの環境構築の際に必要なこと

まず環境構築に必要な2つのファイルを用意します。

Dockerfile

アプリの動作環境を定義するファイルです。
例えば、僕がプロジェクトで使っていたFrontendのDockerfileはこんな感じ。

FROM node:20

# ディレクトリの指定
WORKDIR /app

# 依存関係のインストール
COPY package.json ./
RUN npm install

# ローカルの全てのフォルダをコンテナにコピー
COPY . ./

# ポートを環境変数で指定
ENV PORT=○○:○○

docker-compose.yml

複数のコンテナ（Node.js、MySQLなど）を管理する設定ファイル
FrontendにReact、BackendにNode.js+MYSQLのプロジェクトで実際に使っていたDocker-copose.yml

docker-compose.yml

# docker-compose.yml: 複数のコンテナをまとめて管理する設定ファイル
services:
  db:
    image: mysql:9.1  #MySQLのバージョン9.1を使用
    environment:  #MySQLの設定を環境変数で指定
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}  #ユーザーのパスワード
      MYSQL_DATABASE: ${MYSQL_DATABASE}  #データベース名
      MYSQL_USER: ${MYSQL_USER}  #データベースにアクセスするユーザー名
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}  #ユーザーのパスワード
    ports:
      - "○○:○○"  # ホストのポート○○をコンテナのポート○○にマッピング
    volumes:
      - db-data:/var/lib/mysql  #データベースのデータを永続化するための
    networks:
      - app-network  #コンテナと通信するためのネットワーク

  backend:
    build:
      context: ./backend  #backendフォルダをビルドのコンテキストに指定
      dockerfile: Dockerfile  #使用するDockerfileのパスを指定
    ports:
      - "○○:○○"  #ポート指定
    environment:  #バックエンドの環境変数(.env)を指定
      - DATABASE_HOST=${DATABASE_HOST}  #データベースのホスト
      - DATABASE_USER=${DATABASE_USER}  #データベースのユーザー名
      - DATABASE_PASSWORD=${DATABASE_PASSWORD}  #ユーザーのパスワード
      - DATABASE_NAME=${DATABASE_NAME}  #データベース名
    volumes:
      - ./backend:/app  #ホストのbackendフォルダをコンテナの/appに
    networks:
      - app-network  #他のコンテナと通信するためのネットワークを指定
    depends_on:
      - db  #dbが起動してからbackendを起動
    tty: true  #ターミナルを有効化(execを使いやすくする：デバッグ用)

  frontend:
    build:
      context: ./frontend  #frontendフォルダをビルドのコンテキストに指定
      dockerfile: Dockerfile  #使用するDockerfileのパスを指定
    ports:
      - "○○:○○"  #ポート指定
    volumes:
      - ./frontend:/app  #ホストのfrontendフォルダをコンテナの/appに
      - /app/node_modules  #node_modulesのフォルダを個別に
    networks:
      - app-network  #他のコンテナと通信するためのネットワークを指定
    depends_on:
      - backend  #backendサービスが起動してからfrontendサービスを起動
    tty: true  #ターミナルを有効化(execを使いやすくする：デバッグ用)

networks:
  app-network:  #共有ネットワークの定義

volumes:
  db-data:  #データベースのデータを保存する永続化ボリュームの定義

③フォルダ構成

次にフォルダ構成をこんな感じにします！frontendとbackendのそれぞれにコードとDockerfileを配置し、プロジェクト全体の設定をdocker-compose.ymlで管理します

④docker-compose up

４つめはDockerのコンテナをつくります
例 : C:\User\○○\Documents\Project\Connectixにdocker-compose.ymlがあるところで

docker-compose up --build -d

を実行
ここで一旦実行したコマンドのオプションについて簡単に解説
--build → コンテナをビルド
-d バックグラウンドで実行

⑤exec入り方 + npm start

５つめはコンテナのexecに入り実際にnpm stasrtを実行します。
Docker Desktopのコンテナのexecで実行する方法もありますが、
docker-compose upを実行したところで、

docker exec -it <container-id> /bin/sh

を実行することでもコンテナのexecにアクセスできます！
execで

npm start

を実行し、Dockerfileなどで指定したポートにアクセスすることで記述したindex.htmlが表示されます！

まとめ

とあるプロクラメンターさんに~~半ば強制~~書かされた記事でしたが記事を書くことが初めてだったのでいい試みになったと思います！
稚拙な文章や分かりづらい点が多いと思いますが、Docker使ったことないけどチャレンジしてみたいよ～って人の参考になればいいなと思います！ありがとうございました！