Win11+WSL2+Ubuntu+DockerでWEBサーバを立ち上げる

Docker

環境

以下の環境ベースにnginxを入れてWEBサーバを立ち上げます。

  • Windows11
  • WSL2
  • Ubuntu20.04 LTS
  • Docker Desktop

ここまでの環境構築については以下の記事を参照ください。

Windows11+WSL2+Ubuntu20.04にDocker Desktopをインストールする
以下の環境にDocker Desktopをインストールします。 Windows11 WSL2 Ubuntu20.04 LTS

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>

コメント

タイトルとURLをコピーしました