IT技術で仕事を減らしたい！

ITエンジニアのメモ＋α

トップ > Docker > Docker nginxを使った静的なWebサイト

Docker nginxを使った静的なWebサイト

Docker Nginx

どうも、nippa です。

今回は Docker で静的サイトを公開したいと思います。

Docker を使う理由としては、

  • サービスのコード管理
  • 移行作業の簡略化
  • サービスのスケーラビリティの向上

など、数々のメリットがあります。

今回は、サービスのコード管理・移行作業の簡略化を目的とした、静的な Web サイトを 作成してみたいと思います。

コンテナの管理には docker-compose を利用します。

環境

  • macOS 10.15
  • docker version 20.10
  • docker-compose version 1.29
  • nginx 1.21

ディレクトリ構造

以下のようなディレクトリ構造を想定しています。

./docker_test/
 ┣ nginx/
 ┃   ┣ conf.d/default.conf
 ┃   ┗ dockerfile
 ┣ docker-compose.yml
 ┗ src/
     ┣ index.html
     ┗ 50x.html

srcには 静的な Web サイトのソースコードを配置して、それを nginx コンテナに読み 込む形を想定しています。

nginx の設定ファイルの作成

nginx.confについてはイメージ内のデフォルトのものを利用します。必要な方は設定し てください。

nginx/conf.d/default.confの設定に以下を書き込みます。この内容は nginx の初期設 定状態の内容です。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

静的な Web サイトの配置

srcに以下のindex.htmlファイルを配置します。

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>Welcome to my page!</h1>
  </body>
</html>

エラーページを配置します。エラーページは、nginx のデフォルトのものを利用します。

今回は nginx のデフォルトのエラーページを Github レポジトリの50x.htmlを取得し て利用します。

https://github.com/nginx/nginx/tree/master/docs/html

<!DOCTYPE html>
<html>
  <head>
    <title>Error</title>
    <style>
      html {
        color-scheme: light dark;
      }
      body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>An error occurred.</h1>
    <p>
      Sorry, the page you are looking for is currently unavailable.<br />
      Please try again later.
    </p>
    <p>
      If you are the system administrator of this resource then you should check
      the error log for details.
    </p>
    <p><em>Faithfully yours, nginx.</em></p>
  </body>
</html>

docker-compose.yml の作成

今回は image を直接起動する形にします。docker-compose.ymlに以下を書き込みます 。

version: "3"
services:
  nginx:
    image: nginx:1.21-alpine
    container_name: nginx
    hostname: nginx
    ports:
      - 80:80
    volumes:
      - ./nginx/log:/var/log/nginx
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./src:/usr/share/nginx/html

コンテナの起動

docker-compose.ymlがある階層で以下のコマンドを実行してコンテナを起動します。

docker-compose up -d

コンテナの起動を確認します。

docker-compose ps

# 出力
Name               Command               State         Ports
-------------------------------------------------------------------
nginx   /docker-entrypoint.sh ngin ...   Up      0.0.0.0:80->80/tcp

ブラウザでhttp://localhostにアクセスすると 「Welcome to my page!」が表示されて いればコンテナの起動は成功です。

感想

いかがでしたでしょうか？docker、docker-compose を使うと簡単に静的サイトシステム の構築ができます。

SSL 認証を追加する場合は、少しややこしくなりますが、docker でも certbot を利用し て認証ページを公開することも可能です。

サーバに持っていけばすぐに公開できるので、試しに利用してみてください。

ではでは、また次回。