Rails
Webpacker 的 HTTPS 設定
到底誰沒事會在開發環境用上 HTTPS Part 2
Rails 6.0 後 Webpacker 已經取代 Asset Pipeline 成為預設的前端打包方案，安裝方法 Webpacker Github 上的 README 有很詳盡的說明：
上一篇文章中，介紹了如何在 Rails development 環境中使用 HTTPS 連線至 localhost server，並啟用 HSTS。
此時用預設的 config/webpacker.yml 下去啟用 webpack-dev-server，其編譯後的 JavaScript 依然以 HTTP 提供。
但 Rails server 的 HSTS 設定會把http://localhost:3000/packs/js/application-2be7c5d587f23021bfe9.js
轉換成請求https://localhost:3000/packs/js/application-2be7c5d587f23021bfe9.js
這下就發生找不到資源的錯誤了：
GET https://localhost:3000/packs/js/application-2be7c5d587f23021bfe9.js net::ERR_ABORTED 500 (Internal Server Error)
localhost/:10Failed to load resource: the server responded with a status of 500 (Internal Server Error)
application-2be7c5d587f23021bfe9.js:1Rack app error handling request { GET /packs/js/application-47a01f2c35f03c5131aa.js }
#<EOFError: end of file reached># ORPuma caught this error: end of file reached (EOFError)# ORGET https://localhost:3035/sockjs-node/info?t=1570436376957 net::ERR_SSL_PROTOCOL_ERROR
sockjs.js:1796Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
:3035/sockjs-node/info?t=1570436373828:1
webpack-dev-server
啟用 HTTPS
修改 config/webpacker.yml 將 development.dev_server.https 設為 true
config/webpacker.yml重啟 rails server 與 ./bin/webpacker-dev-server 後，還是錯的！
# HTTPS 憑證錯誤Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID
:3035/sockjs-node/info?t=1570452520941:1GET https://localhost:3035/sockjs-node/info?t=1570452524158 net::ERR_CERT_AUTHORITY_INVALID
指定憑證
webpack-dev-server 指定憑證的方式可以看
在上一篇我們將 mkcert 自簽的憑證放在 config/ssl/ 下，於是我們必須修改 config/webpacker.yml 指定 development.dev_server.https.cert 與 development.dev_server.https.key 使用憑證，如下：
config/webpacker.yml你以為成功了嗎？重啟 rails server 與 ./bin/webpacker-dev-server 後，還是錯的！
原因在於 4.0.7 版的 Webpacker 忽略了我們傳入的 https 參數，只 care 是否為 true。
直到這個 PR 才修正了這個錯誤。
因此，我們至少需要指定 Gem Webpacker 版本號到 commit d577bab 以後，直到 4.0.8 版釋出：
# Gemfilegem "webpacker", git: 'https://github.com/rails/webpacker.git', ref: 'd577bab'
bundle 安裝更新套件，重啟 rails server 與 ./bin/webpacker-dev-server 後，就能成功囉！
但如果你的 Content Security Policy 像我一樣設定錯誤，忘了加上 https:// 與 wss:// 的話，我只能說：「革命尚未成功，同志仍需努力。」
# Content Security Policy 設定錯誤Refused to connect to 'wss://localhost:3035/sockjs-node/661/ghika1m3/websocket' because it violates the following Content Security Policy directive: "connect-src 'self' https: http://localhost:3035 ws://localhost:3035".
sockjs.js:1887
設定 Content Security Policy
到 config/initializers/content_security_policy.rb 下
添加https://localhost:3035 與 wss://localhost:3035 到 policy.connect_src 中：
這下總算是成功在 development 環境下全面啟用 SSL 囉！
有人問我說為何我不直接把成功的設定分享給讀者，要帶著讀者一起錯過來，原因有三：
- 這樣讀者能夠理解是哪個部分導致錯誤
- 把常遇到的相關錯誤記錄下來，方便同踩此坑的兄弟們 Google
- 我花了 6 個小時 debug，你們直接過，我心裡不平衡啦
