DockerでWebページを表示（Nginx）

2019/12/10 2021/12/08

前回、Dockerの基本コマンドを実行してコンテナの基本操作を行いました。

Dockerでコンテナ基本操作（起動から削除までの演習）

今回は、Docker で Nginx（Webサーバ）を起動してWebページを表示させてみます。

演習

Docker で Nginx を起動してWebページを表示させる。

実行結果

手順

コンテナの作成＆起動
ブラウザで確認
コンテナを停止＆削除
ホストOS上にHTMLを設置
コンテナの起動＆バインド
ブラウザ確認

１．コンテナの作成＆起動


$ docker run --name nginx-latest -d -p 8080:80 nginx:latest

書式


$ docker run --name [コンテナ名] -d -p [ホスト側のポート番号]:[コンテナ側のポート番号] [イメージ名]

解説

オプション	説明
--name [コンテナ名]	任意のコンテナ名を指定。
-dオプション	バックグランドで実行。このコマンドがないと、それ以外の処理を実行することができない。
-pオプション	コンテナのポートに、ホストのポートからアクセスできるようにする

２．ブラウザで確認

docker runコマンドでNginxを起動したので、ブラウザを開いて「http://localhost:8080」にアクセス。

上記のように表示されればOK。

３．コンテナを停止＆削除

いったん、NginXのコンテナを停止します。


// docker stop [コンテナ名]
$ docker stop nginx-latest

// docker rm [コンテナ名]
$ docker rm nginx-latest

４．ホストOS上にHTMLを設置

ホストOS（Windows）の C:\web にHTMLファイルを置きます。

デモのHTMLは以下をコピペして作成しました。

Bootstrap4 スタートアップ


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <!--自作CSS -->
    <style type="text/css">
        <!--
        /*ここに調整CSS記述*/
        
        -->
    </style>
</head>
<body>
<div class="container">

<!--Bootstrapコンポーネントを記述していく-->
<div style="margin-top:300px;text-align:center"><h1>Hello World from Enginx!</h1></div>

</div><!-- /container -->

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>

５．コンテナの起動＆バインド

ホスト側でHTMLを設置したディレクトリとコンテナ側のディレクトリにバインドしてEnginxを起動します。

ホスト側：C:\web
Nginx側：/usr/share/nginx/html （※nginxのドキュメントルート）


$ docker run --name hello-nginx -v C:\web:/usr/share/nginx/html:ro -d -p 8080:80 nginx

解説

-dオプション でバックグランドで実行し、-pオプション でポート転送を設定します。ポート8080でアクセスすると、nginxのポート80にフォワードされページが表示されます。

オプション	説明
-vオプション	ホストのボリューム（hVolume）を、コンテナ内のボリューム（cVolume）にバンドします。
-pオプション	ポート8080でアクセスすると、nginxのポート80にフォワードされページが表示されます。