はじめに

今回本サイトを作るにあたり、構築した環境の構築方法について記載します

できるだけ再現性の高そうな手順を作ったつもりです。。。

一応作成時点で使用した各種バージョンを記載します

種類	バージョン
Windows11 Pro	25H2
WSL	2.6.1.0
Ubuntu	24.04.3
Docker	28.5.1
Next.js	16.0.0

環境構築手順

WSL編

Powrshellを開く
wslにubuntuをインストール

$ wsl --install

※上記コマンドのみだと自動的にubuntuがwsl環境にインストールされます

Docker編

Dockerはaptリポジトリからインストールします

1.UbuntuシステムにDocker公式リポジトリを追加し、そのリポジトリからパッケージを安全にインストールできるようにするための準備をします

# Add Docker's official GPG key:
$ sudo apt-get update
$ sudo apt-get install ca-certificates curl
$ sudo install -m 0755 -d /etc/apt/keyrings
$ sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
$ sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update

コマンド解説

sudo apt-get install ca-certificates curl: HTTPS経由で安全に通信するために必要な ca-certificates (認証局証明書) と、URLからデータを転送するための curl ユーティリティ
sudo install -m 0755 -d /etc/apt/keyrings: aptがパッケージ認証に使用するGPGキーを格納するためのディレクトリ /etc/apt/keyrings を作成し、ディレクトリのアクセス許可をするためのコマンド
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc: curl を使用して、Dockerの公式GPG (GNU Privacy Guard) キーをDockerのダウンロードサーバーからダウンロード
sudo chmod a+r /etc/apt/keyrings/docker.asc: ダウンロードしたGPGキーファイル（/etc/apt/keyrings/docker.asc）のパーミッションを変更
echo "deb [arch=$(dpkg --print～～: Dockerリポジトリの設定行を作成し、その行を新しい設定ファイルとしてAPTに追加

Dockerのパッケージ群をインストール

$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

docker-ce:　オープンソース版のDocker CE(Communitiy Edition)
docker-ce-cli: Dockerのコマンドラインインタフェース. コンテナ作成・起動・削除等を行う
containerd.io: Dockerの動作に必要なコンテナランタイム
docker-buildx-plugin: Dockerのビルド機能を拡張するためのプラグイン
docker-compose-plugin: Docker Composeを使うためのプラグイン

インストール後の動作確認

インストールされたdockerのバージョン確認と、Dockerでコンテナを起動できるかの確認

$ docker --version
Docker version 28.5.1, build e180ab8

$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

Next.js編

DockerでNext.jsの環境構築

Next.jsの環境を作りたい任意をフォルダを作成

$ mkdir nextjs_ts
$ cd nextjs_ts

Dockerファイルの作成

$ nano Dckerfile

#以下を書き込む
FROM node:20-slim

WORKDIR /app

compose.yamlファイルの作成

$ nano compose.yaml

#以下を書き込む
services:
  app:
    build:
      context: .
    tty: true
    volumes:
      - ./src:/app
    environment:
      - WATCHPACK_POLLING=true
    command: sh -c "npm run dev"
    ports:
      - "3000:3000"

DockerコンテナにNext.jsの新しいプロジェクトを作成

$ docker compose run --rm app sh -c 'npx create-next-app . --typescript'

コマンドを実行したときに選択がする必要ががある項目

✔ Which linter would you like to use? › ESLint
✔ Would you like to use React Compiler? … No / Yes ← Yes
✔ Would you like to use Tailwind CSS? … No / Yes ← Yes
✔ Would you like your code inside a `src/` directory? … No / Yes ← Yes
✔ Would you like to use App Router? (recommended) … No / Yes ← Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes ← Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes ← Yes
✔ What import alias would you like configured? … @/*

以下が出力されれば正常終了

added 361 packages, and audited 362 packages in 28s

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Generating route types...
✓ Route types generated successfully