【Docker使えるようになりたい】【#15 ウェブページをコンテナで表示】自分で書いたウェブページをコンテナを使ってホストOSから見れるようにする

SHARE

目次

目的

今回は、これまで学んできたコンテナの基礎と、さらに、ポート、ブリッジネットワークを使いながら最終的に自分のウェブページを閲覧できる状態を作ることが目的です。

最終的なゴールとして、http://localhost:3000/mypageをブラウザ上から表示すると、自作のHTMLが表示できる状態になることです。

仕様

使うイメージはnginx:latestを使用します。
このイメージから作成したnginxコンテナにHTMLを配置してウェブページをホストOSのブラウザから確認します。

Docker版のnginxについて詳しくない方は、とりあえず/usr/share/nginx/html内にHTMLファイルを配置することでブラウザ上から自分のHTMLを見ることができるという認識で大丈夫です。

自作HTMLファイルは、myPage/index.htmlというパスに配置します。
こうすることで、http://localhost:3000/myPageにアクセスするとindex.htmlが開くようになります。

  • イメージ : nginx:latest
  • HTML配置パス : /usr/share/nginx/html/myPage/index.html

自作HTMLファイルは以下のように扱います。

  • ソースファイル : ホストOS上のフォルダ内に格納
  • コンテナへのソースファイルの共有 : バインドマウントを使用

実践

手順として以下の順番で実装していきます。

  1. ホストOS上で表示するHTMLファイルの作成
  2. ブリッジネットワークmy-bridgeを作成
  3. docker runを使ってコンテナの作成
    • ホストOS上のフォルダをマウント
    • コンテナ内のポートをホストOSのポートにバインド
    • ブリッジネットワークmy-bridgeに接続する
    • コマンドの実行
  4. ブラウザからhttp://localhost:3000/mypageを開いてページが表示されるか確認

ホストOS上のフォルダ構造とコマンド実行パスは以下のようにしようと思います。
このパスは適時自分の環境に置き替えて読んでください。
基本的にカレントディレクトリ以下のパスが同じであれば問題ありません。

C:\Users\daiki\Desktop\DockerWs <-- カレントディレクトリ
└─ myPage
    └─ index.html

1. ホストOS上で表示するHTMLファイルの作成

以下の内容を記述したindex.htmlファイルを、myPageディレクトリに保存します。

index.html

Hello World

こんにちは 世界

このページを表示するのが今回の目的です。

” style=”color:#E6E6E6;display:none” aria-label=”Copy” class=”code-block-pro-copy-button”>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>自作ページ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1> Hello World</h1>  
  <h1> こんにちは 世界</h1>  

  <p>このページを表示するのが今回の目的です。</p>
</body>
</html>

2. ブリッジネットワークmy-bridgeを作成

ブリッジネットワークとは、Docker内のコンテナ同士をやり取りを管理するための機能です。
同じブリッジネットワークにつながっているコンテナ同士でしか通信ができないようになっています。

また、名前解決機能を使うことでそれぞれのコンテナのIPを指定しなくてもコンテナ名を指定するだけで内部でIPに変換してくれる機能も持っています。

この機能は大きめなアプリやサービスを作成するときに複数のコンテナを使う場合に、互いに影響が出ないように隔離するために使用するものですが、今回は慣れるために使用しようと思っています。

まずは、ネットワークの一覧を表示してみます。

# コマンド
docker network ls

# 出力
NETWORK ID     NAME      DRIVER    SCOPE
04218d3db08d   bridge    bridge    local
cb7a7b71de20   host      host      local
e9378884853c   none      null      local

出力は、自分でネットワークを作成していない(docker-composeを使用していない)場合であれば、3つのネットワークがデフォルトで存在していると思います。

最初のbridgeは明示的にコンテナをブリッジネットワークに接続していない場合は、このネットワークに接続されるようになっています。

では、自作のネットワークmy-bridgeを作成してみます。

