はじめに

初めまして！
エンジニアになって約1年になりました。 Antonnion です。
最近家のホームゲートウェイを新しくしていただき安定通信はもちろん、通信速度が速くなり嬉しいです。

今回は私が感動した技術の一つでもある Docker について初の記事を書きました。というのも、初めて Docker を触った時、基礎知識がなくなかなか頭に入ってきませんでした。最近になり、ちょっとわかったとなり、 Dokcer を学ぶ過程でやれることも増えました。
ぜひ私のように頭に入ってこない方に触っていただきたいです。

やること

ゴールは、 Dokcer を使って自分が作成した HTML ファイルを表示することです。

【ゴール像】

準備

Windows or Macbook Pro
Docker Desktop

作成手順

以下のような手順で作成していきます。

Docker の概要と目標イメージの説明
Docker を動かしてみる

折りたたみは気になったら開く感じで進めていただければと思います。

1. Docker の概要と目標イメージの説明

Docker の概要

始めに Docker の概要です。
一言で言えば、 Dokcer はプログラムを隔離するツールのことです。
パソコンにはたくさんのプログラムが入っています。
このプログラムを独立した置き物に入れます。
この置き物のことをコンテナといい、このコンテナを使える仕組みが Dokcer です。

【コンテナの中のプロセスをイメージ by 生成 AI 】

人々が水泳や音楽など自由に好きなことをしています。
これがプロセスです。
このプロセスがコンテナで隔離されており、これを使える仕組みが Docker です。
その下にパソコンがあります。

詳細：なぜプロセスをコンテナに入れるのか

自由にしている人々（プロセス）をコンテナで隔離するには理由があります。
例えばシニア層が Python 8.0 の楽曲、ジュニア層が Python 9.0 の楽曲を同じ部屋で学ぶ際、教材の違いや学習スタイルの違いから干渉し合い、混乱が起るかもしれません。この干渉を防ぐことができます。
これらのグループを分ける目的が一つにあるのかなと思います。

メリデリをちょびっと

メリット

移植性
コンテナは持ち運びができます。
そのため、自分のパソコンでコンテナが動けば、他のパソコンでも動くことが保証されます。
上の画像で言えば、一度音楽部屋（コンテナ）を作成して人が演奏できたら、他のパソコンでもその部屋を実現できると言うことです。
移植ができるのです。

詳細：ドヤって移植するのか？

コンテナはイメージと言われるものから作成されます。これは設計図みたいなもので、上の画像で言うところの水泳コンテナ用の設計図、音楽コンテナ用の設計図みたいな感じです。設計図があればコンテナを複製できますし、コンテナを改良して再度設計図にも戻せます。
この設計図（イメージ）は、Docker Hubといわれるとこから入手できます。また自分でもイメージを Docker Hub へ登録することができます。
Dokcer Hub は公式が運用しているため、コンテナイメージが多くあります。
Web機能を提供する Apache やデータベース機能を提供する MySQL など様々なイメージがあります。

Docker Hub 以外にも設計図（イメージ）を登録できる場所はあります。

サーバーの管理がしやすい
サーバーは提供者を表しており、上の詳細で書いた様な Apache（ Web サーバー）や MySQL（データベースサーバー）がこれに当たります。
Dokcer でもサーバーを1つの機能として、隔離します。（1つの用途で隔離）
そのため、他のソフトウェアを気にせずアップデートを行えます。
また、コンテナも壊したり、作成したりが簡単に行えます。
これらを含めて管理がしやすいと言えるでしょう。

デメリット

Linux用のソフトウェアしか対応していない
世には様々な OS が存在します。その中で、 Docker は Linux OS を使った技術なので、 Linux 用のソフトウェアに依存します。

目標イメージの説明

コンテナに Apache （ Web サーバー）をインストールし、 Web ページを表示させます。
画像一枚で言うと以下です。
【イメージ図】

