五倍直播間

Blogs - Sidebar

post-《Growing Rails Applications in Practice》 重點整理 / cover

《Growing Rails Applications in Practice》 重點整理

## Source
`https://github.com/aasm/aasm`

## 說明
### 定義 state and event
首先需要有狀態，以及事件。事件為從 A 狀態轉變到 B 狀態。

 aasm do
 state :sleeping, :initial => true
 state :running, :cleaning

 event :run do
 transitions :from => :sleeping, :to => :running
 end

 event :clean do
 transitions :from => :running, :to => :cleaning
 end

 event :sleep do
 transitions :from => [:running, :cleaning], :to => :sleeping
 end
 end

### 然後
```ruby
job = Job.new
job.sleeping? # => true
job.may_run? # => true
job.run
job.running? # => true
job.sleeping? # => false
job.may_run? # => false
job.run # => raises AASM::InvalidTransition
```

如果希望他不要跳其他訊息，只要 `true` `false` 就好的話可以用 `:whiny_transitions => false`

 aasm :whiny_transitions => false do
 ...
 end

那麼

```ruby
job.may_run? # => false
job.run # => false（這裡就不會有錯誤訊息了）
```

也可以在 event 上加 block

 job.run do
 job.user.notify_job_ran
 end

這樣在 `job.run` 成功之後就會再執行 `job.user.notify_job_ran` 了

### Callback
你可以為 transitions 設一些 callback，像是 `after`，下面這個範例在執行完 `run` 之後就可以去做 `notify_somebody`。

 class Job
 include AASM

 aasm do
 state :sleeping, :initial => true, :before_enter => :do_something
 state :running
 state :finished

 event :run, :after => :notify_somebody do
 transitions :from => :sleeping, :to => :running, :after => Proc.new {|*args| set_process(*args) }
 transitions :from => :running, :to => :finished, :after => LogRunTime
 end
 end

 def notify_somebody
 ...
 end
 end

### Transitions
一個 event 裡可以有不只一個 transitions，但是如果是從同一個狀態出發的第一個 transitions 成功之後，後面的 transitions 就不會再執行了

### Guards
如果符合 `guard` 裡的條件才做這個 transitions，所以可以用來區隔同一個狀態根據不同過程會到不一樣的下一個狀態。

 aasm_event :completes do
 transitions :from => sleeping, :to => :running, :guard => condition?
 transitions :from => sleeping, :to => :cleaning
 end

 def condition?
 some_contition
 end

### Bang events
* 有無 `!` 的差別： 

```ruby
job.run # not saved，只是回傳告知是否可以做這個動作
job.run! # saved
```

* 不做驗證

```
aasm :skip_validation_on_save => true do
 state :sleeping, :initial => true
 state :running

 event :run do
 transitions :from => :sleeping, :to => :running
 end

 event :sleep do
 transitions :from => :running, :to => :sleeping
 end
end
```

* 不能直接改變狀態

```
aasm :no_direct_assignment => true do
 state :sleeping, :initial => true
 state :running

 event :run do
 transitions :from => :sleeping, :to => :running
 end
end
```

那麼

```ruby
job.aasm_state # => 'sleeping'
job.aasm_state = :running # => raises AASM::NoDirectAssignmentError
↑ 這裡無法直接將狀態改變
job.aasm_state # => 'sleeping'
```

### Column name
AASM 預設用 `aasm_state` 去存 state，但是可以透過 override 的方式指定你想要用的 cloumn

 class Job < ActiveRecord::Base
 include AASM

 aasm :column => 'my_state' do
 ...
 end
 end

## 使用
### 說明
商城舉辦活動 (Activity)，活動中顧客會成立訂單 (Order)，而訂單中有商品 (Item)
這時就可以使用 AASM 來管理這三樣東西的狀態！

活動 (Activity) 有 active/inactive/pending 三種狀態。 
訂單 (Order) 有 pending/inprogress/completed/deleted 四種狀態。 
商品 (Item) 有 active/inactive/pending 三種狀態。

狀態情境：

1. 如果活動開始，就要將 Activity 調成 active。 
2. 客戶必須在活動期間內才能成立訂單。 
3. 訂單中的商品必須是可以訂購 (active) 的狀態。 
4. 商品被訂購後須確認是否還有庫存，若無，要將狀態調為 inactive。 

model/activity.rb

 class Activity < ApplicationRecord
 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :active
 state :inactive

 event :activate do
 transitions :from => [:pending, :inactive], :to => :active
 end

 event :deactivate do
 transitions :from => :active, :to => :inactive
 end
 end
 end

