おはこんにちばんは。
ハイパーエンジニアの@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サイトをご確認ください！