コピペで動く!Docker実践ハンズオンでWebサーバーを起動しよう

docker

はじめに

前回の記事で、Docker Desktopのインストールと hello-world の動作確認まで完了しました。

今回はいよいよDockerを「使う」ハンズオンです。

「なんとなくインストールできたけど、実際に何ができるの?」という疑問に答えながら、Webサーバーを自分のPCで立ち上げてブラウザからアクセスするところまでを一緒に体験していきます。

コマンドはすべてそのままコピペで動きます。まずは手を動かしながら読んでみてください。

この記事を読み終えると…

  • 「イメージ」と「コンテナ」の違いが説明できるようになっている
  • NginxのWebサーバーをDockerで起動して、ブラウザからアクセスできている
  • コンテナの起動・確認・停止・削除の基本操作が身についている
  • コンテナの中に入って操作できるようになっている
  • 自分のPCのファイルをコンテナに反映させる「マウント」を体験できている

まず押さえよう:「イメージ」と「コンテナ」の違い

Dockerを操作するうえで、この2つの言葉の違いを理解することが最重要です。

よく「レシピと料理」に例えられます。

料理に例えるとDockerでの役割
Dockerイメージレシピ(設計図)アプリを動かすために必要なプログラム・ライブラリ・設定をひとまとめにした不変のファイル。これ自体は動かない。
Dockerコンテナ実際に作った料理イメージをもとに、PCの上で実際に動き出した実体(プロセス)。同じイメージから何個でも独立して起動できる。

💡 オブジェクト指向に馴染みのある方は「クラスとインスタンス」と同じ関係、と覚えてもOKです。

Part 1. 最初のコンテナを動かしてみよう

テスト用コンテナの実行

まずはDocker公式が用意しているテスト用イメージで、コンテナを動かしてみます。

ターミナル(WindowsはPowerShellまたはコマンドプロンプト)を開いて、以下を実行してください。

docker run hello-world

以下のように 「Hello from Docker!」 から始まるメッセージが表示されれば成功です。

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

💡 裏側で何が起きた?

たった1行のコマンドで、Dockerは以下を自動でやり遂げています。

  1. 自分のPC内に hello-world というイメージがあるか探す
  2. 無いので、インターネット上の公開倉庫(Docker Hub)から自動でダウンロード(Pull)する
  3. ダウンロードしたイメージからコンテナを起動する
  4. コンテナがメッセージを表示して、役目を終えて自動で停止する

Part 2. 本物のWebサーバーを起動してブラウザからアクセスしよう

hello-world は動作確認用でしたが、次は起動し続ける本格的なWebサーバー(Nginx)を動かしてみます。

Nginxコンテナの起動

以下のコマンドをそのまま実行してください。

docker run -d -p 8080:80 --name my-webserver nginx

コマンドのオプション解説

オプション意味
-dバックグラウンドで動かす(これがないとターミナルが占有される)
-p 8080:80「自分のPCの8080番ポート」へのアクセスを「コンテナ内の80番ポート」に転送する
--name my-webserverコンテナに名前をつける(省略するとランダムな名前になる)

ブラウザからアクセスしてみる

コンテナが起動したら、ブラウザのアドレスバーに以下を入力してアクセスしてみてください。

http://localhost:8080

「Welcome to nginx!」 と表示されましたか?

自分のPC上に、コマンド一発で本物のWebサーバーが立ち上がりました。

Part 3. コンテナを確認・停止・削除する

起動したコンテナをほったらかしにするとPCのメモリを消費し続けるので、片付ける方法も覚えておきましょう。

動いているコンテナの一覧を確認する

docker ps

先ほど起動した my-webserver が表示されているはずです。

💡 停止済みのコンテナも含めてすべて確認したい場合は、docker ps -a を使います。hello-world のコンテナもここに表示されます。

コンテナを停止する

docker stop my-webserver

停止後にブラウザでhttp://localhost:8080 をリロードすると、繋がらなくなっているはずです。

コンテナを削除する

停止したコンテナはまだPC内に残っています。完全に削除するには以下を実行します。