model/order.rb

 class Order < ApplicationRecord
 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :inprogress
 state :completed
 state :deleted

 event :placed, :after_commit => :deactivate_item do
 transitions :from => :pending, :to => :inprogress do
 guard do
 activity.active? and item.active?
 end
 end
 end
 end

 def deactivate_item
 if item.count = 0
 item.deactivate!
 end
 end
 end

model/item.rb

 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :active
 state :inactive

 event :activate do
 transitions :from => [:pending, :inactive], :to => :active
 end

 event :deactivate do
 transitions :from => :active, :to => :inactive
 end
 end

### 操作
#### `$ activity.activate!`

於是，活動就開始啦！我們的條件一也就完成啦！

接著，客戶建立了一筆訂單。那麼在 `order.placed!` 裡有

 guard do
 activity.active? and item.active?
 end

是要確保這個目前活動進行中 (也就是 Activity 狀態為 active )，以及客戶所訂購的商品有庫存 (也就是 Item 狀態為 active )。條件都符合時才能執行 `order.placed!`

並且，在 `order.placed!` 後有 after_commit ，所以如果成功執行 `order.placed!` ，將 Order 的狀態改為 inprogress 的話，就會執行 `deactivate_item` 這個 method。如果檢查確認 Item 數量已為 0，那麼就會 `item.deactivate!`

所以，條件二三四也都完成啦！

## 結語
介紹與簡易的 AASM 實作就這樣啦，有這些 transcation 就不用擔心在各個 model state會互相影響的複雜狀態下，調整了 A model 卻忘記調 B model 等等的狀況啦。

---

> 👩‍🏫 __課務小幫手：__
> 
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

post-狀態機初學到實作：認識 AASM / cover

狀態機初學到實作：認識 AASM

