どうも、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 を利用し て認証ページを公開することも可能です。
サーバに持っていけばすぐに公開できるので、試しに利用してみてください。
ではでは、また次回。