docker rm my-webserver

これがDockerの最大の強みです

どれだけ中身をいじって壊しても、stop → rm するだけでいつでも綺麗な状態にリセットできます。実験し放題・壊し放題なのが嬉しいところです。

Part 4. コンテナの中に潜入してみよう

Dockerコンテナは独立した「小さなLinuxマシン」のようなものです。外から眺めるだけでなく、中に入って直接コマンドを叩くこともできます。

Ubuntuコンテナを起動して中に入る

docker run -it --name my-ubuntu ubuntu bash

オプション解説

オプション意味
-itコンテナ内でキーボード入力(-i)を可能にし、ターミナル画面(-t)を表示し続けるセット。中に入るときは必ず付ける。
bashコンテナ内で起動するプログラムの指定。Ubuntuのコマンド画面(Shell)を起動している。

コマンドを実行すると、ターミナルの左側の表示(プロンプト)が以下のように変わります。

root@xxxxxxxxx:/#

これで、自分のPCを汚さずに、コンテナ内のUbuntuを管理者(root)として操作している状態になりました。

コンテナの中でコマンドを打ってみる

試しにパッケージの更新と、文字をアスキーアートに変換する figlet というツールをインストールしてみましょう。

# 1. パッケージリストの更新
apt-get update

# 2. figletのインストール
apt-get install -y figlet

# 3. figletを使ってみる
figlet Docker Master!

画面にアスキーアートで 「Docker Master!」 と表示されれば成功です!

コンテナから脱出する

操作が終わったら、以下のコマンドでコンテナを抜けます。

exit

元の自分のPCのターミナルに戻ってきます。

⚠️ 「コンテナの使い捨て」現象に注目

試しに docker rm my-ubuntu でコンテナを削除して、docker run -it --name my-ubuntu2 ubuntu bash でもう一度新しいコンテナを作ってみてください。

先ほどインストールした figlet コマンドを打っても「そんなコマンドは無い」と怒られます。コンテナを消すと、その中での変更やデータはすべて消えてリセットされます。

これは不便に感じるかもしれませんが、「いつでも綺麗な状態に戻せる」という意味でもあります。次のPartでこの問題を解決します。

Part 5. データを自分のPCに保存する(マウント機能)

「コンテナを消すとデータが消える」のは手軽さの面では最高ですが、WebサイトのファイルやDBのデータを扱うときは困りますよね。

そこで登場するのが 「バインドマウント」 です。

自分のPC(ホスト)のフォルダコンテナ内のフォルダ をチューブで繋ぐように同期させる機能です。

PCに作業用フォルダとファイルを作る

まず、自分のPC上に作業フォルダとHTMLファイルを作ります。

# デスクトップに移動(Windowsの方はパスを適宜調整してください)
cd ~/Desktop

# 「docker-test」フォルダを作って移動
mkdir docker-test
cd docker-test

# index.html を作成
echo "<h1>Hello from My PC!</h1>" > index.html

フォルダを繋いでNginxコンテナを起動する

いよいよ今回のハイライトです。先ほど作った docker-test フォルダを、NginxコンテナがWebページを読み込むフォルダ(/usr/share/nginx/html)と繋げます。

docker-test フォルダの中にいる状態で、以下を実行してください。

Mac の場合:

docker run -d -p 8080:80 -v "$(pwd)":/usr/share/nginx/html --name my-shared-web nginx

Windows(PowerShell)の場合:

docker run -d -p 8080:80 -v ${PWD}:/usr/share/nginx/html --name my-shared-web nginx

-v オプション解説

-v [自分のPCのパス]:[コンテナ内のパス] の形で書きます。 $(pwd)${PWD} は「今いるフォルダのパス」を自動で入力してくれる便利な呪文です。

ブラウザで確認 & リアルタイム変更を体験する

ブラウザで http://localhost:8080 にアクセスしてみてください。

今度は「Welcome to nginx!」ではなく、「Hello from My PC!」 が表示されているはずです!

さらに面白いのはここからです。PC上の index.html をメモ帳やVS Codeで開き、テキストを書き換えて保存してみてください。