image via [Imaiges](https://www.imaiges.com)

上次的敝司的~~大頭目~~紅寶石鑑定商寫了 [你看過 Elixir 嗎？如果沒有，現在讓你看看！](https://5xruby.tw/posts/have-you-met-elixir)，介紹了 Elixir 這個語言許多有趣的特色。我想要接著來談這門語言另一個非常核心的元素：**Pattern matching**。

由於 Ruby (及新的 JavaScript ES6) 都有 destructive assignment，所以可以這樣指派變數：

```ruby
# Ruby
a, b = [1, 2]
#=> a 是 1， b 是 2
```

那如果我們這麼做， `a` 會是多少呢？

```ruby
a, a, b = [1, 2, 3]
```

答案是 `a` 是 `2`。因為 `a` 先被指派為 `1`，緊接著又被指派為 `2`。

上次文章中有提到過函數式編程 (functional programming) 裡的 **functional** 這個字，指的是數學上的函數。而在數學上，當你說 `y = ax + b` 時，那個等號 `=`，並不是我們在 Ruby, JavaScript 語言裡學到的指派。而是說**當輸入 x 時，y 會依函式的定義，計算出一個固定值**。一樣的 **x** 輸入，永遠會是一樣的結果。

如果我們在 Elixir 上試著寫出一樣的程式，會發生什麼事呢？
```elixir
[a, a, b] = [1, 2, 3]

\#=> ** (MatchError) no match of right hand side value: [1,2,3]
```

Elixir 告訴你，「同學同學，`a` 不可能同時是 `1` 又是 `2`。~~你的數學老師在你後面，他非常火。~~」

## Pattern Matching: 找個辦法讓等號左右兩邊比對成功

但是如果我們把上面的例子改寫成這樣，Elixir 就會接受了：
```elixir
[a, a, b] = [1, 1, 3]

\#=> [1, 1, 3]
```

在 Elixir 中的等號，並不是單純的變數指派。而是 pattern matching，樣式比對：

> 把等號左邊的模式，跟右邊的值比對看看。如果有辦法找到讓等式成立的情況，那就幫你綁定變數。

而讓我們剛剛那個等式成真的方法，就是讓 `a` 綁定成 `1`，`b` 綁定成 `3`。

所以也可以這樣用：

```elixir
[a, 3, b] = [1, 2, 3]

\#=> ** (MatchError) no match of right hand side value: [1,2,3]

[a, 2, b] = [1, 2, 3]

\#=> [1,2,3]
```

### 串列比對與連續比對

```elixir
[head | tails] = [1, 2, 3, 4]

\#=> head 是 1，tails 是 [2, 3, 4]
```

`|` 是串列比對中切開首值及剩下的串列的方式，如同 LISP 中的 `car` 及 `cdr`。

而由於每個比對本身會是一個有回傳值的 **expression**，那麼可以**一直比下去**也是很合理的：
```elixir
[h | t] = [1, b, c, d] = [1, 2, 3, 4]

\#=> b = 2, c = 3, d = 4
\#=> h = 1, t = [2, 3, 4]
```

只要最右邊能求出**所有的值**，中間的比對都成功，那麼就可以一次綁定多個變數了。

### `_`： 我不在乎這個

在 pattern matching 時，常常會遇到你只想要確保一部份的值或是資料結構，而不在乎其它地方，就可以利用 `_` 來進行 pattern matching。 例如我只想要將串列中前兩個元素綁定成變數，後面有什麼干我 P 事，就可以這樣做：

```elixir
[a, b | _] = [1, 2, 3, 4, 5]

\#=> a = 1, b = 2
```

一個比對裡，可以使用多個 `_` 。如果覺得這樣讓程式很難讀，可以改成用**底線開頭的變數**，效果是一樣的。

```elixir
[first, _second, third | _tails] = [1, 2, 3, 4, 5]
#=> first = 1, third = 3
#=> 雖然可以用 _second 及 _tails 拿到值，但是 Elixir 會噴警告給你。
```

### `^`： 將變數求值進行比對

當某個變數已經被綁定好值了，你接著想要用這個值來進行比對，可以使用 Pin operator: `^`

```elixir
a = 0

[^a, b, 2 | _tails] = [0, 1, 2, 3, 4]

\#=> b = 1
```

## 函式的 pattern matching

除了等號之外，Elixir 函式定義的參數部份，也是個 pattern matching。

```elixir
defmodule Shape do
 def area({:square, w}), do: w * w
 def area({:circle, r}), do: r * r * 3.14
 def area({:rectangle, w, h}), do: w * h
end

Shape.area({:square, 5}) #=> 25
Shape.area({:circle, 10}) #=> 314
Shape.area({:rectangle, 5, 10}) #=> 50
```

在呼叫函式時，會由上而下用參數去比對函式的每一個區塊 (clause)，如果找到可以成功比對的，就進入該區塊執行。

### 還可以多加一點判斷

除了在函式宣告的參數部份比對之外，Elixir 還提供了[Guards](https://hexdocs.pm/elixir/master/guards.html) 來做稍微複雜一點的判斷：

```elixir
defmodule Alcohol do
 def check_age(_, age) when age < 18, do: "你年紀太小囉"
 def check_age(name, _), do: "歡迎，#{name}"
end
```

所以要寫出遞迴版本的費波那契數列，在 Elixir 裡就很簡單了：

```elixir
defmodule Fibonacci do
 def get(1) when n == 0 or n == 1, do: n
 def get(n), do: get(n - 1) + get(n - 2)
 def list(n), do: for x <- 0..n - 1, do: get(x)
end
```

## 小結
Pattern matching 在 Elixir (及許多函數式編程語言，如 Haskell) 中扮演了非常重要的角色。可以讓你寫出非常簡潔而且易懂的程式，而且會讓你開始習慣用**找出邊界情況**及**遞迴**的角度，來思考如何組織程式。

---

## 工商服務
![RubyElixirConf Taiwan](https://kaochenlong.com/images/2017/ruby-elixir-conf.png)

當然最後還是要廣告一下，今年四月 [Ruby X Elixir Conf Taiwan 2018](https://2018.rubyconf.tw/) 研討會，有邀請到 Elixir 的作者 [José Valim](https://twitter.com/josevalim)，還有許多精采的相關講題喔！我們近期也會舉辦相關的 Elixir 活動，就敬請持續關注我們的活動通知吧！

Happy hacking! 下次見。

post-等號究竟是什麼意思？ Elixir 裡的 pattern matching / cover

等號究竟是什麼意思？ Elixir 裡的 pattern matching


# Designing Case Study: Ruby x Elixir Conf Taiwan 2018

一年一度的 Ruby Conf Taiwan 今年邁入第七屆，這次 Ruby Taiwan 特別和 Elixir Taiwan 合作，共同推出史無前例的雙程式語言研討會 [Ruby x Elixir Conf Taiwan 2018](https://2018.rubyconf.tw/)，於今年 4/28 圓滿落幕 🎉

![Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*i4ia5oJIXzx_ewsBngb2CA.png)

本次研討會，超過 250 位會眾熱情參與，來自世界各地的講者與開發者齊聚一堂，一同共襄盛舉。活動酬備期長達半年以上，在設計方面更面臨 Ruby 與 Elixir 雙程式語言的挑戰 💪🏻

這次設計的主軸為「交流」，期盼讓 Ruby 和 Elixr 能獨立發揮又能互相激盪。雖然一行又一行的程式碼難以用視覺來理解，所幸許多程式語言都各自擁有代表的圖像，如代表 Ruby 的「紅寶石」與象徵 Elixir 的「煉金藥水」。

然而，一剛一柔的組合卻也讓 Logo 的設計一度卡關。曾經嘗試將流動的藥水裝進寶石形狀的瓶子裡，不僅導致 Elixir 變成 Ruby 的一部分，且融合的意象遠大過交流的目標。

![Logo 設計第一次提案](https://cdn-images-1.medium.com/max/1600/1*YDk2zYnjdB0oRcmPj8RC9Q.jpeg)

為了讓兩者達到完美的平衡，在後續的修正上盡可能讓紅寶石與煉金藥水各自獨立、互不干擾，卻又能站在同一個舞台上。經過一番研究，最終以「沙漏」的意象巧妙地將兩者連結 —— 紅寶石上寬下窄的形狀恰巧符合沙漏的上半部，而水滴狀的煉金藥水自然地成為沙漏的下半部。將兩者放在一個 8 形的瓶子裡，為 2018 的 Ruby x Elixir Conf Taiwan 展開序幕。

![Logo Design for Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*qvNraTSHBjzj60emOp6gaA.png)

這次選用的字體為 Google Fonts 提供的 [Righteous](https://fonts.google.com/specimen/Righteous)。[Righteous](https://fonts.google.com/specimen/Righteous) 的設計靈感來自匈牙利籍藝術家 Róbert Berény 的作品，其海報具有濃烈的 Art Deco 風格。因此，[Righteous](https://fonts.google.com/specimen/Righteous) 同樣採用嚴謹的幾何手法繪製而成，使其在工業風格中保有一定的藝術性。此外，大小寫字體完備的特性使之成為標準字的不二人選，為這次的研討會增添不少俏皮感。

![Righteous — Google Fonts](https://cdn-images-1.medium.com/max/2000/1*yktq2yn3iEpq9kS1yCIFSg.png)

顏色漸層在扁平化設計（Flat Design）盛行的時候沉寂一時，直到最近捲土重來，帶動一波新的網頁設計趨勢。因此，這次的 Ruby x Elixir Conf Taiwan 2018 更不能錯過這股浪潮，以 Ruby 代表的紅色融合 Elixir 代表的紫色，從 Logo 、網站到各式印刷品，廣泛且大膽地運用。

漸層不僅能提升物件的層次、擺脫生硬的感覺，好的漸層配色也能幫助整體風格更加活潑。這次選用飽和的紅紫漸層做為主色，展現熱情又神秘的感覺，令人不禁想一探究竟 — — 究竟今年的 Ruby x Elixir Conf Taiwan 2018 有什麼驚喜等著大家呢？

![Ruby x Elixir Conf Taiwan 2018 Official Website](https://cdn-images-1.medium.com/max/2000/1*FG2y7vyxXqaVUeGfiOUVOQ.png)

以往在活動頁面的架構上多採用單頁式設計，眾多的講者、豐富的議程與踴躍的贊助商常常導致頁面過長，不利閱讀。因此，這次改採多頁式設計，將議程（Program）、講者（Speakers）與贊助商（Sponsors）獨立出來，讓資訊能更清楚地呈現在頁面上，幫助使用者更有效地導覽。

網頁配色以紅紫漸層搭配白色背景，輔以幾何色塊和線條元素，展現年輕有活力的風格。首頁特別選用具有台北特色的三張照片 —— 著名的[台北 101](https://unsplash.com/photos/TZldfnLPZ3Q)、繁忙的[台北車站](https://unsplash.com/photos/MjyWAe-xYm8)與熱鬧的[夜市](https://unsplash.com/photos/j6uw8AE3sx0)，來歡迎眾多遠道而來的外國朋友。

![Events & Parities](https://cdn-images-1.medium.com/max/1000/1*J67WJmCwawm-4TQqDsWWdg.png)

此外，本次研討會也有許多衍伸的活動與 Party。為了讓會眾更有參與感，特別將連結設計成票卷的形式。科技帶來方便，設計更不能因此馬虎！

![Sketch App](https://cdn-images-1.medium.com/max/1000/1*WETSRBb5nCs6wfJKY0Nx5Q.png)

技術方面，[Sketch](https://www.sketchapp.com/) 已經成為我目前最仰賴的工具。簡單的操作介面、模組化的 Symbol 功能，還有眾多好用的 Plugin，讓我能夠在短時間內快速產出不同裝置的設計圖稿。搭配 [Zeplin](https://zeplin.io/) 一起服用，更能大幅提升開發效率 ⚡️

> Happy Design, Happy Coding :-)

-----------------

[Designing Case Study: Ruby x Elixir Conf Taiwan 2018 @ Medium](https://medium.com/@irene84111/designing-case-study-ruby-x-elixir-conf-taiwan-2018-af17060f7da8)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

post-Designing Case Study: Ruby x Elixir Conf Taiwan 2018/cover

Designing Case Study: Ruby x Elixir Conf Taiwan 2018

這是很多年前的事情了，當時看到別人的 Chrome 竟然會說話，讓我震驚了很久。但是花了很多年都沒有找到要怎麼做，不過最近因為一些關係，我終於知道了他的秘密！
 
 
首先，這不是鬼故事！這篇文章要討論的是 Web Speech API 這個由 Google 所提交的功能。主要就是做「語音轉文字」跟「文字轉語音」兩件事情，像是有在玩遊戲可能有用過 Discord 這種類似 Slack 的通訊軟體，裡面提供的朗讀功能應該就是透過這個 API 實作的。

## Web Speech API

在 Web Speech API 裡面其實只有兩個功能「語音轉文字」跟「文字轉語音」兩種。文字轉語音的功能可能比較常見，我們可以在像是在一些地方看到。

像是 Google 搜尋右邊的「麥克風」圖示，就是利用 Web Speech API 所製作的功能，讓我們可以利用講話的方式直接輸入搜尋的關鍵字。

![Google 搜尋的語音框](https://blog.frost.tw/images/my-chrome-can-speak/screenshot.png)

另外就是將文字念出來，也就是這篇文章要討論的內容。

## Hello World

那麼，要怎麼讓 Chrome （或者 Firefox 發出聲音呢？）

```js
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
```

首先，我們要產生出一個 `SpeechSynthesisUntterance` 物件，把要講的東西放進去。然後再透過 `speechSynthesis` 提供的 `speak` 把他唸出來。

```js
var msg = new SpeechSynthesisUtterance('世界你好！');
window.speechSynthesis.speak(msg);
```

當然，講中文也是完全沒有問題的。

> 主要是這個 API 預設會用作業系統（Ex. macOS 的 VoiceOver 功能）所以不管是哪個瀏覽器預設都會用同樣的聲音講話。

## 調整語音

因為作業系統中可能會針對各種國家的語言提供語音，所以同樣是中文，我們也可以從 `zh-TW` 切換到 `zh-HK` 讓他用廣東話的方式念出來。

```js
var voices = window.speechSynthesis.getVoices();
var msg = new SpeechSynthesisUtterance('世界你好！');
msg.voice = voices[35]; // 每台電腦/瀏覽器結果可能略有不同

window.speechSynthesis.speak(msg);
```

> 目前似乎只有 Safari 可以正常使用，其他瀏覽器不一定可以用。

另外就是 `SynthesisUtterance` 還有幾個參數可以玩。

* `pitch` - 語調 0 ~ 2 設定，越大音越高
* `volume` - 音量

## 小結

這個功能在某些應用情境，像是聊天機器人。或者類似 Discord 這種通訊軟體，算是很有用的。不過似乎很少人在討論，就算是 Google 查詢「Speech API」也還不一定會看到，不過作為一個有趣的小功能倒是值得一試。

> 印象中可以選擇男聲或者女聲，但是找不到。也許是 Chrome 裡面提供的語音包才有，不過目前 Chrome (66.0) 似乎切換語音不太正常，就暫時無法測試。

---

## 參考文章

* http://blog.zhusee.in/post/56286985943/web-speech-api-part-i-using-speech-synthesis-to-make-bro
* https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API

原文刊載於[弦而時習之](https://blog.frost.tw/posts/2018/05/30/My-Chrome-can-speak/#more)

post-我的 Chrome 會說話/cover

我的 Chrome 會說話

post-Rails探索：Active Record篇 / cover

Rails 探索：Active Record 篇


# 在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

## 1. 安裝 Nginx

推薦使用 Homebrew 在 Mac 上安裝 Nginx：

```bash
brew install nginx
```

安裝完成後，就能用 brew services 來幫我們啟動 Nginx：

```bash
sudo brew services start nginx
```

## 2. 設定 Nginx

用慣用的編輯器打開 `/usr/local/etc/nginx/nginx.conf`，然後確認裡面有 `include servers/*.conf;` 這行。（通常會在最後一行，把前面的 `#` 註解符號拿掉就可以了）

## 3. 安裝 DNS Server

雖然透過編輯 `/etc/hosts` 也能達到類似的效果，但個人覺得這個檔在 Mac 上還是把這個檔交給系統控制就好，所以自己的習慣是在電腦上架個 DNS Server，然後在網路設定使用電腦上的 DNS Server 就好。

用以下指令可以安裝並啟動 dnsmasq：

```
brew install dnsmasq
sudo brew services start dnsmasq
```

## 4. 設定 DNS Server

同樣的，打開 `/usr/local/etc/dnsmasq.conf` 並且確認有這行：

```
conf-dir=/usr/local/etc/dnsmasq.d/,*.conf
```

（也通常會寫在最後一行，把前面的 `#` 註解符號拿掉就可以了）

然後，建立 `/usr/local/etc/dnsmasq.d/localhost.conf` 這個檔案，在裡面寫：

```
address=/localhost/127.0.0.1
```

> 也就是把所有 `*.localhost` 的網址解析到 `127.0.0.1` 的意思。

存擋後，執行 `sudo brew services reload dnsmasq` 來重載 dnsmasq 的設定。

> 如果要測試 dnsmasq 有沒有正確設定，可以執行 `nslookup test.localhost 127.0.0.1`，應該要得到 IP 是 `127.0.0.1` 的結果。

再來就是在系統的網路設定，把 127.0.0.1 加成其中一個 DNS server：

![](https://i.imgur.com/nuEbnTK.png)

注意除了 127.0.0.1 之外，裡面一定要有一個一般的 DNS server，不然其他公開的轉就會連不上去了。

> 要測試系統的 DNS server 有沒有設定好，可以在瀏覽器前往 `http://test.localhost`，應該要看到 `ERR_CONNECTION_REFUSED` 型而非 `ERR_NAME_NOT_RESOLVED` 的錯誤。

## 5. 簽署憑證與建立 Proxy 網站

為了方便執行這個步驟，我把需要做的事寫成了[一個 shell script](https://github.com/zetavg/dotfiles/blob/master/_bin/create-nginx-port-forwarding-localhost-server)。如果要為一個 Rails 網站、使用預設的 port 3000 開個新 server 的話，只要在專案目錄下執行：

```
create-nginx-port-forwarding-localhost-server site-name 3000 "$(pwd)/public"
```

就會建立提供 SSL + HTTP/2 的 `site-name.localhost` Nginx Virtual Host。用 `rails server` 啟動 Rails 之後，就可以在瀏覽器中用 `https://site-name.localhost` 來測試自己的網站了！

## 小結

雖然目前這套作法持續被我愉快使用中，不過還是有一些延伸應用需要找時間研究，例如：

- 如何設定 dnsmasq 來針對不同裝置回覆不同結果？例如自己的電腦要回 127.0.0.1，其他裝置就回目前電腦在區域網路下的 IP，這樣使用手機測試網站時，只要在手機改個 DNS 設定就方便了。
- 如果是開發 iOS 應用的話，iOS Simulator 預設會沿用電腦的網路設定，而且 127.0.0.1 也是指向實體裝置，所以在 Safari 下可以無痛地使用 `*.localhost` 網址。但是 native app 似乎就完全無動於衷了，似乎改 iOS 系統的 DNS 設定也沒有用，有點小困擾。
- Android Virtual Device 更麻煩一點，因為 AVD 系統中的 10.0.2.2 才是指向電腦的 127.0.0.1，所以無法只靠本篇的敘述就達成可以在 AVD 測試的目的。

也許最終極的作法是買個真實的 domain 搭配自架 reverse proxy，目前也還在研究中 XD


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

實體課程

技術文章

五倍消息

技術文章

《Growing Rails Applications in Practice》重點整理

狀態機初學到實作：認識 AASM

等號究竟是什麼意思？ Elixir 裡的 pattern matching

Designing Case Study: Ruby x Elixir Conf Taiwan 2018

我的 Chrome 會說話

Rails 探索：Active Record 篇

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

寫隻 rake 讓你一行指令輕鬆跑報表

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

實體課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款