發表更新技術文章5 分鐘讀完 (大約758個字)

Rails Webpacker 的 HTTPS 設定

本文原發表於 Medium，2026-10-27 搬移至此。

到底誰沒事會在開發環境用上 HTTPS Part 2

Rails 6.0 後 Webpacker 已經取代 Asset Pipeline成為預設的前端打包方案，安裝方法 Webpacker Github 上的 README 有很詳盡的說明：

rails/webpacker

上一篇文章中，介紹了如何在 Rails development 環境中使用 HTTPS 連線至 localhost server，並啟用 HSTS。

Rails 在開發環境中啟用 HTTPS

此時用預設的 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
這下就發生找不到資源的錯誤了：

1
2
3
4
5
6
7
8
9
10
11
GET https://localhost:3000/packs/js/application-2be7c5d587f23021bfe9.js net::ERR_ABORTED 500 (Internal Server Error)  
localhost/:10
Failed to load resource: the server responded with a status of 500 (Internal Server Error)  
application-2be7c5d587f23021bfe9.js:1
Rack app error handling request { GET /packs/js/application-47a01f2c35f03c5131aa.js }  
#<EOFError: end of file reached># ORPuma caught this error: end of file reached (EOFError)
# OR
GET https://localhost:3035/sockjs-node/info?t=1570436376957 net::ERR_SSL_PROTOCOL_ERROR  
sockjs.js:1796
Failed 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 後，還是錯的！

1
2
3
4
# HTTPS 憑證錯誤
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID  
:3035/sockjs-node/info?t=1570452520941:1
GET https://localhost:3035/sockjs-node/info?t=1570452524158 net::ERR_CERT_AUTHORITY_INVALID

指定憑證

webpack-dev-server 指定憑證的方式可以看

DevServer | webpack

在Rails 在開發環境中啟用 HTTPS我們將 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。

./bin/webpack-dev-server command line arguments are ignored · Issue #2000 · rails/webpacker

直到這個 PR 才修正了這個錯誤。

coerce https yaml config to boolean by hwhelchel · Pull Request #2251 · rails/webpacker

因此，我們至少需要指定 Gem Webpacker 版本號到 commit d577bab 以後，直到 4.0.8 版釋出：

1
2
# Gemfile
gem "webpacker", git: 'https://github.com/rails/webpacker.git', ref: 'd577bab'

bundle 安裝更新套件，重啟 rails server 與 ./bin/webpacker-dev-server 後，就能成功囉！

但如果你的 Content Security Policy 像我一樣設定錯誤，忘了加上 https:// 與 wss:// 的話，我只能說：「革命尚未成功，同志仍需努力。」

1
2
3
# 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 囉！

有人問我說為何我不直接把成功的設定分享給讀者，要帶著讀者一起錯過來，原因有三：

  1. 這樣讀者能夠理解是哪個部分導致錯誤
  2. 把常遇到的相關錯誤記錄下來，方便同踩此坑的兄弟們 Google
  3. 我花了 6 個小時 debug，你們直接過，我心裡不平衡啦
發表更新技術文章5 分鐘讀完 (大約786個字)

Rails 在開發環境中啟用 HTTPS

本文原發表於 Medium，2026-10-27 搬移至此。

到底誰沒事會在開發環境用上 HTTPS

ssl on local

現今許多公司為了提升安全性，只提供服務給有 HTTPS 連線的網路應用程式，如 Facebook 登入：

Login Security - Facebook Login - Documentation - Facebook for Developers

使用 HTTPS

使用具有加密功能的 HTTPS 作為網際網路通訊協定，而非 HTTP。HTTPS 會維護傳送資料的隱私，保護其不受竊聽攻擊。此外，也能保護資料在傳送過程中不遭到置入廣告或惡意程式碼的竄改。

在 2018 年 10 月 6 日，所有應用程式都必須使用 HTTPS。

這也導致在開發或測試環境時常會因為開發環境沒有設置 SSL 而出錯，本例Facebook 中有兩種解法：

  1. 建立 development 與 production mode 兩種 Facebook 應用程式，development mode 下 Facebook 依然願意提供服務給開發者。
  2. 開發端使用 SSL

本篇文章將介紹比較省事的選項 2，讓你能夠以 https://localhost:3000 開發

設定 SSL

mkcert

使用 mkcert 自簽 cert，沒安裝者須先進行安裝：

1
2
3
4
$ brew install mkcert nss  
$ mkcert -install
Created a new local CA at "/Users/filippo/Library/Application Support/mkcert" 💥  
The local CA is now installed in the system trust store! ⚡️

簽署憑證：

1
2
3
4
5
6
$ cd project  
$ mkcert localhost
Using the local CA at "/Users/username/Library/Application Support/mkcert" ✨
Created a new certificate valid for the following names 📜  
 - "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

把憑證移到 config/ssl/下

1
2
$ mkdir config/ssl  
$ mv localhost-key.pem localhost.pem config/ssl

Rails configuration

在 config/puma.rb 中設定 SSL 服務：

