シグナル・コンポーズ株式会社の大和です。

今月9月から11月に渡って「岐阜クリエーション工房2020」で委託事業として、ワークショップ「“新しい日常”から生まれる DanceDrivenMusic〜音楽を見つけるためのワークショップ〜」を行っています。
オンラインでの難しい開催ではありますが、おかげさまで参加者も集まり、先日一回目を楽しく終えることが出来ました。

本ワークショップは、弊社の森田、大石のディレクションの元で、大久保雅基さんとNode.js, Express, Socket.io, Teachable machineといった内容でワークショップ用のウェブアプリケーションを組んでいます。

Webカメラが有効にできなかったので、CertBotで証明書を作る

このワークショップではウェブカメラをブラウザから使う必要があるのですが、ブラウザからカメラを使う場合httpsで接続をしないとカメラが有効になりません。
オレオレ証明書でも良いかな、と思って試しにやってみましたが、

• 今はそれも手順が増える
• 参加者への負担が増える（設定など）
• 最近は https://letsencrypt.org などを使えばきちんとした証明書を発行することも楽になった（ただし3ヶ月毎の更新が必要）

ということで、普通にドメインをとって証明書を発行しようと思います。
ドメインはexample.com とし、実際のアプリケーションはapp.example.com として考えてみます。

サブドメインまでを一つの証明書にしても良かったのですが、appがつかない方のexample.comなどはアーカイブページとして別にGithub Pages などでプロジェクトのページを作る可能性があるので、今回の証明書はapp.example.com で取っています。手順としては以下のような感じになります。

1. Expressでhttps, httpが有効になったアプリケーションを作る
2. CertBotで証明書を作る
3. その過程でACMEチャレンジを1. のhttpが有効になったディレクトリで行い証明書の発行を行う
4. 証明書の保存先へのアクセス権限を変更する
5. Expressでhttpsの証明書の設定をする

です。一つひとつやり方を書くと長くなるのと自分も他の方のページを参考にしながら進めたので、そこを下記におきます。

まず、1. 4. 5. に関しては以下のページを参考にしました。

Node.js + Express で強制的にHTTPS通信を行う:まだプログラマーですがなにか？：
http://dotnsf.blog.jp/archives/1076367042.html

こちらのページでの以下の部分

http / https 両方でのアクセスに対応するには以下のように改良します：

のところのソースを参考にすると、
まずhttp / https両方でのアクセスができるようになります。
後からhttpsだけにリダイレクトする方法も書いてあるので、必要に合わせてhttp側の処理は考えれば良いでしょう。

【HTTP 通信をしない（HTTPS へ転送）】
最後に、上記プログラムを更に改良して HTTP 通信をしない（強制的に HTTPS 通信に転送する）ための設定を加えます。それには Strict-Transport-Security ヘッダを付けてレスポンスを返すことで実現できます：

そして2. 3. の部分については、こちらを参考にしました。

MacOS に CertBot を入れて Let's Encrypt 証明書を作ってみる：
https://neos21.hatenablog.com/entry/2019/03/11/080000

brewではいるcertbotの現在のバージョンは、、

➜  ~ certbot --version
certbot 1.8.0

このようになりますが、特に上記と違いはありません。
今回はドメイン全体ではなくサブドメインの範囲の証明書が欲しかったので、ドメインを入力するところではapp.example.comとしています。

終わりに

という感じでライトな記事になりましたが、お役に立てれば幸いです。
シグナル・コンポーズ株式会社では、音楽・アート／デザイン／プログラミングといった幅広いお仕事をお受けしています。
どうぞお気軽にお問い合わせください！！

お問い合わせフォーム はこちら

執筆：大和 比呂志