はじめに

この記事はRails6をしばらく使用し、ハマった部分、忘れたくないことを将来の自分のためにメモとして残し、公開することで同じようなことをRails6で実現しようとしている方のお役に立てたら、うれしいなと思い書いています。

この記事を読んで「助かったぜ！」、「それは間違ってるぜ！」や「もっとこうした方がいいぜ！」
がありましたら、お知らせ頂ければと思います。

実現したこと

Rails 6.0.3.1のdevelopment環境でwebpack-dev-serverとpumaの起動をforemanで同時に起動しhttpsを使う

なんでdevelopment環境でhttpsを使う必要があるの？

development環境でrails sを実行してRailsアプリ(Server)を起動するとデフォルトではhttpで起動することになります。
ところが、どこかのサービスが提供しているAPIを叩く際、エンドポイントURLをhttpsで指定しなければならない場合がほとんどなのでdevelopmentでAPIを叩いて連携し、目的の情報を正しく取得、加工、表示、できているのかを確認できません。

なんでwebpack-dev-serverを使うの？

Rails6ではデフォルトでJavaScriptの管理がWebpacker環境となりますのでrails sだけだと、ページが表示されるまでに時間がかかり不便なのでwebpack-dev-serverを利用することでファイルが更新されたら勝手にコンパイルしてくれるようにし、開発効率を上げるためです。

なんでforemanを使うの？

Railsアプリを起動する度にrails sとwebpack-dev-serverのコマンドを打つ必要があり、これまた面倒です。
そこで登場するのがforemanです。

要するに

ムダなことに時間をとられたくない
人生(命)を削られたくない
コンピュータを自由自在に操るのが生き甲斐なのに、Rails6のデフォルトだとコンピュータに操られてるみたいで屈辱的なので絶対に許せない

ってことです

SSL証明書どうするの問題の解決

Railsの開発環境でhttpsを使う
https://qiita.com/itkrt2y/items/2837a45061b9a3b711b7
という記事を参考にさせて頂きました。@itkrt2y さん、ありがとうございます！

ただし、Rails6では1箇所だけエラーを引き起こす箇所がありました。
エラー内容
NameError: uninitialized constant #<Class:#<Puma::DSL:0x00007f9070276ea8>>::Rails

該当箇所(1行目のところが原因です)

config/puma.rb

if Rails.env.development?

なので下記のように修正することでエラーを回避しました。

config/puma.rb

if ENV['RAILS_ENV']=='development'

これでrails sを実行します。
すると、config/certs/配下にlocalhost.keyとlocalhost.certが生成されます。

webpack-dev-serverのhttpsを有効化

developmentのdev_serverのhttpsをtrueに変更。下記コードの一番最後の行のところです。

config/webpacker.yml

evelopment:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: true

foremanを使ってラクになる

foreman でアプリケーションを動かす。
https://qiita.com/7kaji/items/6a59977d2ad85604e7fd
という記事を参考にさせて頂きました。 @7kajis さん、ありがとうございます！

インストール

$ gem install foreman

設定

下記の設定ではportを443にしていますが、必要に応じて8443などに変更してください。

Procfile

rails: rails s -b 'ssl://0.0.0.0:443?key=config/certs/localhost.key&cert=config/certs/localhost.cert'
webpack: bin/webpack-dev-server --https

起動!

下記のコマンドを実行し、Railsアプリを起動します。 https://localhost/ にアクセスし、ページが表示されれば成功です。

foreman start

はぁ〜ラクチン。幸せだなぁ。

Rails 6のdevelopment環境でhttpsを使う