初学者向け：Dockerを使って簡単にNGINX環境を構築し、ブラウザからアクセスして確認する方法

## はじめに
NGINXは軽量かつ高速なWebサーバーとして広く利用されています。

:::note warn
***この記事では、NGINXをDockerfileを使ってコンテナ化する方法を簡単に解説します。***
:::

未来の自分への備忘録としても活用できるよう、基礎的な部分を体系的にまとめました。***そのため、Docker初心者の方にも役立つ内容となっています！***

## 前提条件
以下の環境が整っていることを前提に、実際にハンズオンを進めていきます。

:::note info
- **Dockerがインストールされ、起動していること**
- **基本的なコマンドライン操作の知識**
- **任意のテキストエディタ（例: VS Code、Vim など）が利用可能であること**
:::

また、Dockerの基礎知識については、以下の記事で解説していますので、参考にしてください。

https://qiita.com/free-honda/items/6273289e813eabcbd9d9

## ディレクトリ構成

この記事で作成するプロジェクトのディレクトリ構成は以下の通りです。

```ディレクトリ構成.
nginx-docker/
├── html/               # 静的ファイルを格納するディレクトリ
│   └── index.html      # 静的なウェブページのサンプル
└── Dockerfile          # Dockerイメージを定義するファイル
```

:::note warn
**シンプルでわかりやすいディレクトリ構成にしています。**
:::

## 実際にやってみた

### プロジェクトの準備


まず、ターミナルで以下のコマンドを実行し、プロジェクト用のディレクトリとファイルを作成します。

```bash
mkdir nginx-docker
cd nginx-docker
touch Dockerfile
```

### 必要なファイルを作成

次に、プロジェクトディレクトリ内に以下の2つのファイルを用意します。

:::note info
- ***```html/index.html```***: シンプルなhtmlファイル
- ***```Dockerfile```***: Dockerの設定ファイル
:::

### Dockerfileの作成
次に、以下の内容を```Dockerfile```に記述します。

```dockerfile
# ベースイメージとしてNGINXを使用
FROM nginx:latest

# カスタム設定や静的ファイルをコンテナにコピー（必要に応じて設定）
COPY ./html /usr/share/nginx/html

# デフォルトのポート80を公開
EXPOSE 80
```

### 静的ファイルの作成

続いて、```html```ディレクトリを作成し、その中に簡単な```index.html```を用意します。

```html/index.html
mkdir html
echo "<h1>こんにちは、Dockerで動くNGINX!</h1>" > html/index.html
```

これで、NGINXが表示する静的ファイルの準備ができました。

## Dockerイメージのビルド

次に、```Dockerfile``` を基に ```Docker``` イメージをビルドします。

```bash
docker build -t my-nginx .
```

```-t my-nginx``` は、作成するイメージにmy-nginxという名前を付けるオプションです。

![スクリーンショット 2024-12-12 20.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/ab546eb1-b8a2-aa52-0f1b-ed6a73c8d648.png)

上記のコマンドを実行すると、```Dockerfile``` の内容に基づいてコンテナイメージが作成されます。

## コンテナの起動と動作確認
Dockerイメージからコンテナを起動します。以下のコマンドを実行してください。

```bash
docker run -d -p 8080:80 --name nginx-container my-nginx
```

コンテナの起動と動作確認のポイントは以下になります。

:::note
**このコマンドの各オプションについて説明します。**
- ***```-d```*** バックグラウンドでコンテナを実行するオプション
- ***```-p 8080:80```*** ホストのポート8080をコンテナのポート80にマッピング
- ***```--name nginx-container```*** コンテナにnginx-containerという名前を付ける
:::

ブラウザで```http://localhost:8080```にアクセスすると、「```こんにちは、Dockerで動くNGINX!```」というメッセージが表示されます。

![スクリーンショット 2024-12-12 20.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/232292b8-08c1-f338-242a-b333177aaefd.png)


## まとめ

この記事では、```Dockerfile``` を使用して簡単にNGINX環境を構築する方法をご紹介しました。

:::note warn
***今回はDockerの基礎的な内容を扱いましたが、基本をしっかり理解することでDockerやコンテナに関する知識がさらに深まります。***
:::

今後もDocker関連の知識を整理しながら発信していきますので、***この記事が誰かの技術的な参考になれば嬉しいです！***

## おまけ：シェルスクリプトで一括作成してみた
手動でディレクトリとファイルを作成するのが少し面倒に感じたので、ディレクトリ構造と必要なファイルを一括で作成するシェルスクリプトを作成しました。

```test.sh
#!/bin/bash

# プロジェクトのルートディレクトリ名
PROJECT_DIR="nginx-docker"

# ディレクトリ構造を作成
mkdir -p ${PROJECT_DIR}/html

# Dockerfileを作成
cat << 'EOF' > ${PROJECT_DIR}/Dockerfile
# ベースイメージとしてNGINXを指定
FROM nginx:latest

# 静的ファイルをコンテナ内のNGINXデフォルト公開ディレクトリにコピー
COPY ./html /usr/share/nginx/html

# ポート80を公開
EXPOSE 80
EOF

# HTMLファイルを作成
cat << 'EOF' > ${PROJECT_DIR}/html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NGINXへようこそ</title>
</head>
<body>
    <h1>こんにちは、Dockerで動くNGINX!</h1>
</body>
</html>
EOF

# 完了メッセージ
echo "プロジェクトディレクトリ '${PROJECT_DIR}' が作成されました。"
echo "以下の手順で Docker イメージをビルドして起動してください："
echo "  cd ${PROJECT_DIR}"
echo "  docker build -t custom-nginx ."
echo "  docker run -d -p 8080:80 custom-nginx"
```

***このスクリプトを実行すれば、ディレクトリ構造と初期ファイルなどが自動で作成されます。***

## 関連記事

https://www.kagoya.jp/howto/cloud/container/dockernginx/

https://www.docker.com/ja-jp/blog/how-to-use-the-official-nginx-docker-image/

https://qiita.com/mtakehara21/items/d7be42cf12772f3ada25

https://qiita.com/free-honda/items/9ebe3473a9099b84f5a4