にしたいところなのですが、インターネット経由でアクセスするには外部と接続する設定が必要になります。
しかし、今回は外部に公開せずパソコン自体（localhost）にアクセスして Web ページを表示したいと思います。
なので実際は以下です。
【イメージ図】

ここで重要になるのがポートです。
ポートは通信の出入り口を表しており、外部に公開するポートなどはあらかじめ決められています。
ssh は22番、 http は80番みたいな感じです。
今回使用するポートは、8080番です。
このポートでコンテナを待機させ、自分のパソコンの8080番にアクセスすると上記の図のようなことができます。
では早速やってみましょう。

2. Docker を動かしてみる

手順は以下です。
2-1. Docker Desktop for Windiows or Macのインストール
2-2. Docker Hub からイメージを取得し起動
2-3. Apache 初期画面の確認
2-4. 自作の HTML ファイル表示

2-1. Docker Desktop for Windiows or Macのインストール

Windows, Macからダウンロードできます。
Docker Desktop は、 Docker Engine を簡単に使えるようにするための統合環境を提供します。
Docker Engineは、Dockerのコアコンポーネントであり、コンテナの作成と管理を担当するアプリケーションです。
詳細は公式ドキュメントに図付きであります。

2-2. Docker Hub からイメージを取得し起動

ここでは、ターミナルやコマンドプロンプトを開いて、 docker コマンド試してみましょう。
docker コマンドは

docker 何を どうする 対象

を意識すれば簡単に操作ができます。

今回だと

イメージを Dokcer Hub から取得
コンテナを作成
コンテナを起動

します。これをコマンドで実行するだけです。

次に取得するイメージを検索します。
今回は、Apache Web サーバーのイメージをインストールします。
Dcoker Hub で Apache と検索すると httpd が出てきました。

【Docker Hub画面】

// イメージの取得
docker image pull httpd

// イメージの確認
docker image list

// コンテナの作成（ポートを指定している）
docker container create --name NAME -p 8080:80 httpd

// コンテナの確認
docker container list -a

// コンテナの起動
docker container start NAME

// コンテナの状態確認
docker ps -a

以上で終わりです。
細かく書きましたが、実は以下のコマンドでもっと簡単にコンテナを起動させることができます。
pull, create, start を全て下のコマンドで実行できます。

docker run --name NAME -p 8080:80 httpd

8080:80について

イメージは下の画像のようになっているかなと思います。

8080は任意の数字で良いです。（8081や8085みたいな感じです）
80はコンテナのポートです。
:で口を繋げているようなイメージです。

2-3. Apache初期画面の確認

ではブラウザで確認してみましょう。
http://localhost:8080/
にアクセスすると以下の画像のように表示されたかと思います。
【ブラウザ画面】

2-4. 自作のHTMLファイル表示

ここでは簡単に index.html ファイルを作成し、それをコンテナ内にコピーします。
コピーするディレクトリは、現在表示されているIt Work!を表示する index.html ファイルがある場所です。
すなわち、Apacheなら/usr/local/apache2/htdocs/や/var/www/htmlなどになるかと思います。
これを設定しているファイルがあるので気になった際調べてみてもいいかもです。
（この記事などに書かれてあります。）

// コンテナIDを調べます
docker ps -a

// index.htmlを作成します
cd ~
vim index.heml

// テキストエディタが開くと思います
// 下のものをコピーして、貼り付けます
// i で入力、ctrl + v で貼り付け、Esc で入力終わり、:を押す、wq で上書き保存
// vim の操作で詰まれば生成 AI に聞いてもいいかもです（上の説明でできなければ）
<html><body><h1>Dream Come True!</h1></body></html>

docker cp index.html コンテナID:/usr/local/apache2/htdocs/

これで再度
http://localhost:8080/
にアクセスすると更新された HTML ファイルが表示されるかと思います。

まとめ

今回は自作の HTML ファイルを Docker を用いて表示させました。
まだまだ未熟で間違いもあるかと思います。訂正のコメントなどいただけると幸いです。
最後まで読んでいただきありがとうございます。