【Docker】nginx + https-portalを使ってWebサイトをHTTPSでデプロイする話 

おはこんにちばんは。
ハイパーエンジニアの[@FL1NE](https://twitter.com/FL1NE)です。

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

今回はそう言った悩みを[Docker](https://www.docker.com/)の[nginx](https://nginx.org/)コンテナと[https-portal](https://github.com/SteveLTN/https-portal)コンテナを使って解決していきます。


## 何

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

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

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

### 必要なもの

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

### リポジトリ

https://github.com/FL1NE/nginx-https-container-example


## 下準備

### テストページを用意する

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

```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`を作っておいてビルドできるようにします)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127603/a759b60a-44e5-d6eb-0407-c096e9b77551.png)

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


## https-portalでHTTPS化する

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

```yaml
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で接続できていれば完了です。
(初回は証明書発行の時間などがあるので少し起動に時間がかかります)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127603/1b5e2110-e749-8b8e-5b53-db80fce55efd.png)


## 終わりに

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

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

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

ではでは。


### 参考資料

- [Let's Encrypt でhttps化してくれるコンテナ (https-portal) | Qiita](https://qiita.com/tukiyo3/items/590f3284d992fe5d03fa)

- [https-portal (GitHub)](https://github.com/SteveLTN/https-portal)

- [Let's Encrypt](https://letsencrypt.org/)


### 宣伝等

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

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

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