Programming from 30

自分の備忘録が、誰かの為になれば・・

Railsの開発環境でhttps接続する!

omniauthを使用し、facebook認証をする時に詰まったので備忘録

ローカルの開発環境で、facebook認証をする際にこの接続ではプライバシーが保護されませんとエラーが出た。

原因として

  • Chromeが去年リリースしたchrome58から証明書の中の項目のCN(Common Name)の利用を非推奨化し、SAN(Subject Alternative Name)の方を利用する仕様になったため。

  • 作ったオレオレ証明書が信用に値しないため

多くの方が取っている方法として、オレオレ証明書を作成する事で解決しているが、なぜかうまくいかなかった。そこで見つけたのが、
github.com

mkcert automatically creates and installs a local CA in the system root store, and generates locally-trusted certificates. mkcert does not automatically configure servers to use the certificates, though, that's up to you.

mkcertはローカルに認証局を作成し、自身で証明書を発行する。証明書を使う為にサーバーの設定が必要。

mac

まずはインストール

brew install mkcert

認証局を作成

$ mkcert -install
Created a new local CA at "/Users/ishikawatsubasa/Library/Application Support/mkcert" 💥
Password:
The local CA is now installed in the system trust store! ⚡️
Warning: "certutil" is not available, so the CA can't be automatically installed in Firefox! ⚠️
Install "certutil" with "brew install nss" and re-run "mkcert -install" 👈

証明書を作成

$ mkcert localhost
Using the local CA at "/Users/ishikawatsubasa/Library/Application Support/mkcert" ✨
Warning: the local CA is not installed in the Firefox trust store! ⚠️
Run "mkcert -install" to avoid verification errors ‼️

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem"

Pumaの設定を記述

if ENV.fetch('RAILS_ENV') { 'development' } == 'development'
  ssl_bind '0.0.0.0', '9292', {
    key: 'tmp/localhost-key.pem',
    cert: 'tmp/localhost.pem'
  }
end

これでhttps接続完了!!!https://localhost:9292/にアクセス

f:id:tsubasa0105:20190216190045p:plain
https確認

開発環境で確認をするだけなら3行のコードで準備が完了。もしオレオレ証明書を作ってうまく行かなければmkcertでサクッと時短がベターな気がします。

:参考 Railsの開発環境でHTTPSを有効にする