Zenn
🏠

VPSとDockerで作る会社ホームページ

2023/11/21に公開
Docker
Ubuntu
nginx
Web
SSL 証明書
tech

背景

今回は特に大きな理由はありませんが、何となく何でも自前で作ってしまいたい精神の元、VPS(Virtual Private Server)を借りて会社HP(Home Page)を作成してみる事にしました。

本記事では、「Web ページが表示できるまで」を対象に記事を書いていきます。

構成図

適当な VPS に Ubuntu をインストールし、Docker Container 内に Web サービス( Nginx )を構築します。

事前準備

VPS

自前の PC でも良いのですが、VPS の方がプライベートな環境と分けれるのでセキュリティ面で安心です。私は安いのでよく KAGOYA JAPAN を利用しています。

Ubuntu

VPS の方はインスタンスのOSインストール画面で Ubuntu 22.04 を選びましょう。

Docker

公式HP を参考にインストールします。

ドメイン取得

サーバーに振り分けられた IPアドレス を名前で指定できるようにするために、ドメインの取得が必要です。ドメインが固定されると、例えばサーバーを変えてIPアドレスが変わったとしても、再度ドメインをIPアドレスに紐づければ、ユーザーから見れば同じように使えます。

インターネット上で使用できるドメイン名は当然重複があってはいけませんので、特定の組織によって管理されています。ドメイン名登録業者を通じて、私たちは使用したいドメイン名の申請・登録を行います。参考

作成手順

Image download

Docker container を作るための image を download します。ここで使用する iamge は Ubuntu 22.04 とします。

sudo docker pull ubuntu:22.04

Container Run

次のコマンドで container を起動します。Port は80と443を使用します。/home/share はファイルをHost / Container 間で共有するための適当なディレクトリです。任意に変更してください。

sudo docker run -itd --name web -p 443:443 -p 80:80 -v /home/share:/home/share ubuntu:22.04 /bin/bash --login
sudo docker exec -it web /bin/bash

Nginx ( and other modules ) install

Web サービスの作成に必要な module を install します。

apt update
apt install -y nginx openssl vim cron rsyslog

Rsyslog

後々設定する cron の log を有効にするために、rsyslog の config を書き換えます。

vi /etc/rsyslog.d/50-default.conf

cron の箇所をコメントアウトします。

- #cron.*                          /var/log/cron.log
+ cron.*                          /var/log/cron.log

rsyslog を起動します。

rsyslogd

SSL証明書 ( Let’s Encrypt )

Google Chrome などのブラウザで正しくページを表示させるためには、正しいSSL証明書が設定されている必要があります。正しい証明書というのは、第三者の機関が保証しているような証明書で、自前で用意したような証明書ではありません。本来有料のものが多いのですが、今回は無料で証明書を発行してくれる Let’s Encrypt を利用します。

コマンドラインで利用するため、module を install します。

apt update
apt -y install certbot

次に、証明書を発行します。初回利用時にはいくつか登録が必要です。また、弊社ドメイン名は tanukinet.jp なので、適宜変更してください。-w には web ページのルートディレクトリを、 -d にはドメイン名を記載してください。

certbot certonly --webroot -w /var/www/html -d tanukinet.jp

次のようなメッセージが表示されるので、適宜メールアドレスや「Y」を入力します。

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel): mymailaddress@gmail.com

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.3-September-21-2022.pdf. You must
agree in order to register with the ACME server. Do you agree?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: N

正常に完了すると、以下に証明書ファイルが作成されています。tanukinet.jp はドメイン名です。

ll /etc/letsencrypt/live/tanukinet.jp

drwxr-xr-x 2 root root 4096 Nov 21 21:51 ./
drwx------ 3 root root 4096 Aug  5 12:12 ../
-rw-r--r-- 1 root root  692 Aug  5 12:12 README
lrwxrwxrwx 1 root root   36 Nov 21 21:51 cert.pem -> ../../archive/tanukinet.jp/cert4.pem
lrwxrwxrwx 1 root root   37 Nov 21 21:51 chain.pem -> ../../archive/tanukinet.jp/chain4.pem
lrwxrwxrwx 1 root root   41 Nov 21 21:51 fullchain.pem -> ../../archive/tanukinet.jp/fullchain4.pem
lrwxrwxrwx 1 root root   39 Nov 21 21:51 privkey.pem -> ../../archive/tanukinet.jp/privkey4.pem

4つのファイルが作成されていますが、必要なのは2つです。fullchain.pem が公開鍵で、privkey.pem が秘密鍵となっています。
※その他ファイルの補足

Nginx で他のSSL証明書にも切り替えられるようにするため、リンクファイルを作成してきます。

ln -f -s /etc/letsencrypt/live/tanukinet.jp/privkey.pem /etc/nginx/ssl/ssl.key # -f is "force to replace"
ln -f -s /etc/letsencrypt/live/tanukinet.jp/fullchain.pem /etc/nginx/ssl/ssl.crt

また、証明書の更新を自動で行うために、cron にタスクを設定します。

cp /etc/crontab /etc/crontab.`date "+%Y%m%d%H%M%S"`
echo "00 1,13 * * *   root    certbot renew --no-self-upgrade" >> /etc/crontab
/etc/init.d/cron restart

Nginx config

Nginx の設定ファイルを開きます。

vi /etc/nginx/conf.d/homepage.conf

次の設定を記載します。tanukinet.jp のドメイン名は適宜変更してください。

server {
    listen      80;
    server_name tanukinet.jp;
    return 301  https://$host$request_uri;
}

server {
    listen 443 ssl;
    ssl_certificate     /etc/nginx/ssl/ssl.crt;
    ssl_certificate_key /etc/nginx/ssl/ssl.key;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name tanukinet.jp;
    location / {
            try_files $uri $uri/ =404;
    }
}

テスト

以下のコマンドで HTML を作成し、サービスを再起動します。

echo "Hi" > /var/www/html/index.html
/etc/init.d/nginx restart

ブラウザで https://domain-name/ を開き、問題無い事を確認します。

Discussion