1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JINS (ジンズ) Advent Calendar 2024

Day 19

VPSを使ってSSL対応のホームページを公開してみよう(HTTPS-PORTAL編)

Last updated at Posted at 2024-12-19

この投稿は、2024年JINSのアドベントカレンダー19日目の記事です。

どうも、JINS生活4年目の内田と申します。
眉毛を剃るのに失敗してしまったことがございまして、その時にインタビューが来たものだから大変なことになってしまいました。

概要

今回は、VPS上にDockerとDocker Composeをインストールして、自分で用意したHTMLを設置し、オリジナルのドメインでSSL対応のホームページをインターネットに公開するところまでをやります。

↓今回の手順で作成したホームページ↓

用意するもの

  • VPS
    • ConoHa, XServer, さくらのVPS, EC2 等、何でも良いです
    • 仮想化方式にOpenVZが用いられているVPSではDockerが利用できないことがあります(WebArenaの一部インスタンス等)
    • Ubuntu 24.04 LTSを推奨します
  • ドメイン
    • 好きなところで取得してください

この記事の手順でやること

  • SSHポートの変更
  • Docker, Docker Composeのインストール
  • HTTPS-PORTALの設定

この記事の手順でやらないこと

  • VPSの契約、インスタンスの立ち上げ
  • SSH接続の方法や鍵ペアの設定
  • ドメインの契約
  • HTMLのコーディング

やってみよう

1. SSHポートの変更

これは基本です。
サービスを公開するしないにかかわらず、インターネットから接続できるサーバーを用意したら必ず行いましょう。
(代替手段が思いつくレベルの人なら不要です)

VPSサービスでは、AWSやGCP等のサービスと違い、細かなFWの設定ができないケースがあります。
その場合、SSH接続で利用するポートを初期設定のTCP22番にしておくと、世界中の悪い人たちが接続試行をしてきます。
(最悪の場合、サーバーが乗っ取られて犯罪に利用されてしまうことも!)
そのリスクを減らすために、SSHで利用するポート番号を変更します。

今回は、22番から42200番へ変更します。

1-3. 接続確認 が終わるまで、ポート変更前から開いているSSH接続は閉じないでください!
設定に不備があった場合、外部から接続できなくなり、
コンソール接続が不可能なVPSの場合、インスタンスの作り直しになってしまい、大泣きすることになってしまいます。

参考記事:

1-1. ssh.serviceの設定変更

sshd_configをテキストエディタで開く

sudo nano /etc/ssh/sshd_config