<h1>Hello from My PC! 自分だけのWebサーバー構築中!</h1>

コンテナを再起動することなく、ブラウザをリロードするだけで表示が変わります。

片付け

実験が終わったら、コンテナを停止・削除しましょう。

docker stop my-shared-web
docker rm my-shared-web

コンテナを消しても、デスクトップの index.html は消えずに残っています。これがマウントの強みです。

まとめ:今回覚えたコマンド一覧

コマンド役割
docker run [イメージ名]イメージをダウンロードして、コンテナを起動する
docker run -d ...バックグラウンドでコンテナを起動する
docker run -it [イメージ] bashコンテナを起動して、その中の操作画面に入る
docker ps現在動いているコンテナの一覧を表示する
docker ps -a停止中も含めたすべてのコンテナを表示する
docker stop [コンテナ名]動いているコンテナを安全に停止する
docker rm [コンテナ名]停止しているコンテナを削除する
exitコンテナ内の操作画面から抜け出す
-p [ホスト側ポート]:[コンテナ側ポート]ポートを繋ぐ(外からコンテナにアクセスできるようにする)
-v [PCのパス]:[コンテナのパス]PCとコンテナのフォルダを同期(マウント)させる

「コンテナを起動する・中に入る・PCのファイルを流し込む」という、Dockerの基本操作の流れが一通り体験できました。

最後に、今回の復習用に演習問題を作成してみましたので、上記をさらに定着させたい方はぜひ実際に手を動かして解いてみて下さい!

演習問題:実践ハンズオンに挑戦!

今回は、Nginxと並んで有名なWebサーバーである 「Apache(イメージ名:httpd)」 を使って、自分だけのWebサーバー環境を作ってみます。

今回のゴール

  • Apacheコンテナをバックグラウンドで起動し、ブラウザからアクセスできること。
  • 自分のPCのファイルをマウントして、画面の表示を書き換えられること。
  • 実験が終わったら、作成した環境を綺麗に片付けられること。

🛠️ 問題(ステップ1〜4)
【STEP 1】新しいWebサーバー(Apache)を起動せよ
以下の条件を満たすように、ターミナルからDockerコマンドを実行してコンテナを起動してください。

使用するイメージhttpd
コンテナ名my-apache
起動モードバックグラウンド
ポート設定自分のPCの 「8081番ポート」 から、コンテナ内の 「80番ポート」 へ転送する

【STEP 2】起動の確認とブラウザアクセス
コンテナが正しく動いているか、一覧確認コマンドで確認してください。

ブラウザで http://localhost:8081 にアクセスし、「It works!」 と表示されるか確認してください。

【STEP 3】バインドマウントを応用して画面を書き換えよ
自分のPCのデスクトップに apache-test というフォルダを作り、その中に index.html を作成して以下を記述して保存してください。

Hello Apache from My PC!

先ほどの my-apache コンテナを一度停止・削除してください。

作成した apache-test フォルダをマウントして、新しくコンテナ(名前:my-shared-apache、ポート:8081:80)をバックグラウンドで起動してください。

💡 ヒント:コンテナ側のパスに注意!
Apache(httpd)がWebページを読み込むフォルダ(ドキュメントルート)は、Nginxとは異なり /usr/local/apache2/htdocs です。このパスに向けてマウントをしてください。

ブラウザで http://localhost:8081 にアクセスし、表示が「Hello Apache from My PC!」に変わるか確認してください。

【STEP 4】片付け
実験が終わったら、作成したコンテナ my-shared-apache を停止し、完全に削除してください。

演習問題の解答

上記の演習問題の解答は私のnoteの方で公開しておりますので、解答・解説を確認したい方はぜひ以下のリンクからご確認頂き、今回学んだ範囲の理解をさらに深めて下さい!
【Docker実践演習】Apacheで自分だけのWebサーバーを作ろう

次の記事では、既存のイメージファイルを使うのではなく、Dockerfileを書いて自分だけの専用イメージの自動作成に挑戦していきたいと思います!

この記事をSNSでシェア!

コメント