Rails + Puma + React のローカル環境で HTTPS 接続してみる

概要

Rails + Puma + React のローカル開発環境でどうしても HTTPS 接続したいときがあったので、ローカル環境で HTTPS 接続するための手順を残します。

手順

1. 自己証明書作成

プロジェクトディレクトリで下記コマンドを実行する。

$ cd /Users/owner/git/hoge
$ openssl genrsa -out ./localhost.key 2048
$ sudo openssl req -new -x509 -key ./localhost.key -out ./localhost.crt -days 3650 -subj /CN=localhost

2. Puma 設定ファイル編集

config/puma.rb

# HTTPS 利用可能設定
if "development" == ENV.fetch("RAILS_ENV") { "development" }
  ssl_bind '0.0.0.0', '3001', {
    key: "/Users/owner/git/hoge/server.key",
    cert: "/Users/owner/git/hoge/server.crt",
    verify_mode: "none"
  }
end

3. Webpacker 設定ファイル編集

dev_server の https: false を https: true に変更する。　

config/webpacker.yml

development:
  <<: *default

  dev_server:
    host: 0.0.0.0
    port: 8080
    https: true

4. 動作確認

https://localhost:3001/ にアクセスして HTTPS でアクセスできることを確認する。
ローカル環境でも HTTPS を利用した動作確認ができるようになりました。