コメントアウトを解除(頭の#を削除)しポート番号を22から42200に変更

Port 42200

image.png

ssh.serviceを再起動

sudo systemctl restart ssh.service

1-2. ssh.socketの設定変更

このセクションの手順は、Ubuntu 22.04以前では必要ありません

/lib/systemd/system/ssh.socketをテキストエディタで開く

sudo nano /lib/systemd/system/ssh.socket

ListenStream42200に変更

ListenStream=42200

設定再読み込みと、ssh.socketの再起動

sudo systemctl daemon-reload
sudo systemctl restart ssh.socket

1-3. 接続確認

接続確認が終わるまで、ポート変更前から開いているSSH接続は閉じないでください!
設定に不備があった場合、外部から接続できなくなり、
コンソール接続が不可能なVPSの場合、インスタンスの作り直しになってしまいます。

ポート番号を指定して接続

ssh <user>@<ip> -p 42200

接続が確認できたら、ポート変更前から開いているSSH接続は閉じても大丈夫です。

2. Dockerの設定

とりあえずSSHのポートが変更できたので、22番ポートを執拗に狙ってくる輩への対策はできました!
次はDockerをインストールしてこのサーバー上で利用できるようにしましょう。

2-1. Dockerのインストール

以下コマンドでインストール

curl https://get.docker.com | sudo sh

2-2. sudoコマンドなしでDockerを利用できるようにする

この手順は業務で使うサービスの本番環境では行わないでください。
(業務用本番環境ではRootlessモードを設定してください)

sudo usermod -aG docker $USER

一旦ログアウト(切断)をし、再接続後、以下のコマンドを実行

docker version

以下のように出力されれば問題なし

Client: Docker Engine - Community
 Version:           27.4.1
 API version:       1.47
 Go version:        go1.22.10
 Git commit:        b9d17ea
 Built:             Tue Dec 17 15:46:31 2024
 OS/Arch:           linux/arm64
 Context:           default

Server: Docker Engine - Community
 Engine:
  Version:          27.4.1
  API version:      1.47 (minimum version 1.24)
  Go version:       go1.22.10
  Git commit:       c710b88
  Built:            Tue Dec 17 15:46:31 2024
  OS/Arch:          linux/arm64
  Experimental:     false
 containerd:
  Version:          1.7.24
  GitCommit:        88bf19b2105c8b17560993bee28a01ddc2f97182
 runc:
  Version:          1.2.2
  GitCommit:        v1.2.2-0-g7cb3632
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

3. 資材の作成

Dockerをサーバーいれることができました。
後は設定ファイルとホームページのコンテンツとなるHTMLを用意したらサーバーにいれるものは全て用意できたことになります!

example.com は、ご自身で取得したドメインに読み替えてください。

全ファイル配置後のツリー

.
├── Dockerfile
├── docker-compose.yml
└── vhosts
    └── www.example.com
        └── index.html

3-1. HTMLファイルの配置

内容は何でもよいです

vhosts/www.example.com/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>www.example.com</title>
  </head>
  <body>
    <h1>www.example.com</h1>
  </body>
</html>

3-2. Dockerfileの記述

Dockerfile
FROM steveltn/https-portal:1

COPY ./vhosts/ /var/www/vhosts/

ENTRYPOINT ["/init"]

3-3. docker-compose.ymlの記述

docker-compose.yml
version: '3'
services:
  https-portal:
    build:
      context: .
    restart: always
    volumes:
      - ssl-certs:/var/lib/https-portal
    environment:
      DOMAINS: >
        www.example.com,
        example.com => www.example.com
      # 疎通確認ができるまで、STAGEはlocalにしておくこと
      STAGE: local
    ports:
      - '80:80'
      - '443:443'
    logging:
      options:
        max-size: '200k'
        max-file: '10'

volumes:
  ssl-certs:

ログの最大サイズを指定することで、サーバーのストレージがログで一杯にならないようにしています。

    logging:
      options:
        max-size: '200k'
        max-file: '10'

4-2. HTTPS-PORTALを立ち上げ、疎通確認を行う が終わり、疎通確認ができるまではSTAGEproductionにしないでください。
HTTPS-PORTALを立ち上げた時にSSL証明書を取得する処理が走りますが、その時点でサーバーがインターネットよりアクセスできる状態になっていないと、Let's Encryptのレート制限に当たってしまい、しばらく同じドメインでの証明書取得ができなくなってしまいます。

      # 疎通確認ができるまで、STAGEはlocalにしておくこと
      STAGE: local

4. 公開設定をする

もう一歩です!
後は取得したドメインとサーバーを紐づけたら完了です!

example.com は、ご自身で取得したドメインに読み替えてください。

4-1. DNS設定

ドメインを取得したサービスでAレコードの設定を行いましょう。

設定値は

Host Type Value
example.com A VPSのパブリックIPアドレス
www.example.com A VPSのパブリックIPアドレス

各サービスによって手順が異なりますが、今回はお名前.comでの手順を紹介します。

管理画面のサイドバーより ドメイン > ドメイン機能 を選択
image.png

DNS関連機能の設定 を選択
image.png

設定対象のドメインを選択し、次へ進む
image.png

DNSレコード設定を利用する の横にある 設定する ボタンを選択
image.png

Aレコードを設定する
確認画面に進んだ後、完了画面まで行くこと(忘れがちです)
image.png

4-2. HTTPS-PORTALを立ち上げ、疎通確認を行う

docker-compose.yml が存在するディレクトリで下記コマンドを実行

docker compose up -d --build

立ち上がったら、ブラウザで、 https://example.com にアクセスしてください。

証明書エラーが出るはずなので、example.comにアクセスする(安全ではありません)をクリックし、3-1 で設置したHTMLが表示されれば疎通確認は完了です。

image.png

4-3. 環境変数を本番設定に変更し、SSL証明書を取得

3-3 で設置したdocker-compose.ymlを編集し、STAGEproductionにします。

docker-compose.yml
version: '3'
services:
  https-portal:
# ----- 省略 -----
      STAGE: producrion
# ----- 省略 -----

4-2. HTTPS-PORTALを立ち上げ、疎通確認を行う が終わり、疎通確認ができるまではSTAGEproductionにしないでください。
HTTPS-PORTALを立ち上げた時にSSL証明書を取得する処理が走りますが、その時点でサーバーがインターネットよりアクセスできる状態になっていないと、Let's Encryptのレート制限に当たってしまい、しばらく同じドメインでの証明書取得ができなくなってしまいます。

再びアクセスすると、証明書エラーが出なくなっているはずです!
お疲れ様でした!

終わりに

実のところ、HTTPS-PORTALの本来の用途は静的コンテンツサーバーではございません。
次回は、本来の使い方であるSSL終端用のリバースプロキシとして設定する方法をご紹介したいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?