# コマンド
docker network my-bridge

# 出力
902b624cb0995fcfcbd22772f1a32e67151ea0a425f5d1cd7b9cf98041b65217

# コマンド
docker network ls 

# 出力
NETWORK ID     NAME        DRIVER    SCOPE
04218d3db08d   bridge      bridge    local
cb7a7b71de20   host        host      local
902b624cb099   my-bridge   bridge    local  <- これがあればOK
e9378884853c   none        null      local

ネットワーク一覧を表示してNAMEの欄に作成したネットワーク名が見えれば作成完了です。

3. docker runを使ってコンテナの作成

以下の要件を満たすようにコマンドを付けてdocker contaienr runを実行します。

  • ホストOS上のフォルダをマウント
  • コンテナ内のポートをホストOSのポートにバインド
  • ブリッジネットワークmy-bridgeに接続する
  • コンテナ停止時に自動削除されるようにする

この節ではまずは使用するコマンドの解説を行います。
コマンドの実行は最後のコマンド実行節まで実行しなくて大丈夫です。

-vでバインドマウント

まず、ホストOS上のフォルダをマウントするには、-vオプションを使用します。
pwdコマンドを展開することで絶対パスの打ち間違えを極力減らしています
今回は、厳密にパスが決まっているので間違えないように注意してください。

  • "$(pwd)/myPage:自分のホストOSのパス
  • /usr/share/nginx/html/myPage : コンテナ内の紐づけるパス
    (myPageディレクトリはコンテナ内にないので自動で生成されます。)
docker container run -v "$(pwd)/myPage:/usr/share/nginx/html/myPage" nginx

-pでポートフォワーディング

次に、コンテナのポート番号を紐づけるために、-p {ホスト側のポート}:{コンテナ側のポート}オプションを使用します

このオプションは初めての紹介になりますが、特に難しいことはなく、コンテナ内のポートをホスト側のポートにつなげることで、外部から見るとホストOSのポートに接続してます。
コンテナ内へアクセスができるトンネルを作成しているようなイメージです。

nginxのhttpのデフォルトポート番号は80なので、コンテナ側の80番ポートとホスト側の3000ポートを紐づけます。

docker container run -v "${pwd}/myPage:/usr/share/nginx/html/myPage" -p 3000:80 nginx

–networkでブリッジネットワークに接続

次に、作成したコンテナをブリッジネットワークに接続します。

ひとつ前のステップでブリッジネットワーク自体は作成しているので、--network {ネットワーク名}オプションを使ってブリッジネットワークにつなぎます。

docker container run -v "${pwd}/myPage:/usr/share/nginx/html/myPage" -p 3000:80 --network my-bridge nginx

完成コマンドの実行

コンテナ停止時に自動でコンテナを削除するオプション--rmオプションを付けてコンテナ実行コマンドの完成です

docker container run -v "${pwd}/myPage:/usr/share/nginx/html/myPage" -p 3000:80 --network my-bridge --rm nginx

そして、ブラウザで以下のURLを入力するとHTMLで記述したページが表示されると思います

http://localhost:3000/myPage/

おかたずけ

コンテナは自動で削除されるようにオプションを付けたので、Ctrl + cでプロセスを終了してしまえばきれいになくなります。
イメージについては、必要なければ、docker image rm nginxで削除してください

ブリッジネットワークのmy-bridgeについても必要なくなったので、docker network rm my-bridgeで削除してしまいましょう。

# イメージが必要ない場合
docker image rm nginx

# 自作ブリッジネットワークの削除
docker network rm my-bridge

さいごに

今回は、より実践に近い形でポートとブリッジネットワークを使ったコンテナの使い方を解説しました。

次回以降は、データベースなどとの連携もしていこうと思っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

AndroidのJetpackCompose関係の記事のサムネイル
【Jetpack Compose】スクロールリスト応用編：カス…

次の記事

【Docker使えるようになりたい】【#16 Dev Cont…