おはこんにちばんは。
ハイパーエンジニアの@FL1NEです。

HTTPSでWebサイトを展開するのって何気にめんどくさいですよね。
Webサーバーは構築しないといけないし、Let's Encryptとかで証明書も取得しないといけないし。。。

今回はそう言った悩みをDockerのnginxコンテナとhttps-portalコンテナを使って解決していきます。

何

HTTPSでサーバーをデプロイするのがめんどくさいのでそれをDockerで楽にする話

なお、https-portalはnginxがベースとなっており、リバースプロキシとしても使えるので複数サイトをサブドメインで同一サーバーにホストする際もオススメ

(ちなみにDockerのオーバーヘッドとかよりもデプロイの楽さをとっているので、そちらが気になる人は自前でネイティブ実装してどうぞ)

必要なもの

サーバー (Dockerが動けばなんでもいいっす)
ドメイン (httpsの証明書取得とかで必要なので)
Docker + Docker-compose
ポート開放とかの基礎知識

リポジトリ

下準備

テストページを用意する

今回の解説では単純なhtmlファイルをデプロイすることにするので、html/index.htmlを作成しておきます。

<!DOCTYPE html>
<html>
    <head>
        <title>テストページ</title>
        <meta http-equiv="content-type" charset="UTF-8">
        <style>
            html { color-scheme: light dark; }
            body { width: 35em; margin: 0 auto;
            font-family: Tahoma, Verdana, Arial, sans-serif; }
        </style>
    </head>
    <body>
        <h1>テストページ</h1>
        <p>ただのテストページっす</p>
    </body>
</html>

nginxのDockerコンテナを作成する (Webサーバー)

下準備も終わったのでまずはテストページを含んだDockerコンテナを作ります。
(Dockerfileを作っておいてビルドできるようにします)

FROM nginx:alpine
WORKDIR /usr/share/nginx/html
COPY ./html /usr/share/nginx/html

試しにビルドして実行してみます

docker build -t nginx-website:latest .
docker run -d -p 8888:80 nginx-website

http://localhost:8888にアクセスして以下のようなページが表示されてればOKです。

これでひとまずWebサーバーのコンテナは作成できました。

https-portalでHTTPS化する

https-portalの設定と先ほど作成した

version: '3'

services:
  https-portal:
    image: steveltn/https-portal:latest
    container_name: https-portal
    ports:
      - 80:80
      - 443:443
    links:
      - nginx-website
    restart: always
    environment:
      DOMAINS: '[ドメイン名] -> http://nginx-website'
      STAGE: 'production' #テスト時はコメントアウト推奨

  nginx-website:
    image: nginx-website
    container_name: nginx-website
    restart: always

このように設定を書きます。

[ドメイン名] のところは利用したいドメインに書き換えてください。
(例: example.com や hoge.example.comのようなドメイン名)

また、DNSの設定やファイヤーウォールの設定などを正しく設定しておきましょう
ポートは以下のものが解放されている必要があります。

80/tcp (httpアクセスを受け、301でhttpsサイトへ飛ばすのに必要)
443/tcp (httpsでアクセスを受けるのに必要)

これらの設定ができたら、docker-compose upでコンテナ群を起動します。

docker-compose up -d

設定したドメイン名にWebブラウザからアクセスし、httpsで接続できていれば完了です。
(初回は証明書発行の時間などがあるので少し起動に時間がかかります)

終わりに

以上の手順で開発したWebサイトなどを楽にhttps化することができました。
https-portalにhttps化を一任することによっていちいち自前でリバースプロキシを用意したりcertbotの設定とかを行わなくて済むようになり便利だと思います。

今回はwebサイトをnginxのコンテナにしてアクセスを受け付けましたが、Dockerのコンテナや同じネットワークに存在するマシンなどは同じようにhttps-portalを使って楽にhttps化できます。
ぜひ皆さんもWebサイトをhttps対応しましょう!

今回紹介しなかった別の設定手法などは参考資料のQiitaページが非常にわかりやすくていいので読んでみてください。

ではでは。

参考資料

宣伝等

GUNCY'S (グンシーズ)
株式会社GUNCY'Sでは社内や顧客の要望などを一緒に解決へ導くメンバーを広く募集しています。
興味がある方は是非採用ページをご覧ください！

FRONTL1NE (フロントライン)
FRONTL1NEは日本のデモシーンなどをはじめとしたクリエイティブな活動や、ゲーム、プログラミング、音楽、映像など様々な分野に興味を持つな人が集うWebサイト・コミュニティです。
是非WebサイトやDiscordを覗いてみてください!

Tokyo Demo Fest (東京デモフェスト)
Tokyo Demo Festは日本唯一のデモシーン(メガデモ)イベント = デモパーティです。
デモパーティは、コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーなどを行います。また、イベント開催中は集まった様々な人たちとの交流が深められます。
最新の情報はTwitterやWebサイトをご確認ください！