Windows11 WSL2 Ubuntu 24.04 LTS Docker

Docker 使用 Web サイト表示

ここまでで、Docker コンテナ チュートリアルを動作させたり、止めたりすることができるようになりました。
引き続き、Docker を使用して Web サイトを表示させてみます。
Docker コンテナの使用方法について勉強するにはとても良い例だと思います。
Web サーバーとして有名な Apache httpd だけを含んでいる httpd という Docker イメージが 公式の Docker Hub リポジトリで公開されています。
これを利用すると簡単に Web サーバーを構築することができます。
【超初心者】Docker を使用して自作 Web サイトを表示してみた
が参考になります。

Docker コンテナ httpd

Docker コンテナ httpd を作成するフォルダを作ります。
/home/yamada/ のフォルダの直下に
/doc-httpd (名前は適当です、分かりやすい名前をつけましょう)
のようなコンテナ名をつけてフォルダ
/home/yamada/doc-httpd
を作成し、
この中ににコンテナ作成のための以下の設計書-ファイル類を作成し保存します。
例としては
/home/yamada/doc-httpd
　Ｌ Dokerfile ①　今回は不要
　Ｌ docker-compose.yml　②
　Ｌ htdocs　③
　　 Ｌ index.html
　　 Ｌ css 今回は不要
　　　　Ｌ style.css
　　 Ｌ img 今回は不要
　　　　Ｌ sample.png

のようにファイル類を作成します。
通常、①②③の三つのフォルダ/ファイル名は変えてはいけません。
もっと複雑になる時もあります。
これらはなくても何とかなりますが基本、作成することになります。
しかし今回は、シンプルなコンテナを作成しますので、②のファイルを作成し、コンテナを構築します。
htdocs の中の index.html は動作確認用のファイルです。
index.html の中でスタイル指定や画像表示する場合は css や img ファイルを作成します。
今回は htdocs がドキュメントルートとなり、Web サイトで外部に公開される HTML ファイルや画像データなど を設置する場所になります。

Docker httpd Compose ファイル作成

Docker コマンドを入力することでコンテナを立ち上げることも可能ですが、 Docker コマンドだけで対処するには大変です。
今回は Docker Compose という Docker 立ち上げ設定書の機能を利用して、コンテナを立ち上げます。
docker-compose.yml
なるテキストファイルに起動に関する基本的なコマンドを入力してコンテナを作成します。
注意すべき点は半角スペースの数を１と決めたら１つ、もう１段階字下げするときは２つ
さらに字下げするときは３つのようにします。
内容は以下の通りです。 


services:
 httpd:
  image: httpd
  ports:
   - '8089:80'
  volumes:
   - ./htdocs:/usr/local/apache2/htdocs

内容を分解して説明します。

  1. services:

    Docker Compose は複数の Docker 環境を立ち上げることができます。
    今回は tutorial と言うコンテナだけを立ち上げますが、ここに続けて記述することにより、 他のコンテナも立ち上げることができます。

  2. image:

    読み込む Docker イメージを指定します。

  3. ports:

    仮想コンピュータと繋ぐポート番号を指定します。
    ports:8088 は doc-tutorial で使用しましたので、今回は
    ports:8089 を使用します。
    パソコン側で 8089 番ポートにアクセスすると、仮想コンピュータ内の 80ポートに接続されます。
    80番は仮想コンピュータのウェブサーバーのポートを指しています。
    パソコン側でのポート番号指定は 0～65535 までいくつでも良いのですが、 すでに割り当てられている番号は避けてください。
    ウェブサーバーのポートは基本 80 ですので 8001～8099 あたりが良いと思います。

  4. volumes:

    ｢:｣を挟んで左側の値　./htdocs
    ローカルディレクトリ
    /home/yamada/doc-httpd/htdocs
    と右側の値
    /usr/local/apache2/htdocs
    (Docker 内ディレクトリ)
    を接続する設定を記述します。
    ローカル側は相対パス、サーバー側は絶対パスで記述します。
    Apache の DocumentRoot ディレクトリのデフォルト値は
    /usr/local/apache2/htdocs/
    に設定されているので、これを指定しました。

  5. volumes の効用

    Docker コンテナの中の世界に対して変更を加えたい！と思うことはしばしば起こります。
    この要望に答えてくれるのが volumes 機能です。
    今回の例では、htdocs フォルダに変更内容を記述したファイルを置いてあげれば良いのです。


自分の PC Windows で TeraPad 等を使用して docker-compose.yml が作成できたらこれを保存します。
Windows 側のエクスプローラーにおいて、ネットワークの下に Linux のフォルダがあります。
Linux の中に
Ubuntu-24.04(\\wsl.localhost)
のフォルダがあります。
\\wsl.localhost\Ubuntu-24.04\home\yamada\doc-httpd
ここに docker-compose.yml を保存します。
ファイル名は必ず
docker-compose.yml
です。
文字コ－ドは、UTF-8N
BOM なし
改行コ－ドは、LF
です。
\doc-httpd
はこのページの最初に作成したフォルダです。

Docker httpd 動作確認用ファイル作成

Docker httpd 動作確認用 index.html ファイルを作成します。
内容は適当です。 


<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドキュメント</title>
</head>
<body>
<p>ハロー！<br>Docker httpd
</p>
</body>
</html>

自分の PC Windows で TeraPad 等を使用して index.html が作成できたらこれを保存します。
Windows 側のエクスプローラーにおいて、ネットワークの下に Linux のフォルダがあります。
Linux の中に
Ubuntu-24.04(\\wsl.localhost)
のフォルダがあります。
\\wsl.localhost\Ubuntu-24.04\home\yamada\doc-httpd/htdocs
ここに index.html を保存します。
文字コ－ドは、UTF-8N
BOM なし
改行コ－ドは、LF
です。

ここまでで、Docker httpd を動作させる準備が終わりました。
引き続き httpd Docker Compose ファイルを実行していきます。


  • Docker Compose ファイル実行 に進む
  • Docker コンテナ チュートリアルなぜ動く に戻る
  • Docker コンテナ チュートリアル に戻る
  • Docker CE インストール概要 に戻る

    • 70VPS に戻る