環境
以下の環境ベースにnginxを入れてWEBサーバを立ち上げます。
- Windows11
- WSL2
- Ubuntu20.04 LTS
- Docker Desktop
ここまでの環境構築については以下の記事を参照ください。
WEBサーバ構築
nginxのイメージをダウンロードする
Ubuntuを立ち上げて以下のコマンドでdockerhub上のnginxイメージ最新版をダウンロードします。
docker pull nginx:latest
イメージの確認
同じくUbuntu上で以下のコマンドを実行してnginxのイメージが存在することを確認します。（赤枠）
docker images
もしくは、Windows11側のDockerアイコンからDocker-Composeを起動して「images」を選択することでも確認できます。
コンテナの実行①（Ubuntu上から実行）
Ubuntu上からコンテナ名「test-nginx」、ポート「8080」でコンテナを実行します。
(今回は8080ポートとしていますが「-p 80:80」でも可)
docker run -d --name test-nginx -p 8080:80 nginx
コンテナの実行②（Windows上[Docker-Compose]から実行）
Windows上でDocker-Composeを起動し「images」からnginxにマウスフォーカスすると出てくる「run」ボタンから実行します。
「Optional Settings」の▽をクリックして以下を入力後「Run」ボタンをクリックします。
「Container Name」：コンテナ名に任意の名前、今回はUbuntu上で実行したときと同じ名前で「test-nginx」。
「Ports」：ポート8080を指定
「Volumes」：今回は省略（後述）
コンテナの確認
Ubuntu上で「docker ps」もしくはWindows上でContainers/Appsを選択することで確認できます。
ブラウザで確認
ブラウザのアドレスバーに「localhost:8080」(「-p 80:80」で作成した場合は「localhost」のみでポートの指定は省略可)を入力することでnginxのウェルカム画面が表示されれば完了です。
作成したコンテナの場所
Docker Desktop for Windowsで作成したコンテナの場所はUbuntuディレクトリ内ではなく、Docker Desktopを導入した際に作成されるdocker-desktop-data内に存在しています。
PowerShellおよびエクスプローラのアロレスバーに
\\wsl$\docker-desktop-data\version-pack-data\community\docker
を入力することでアクセス可能ですが、この状態では作成したtest-nginxコンテナ内は見ることはできません。
先程の「Welcome to nginx!」を表示しているindex.htmlはtest-nginxコンテナ内の/usr/share/nginx/htmlに存在しているため、以下のコマンドでコンテナ内に入る必要があります。
docker exec -it test-nginx bash
正直、この状態ではHTMLを編集してコンテナ内のドキュメントルート（/usr/share/nginx/html）に配置して・・・の手順が大変です。ここで関係してくるのがコンテナ作成時に省略したVolumes（Ubuntu上から作成する際のオプション「-v」）の存在です。このオプションを使用することで、ホスト側（Windows）の任意のフォルダとコンテナ内のドキュメントルートを紐付けて変更結果をすぐに確認できるようにします。
Cドライブのサイズを節約するため、ここではDドライブに「nginx-vol」という名前のフォルダを作成し、ここへコンテナ内のドキュメントルート（/usr/share/nginx/html）を紐付けたいと思います。本当であればdocker volumeコマンドなどを駆使してマウントしたいところではありますが、簡単にコンテナの作り直しで；；
作成したコンテナを一旦削除
Docker-Composeを開いてコンテナ一覧からtest-nginxコンテナにフォーカスし、右端のゴミ箱アイコンをクリックして削除。
volumeオプションをつけてコンテナを作成
改めてvolumeオプションを付与した状態でコンテナを作成します。
docker run -d -v D:\\nginx-vol:/usr/share/nginx/html --name test-nginx -p 8080:80 nginx
これでWindowsのDドライブ直下に「nginx-vol」という空フォルダが作成されるので、とりあえずnginxのindex.htmlをそのまま置いてみます。ブラウザからlocalhost:8080にアクセスすることでウェルカムページを確認することができると思います。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
コメント