1
2
3
4
5
6
7
8
9
10
11
# Remove  
port        ENV.fetch("PORT") { 3000 }  
environment ENV.fetch("RAILS_ENV") { "development" }
# Add  
if ENV.fetch('RAILS_ENV') { 'development' } == 'development'  
  # using mkcert self-signed cert enable ssl  
  ssl_bind '0.0.0.0', ENV.fetch('PORT') { 3000 }, cert: 'config/ssl/localhost.pem', key: 'config/ssl/localhost-key.pem'  
else  
  port        ENV.fetch('PORT') { 3000 }  
  environment ENV.fetch('RAILS_ENV') { 'development' }  
end

在 config/environments/development.rb 中強制所有連線使用 SSL 連線：

1
config.force_ssl = true

重啟 dev server，開始在開發環境上用 HTTPS 連線吧！

1
$ rails s

可能會遇到的問題

Puma 沒有使用正確的 SSL 設定

1
2
3
SSL error, peer: 127.0.0.1, peer cert: , #<Puma::MiniSSL::SSLError: OpenSSL error: error:141F7065:SSL routines:final_key_share:no suitable key share - 337604709>
# OR
HTTP parse error, malformed request (): #<Puma::HttpParserError: Invalid HTTP format, parsing fails.>

使用最新的 Puma(>4.2.0)。

無法從 webpack-dev-server 取得編譯後的 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR  
:3035/sockjs-node/info?t=1570436373828:1
# OR
GET https://localhost:3035/sockjs-node/info?t=1570436376957 net::ERR_SSL_PROTOCOL_ERROR  
sockjs.js:1796
# OR
GET https://localhost:3000/packs/js/application-2be7c5d587f23021bfe9.js net::ERR_ABORTED 500 (Internal Server Error)  
localhost/:10
# OR
Failed to load resource: the server responded with a status of 500 (Internal Server Error)  
application-2be7c5d587f23021bfe9.js:1
# OR
Rack app error handling request { GET /packs/js/application-47a01f2c35f03c5131aa.js }  
#<EOFError: end of file reached>
# OR
Puma caught this error: end of file reached (EOFError)
# OR
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID  
:3035/sockjs-node/info?t=1570452520941:1
GET https://localhost:3035/sockjs-node/info?t=1570452524158 net::ERR_CERT_AUTHORITY_INVALID
# OR
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

webpack-dev-server 也要記得上 SSL，提供 https:// 與 wss:// 等連線方式。

如何在 Rails Webpacker 為 webpack-dev-server 設定 https 可以看看我的這篇文章：

Rails Webpacker 的 HTTPS 設定

References

發表更新技術文章2 分鐘讀完 (大約230個字)

Heroku 上執行 Rails app 的定時任務（Scheduled Task）

一般 Rails app 的定時任務是把 ActiveJob 包成一個 rake task 並透過 crontab 執行。這種架構的適合用在分鐘級別以上的定時任務。

但是 Heroku 並沒有提供 crontab 指令，在 Heroku 上運行定時任務必須用到一個 addon：Heroku Scheduler

Heroku Scheduler

  1. 到 Heroku App dashboard
  2. Resouces 頁籤
  3. 新增一個 Heroku Scheduler 的 addon
  4. Add new job
  5. 輸入指令 ，並設定執行頻率。這邊以每月 25 號寄送生日通知信為例 ( rails mail:birth_notification )，我設定頻率為每天，它每天都會檢查今天是不是 25 日，是則執行後面的指令
1
2
# every months 25th do this rake task
if [ "$(date +%d)" = 25 ]; then rails mail:birth_notification; fi

Heroku Scheduler 最小只提供間距為 10 分鐘級別的定時任務，若要更精細，只能使用應用層級的定時排程了例如:

發表更新技術文章2 分鐘讀完 (大約284個字)

Rails 的 sidekiq 設置筆記

Sidekiq 是一個能夠並發處理 Ruby 任務的套件，大致上的運作方法是：將任務 push 至 redis 的 queue 中，sidekiq 的 workers 再到 queue 一個個 pop 任務出來運算。

安裝

1
2
# Gemfile
gem 'sidekiq'
1
bundle install
繼續閱讀
追蹤

連結

分類

最新文章

彙整

標籤

alternative1
angular2
baidu1
boot-configuration-data1
brew2
c#2
changelog1
chatbot1
cloudflare2
code of conduct1
coding style1
contributing1
cuda1
data visualization1
deploy1
development1
dns3
docker1
documentation1
email1
eslint1
formatter1
free4
github1
gpu1
graph1
heroku3
hexo1
hexo-theme1
https3
illustrator1
index1
javascript1
kill1
license1
line1
linter1
localhost1
mac1
macbook1
mkcert1
nlp2
nvidia gpu driver1
os-x1
osx3
pid1
powershell1
prettier1
proxy1
python2
rails5
rdbms1
readme1
repository1
rich menu1
ruby6
rvm1
rxjs1
sendgrid1
sentiment1
sidekiq1
ssl4
state management1
tensorflow1
terminal1
ubuntu3
vscode1
webpack-dev-server1
webpacker1
windows2
windows-boot-error1
wsl1
yilia1
彈幕教室1

廣告

×