五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar

post-Git 面試題 / cover

Git 面試題

post-Serverless 與 Node-Canvas 實作動態圖表匯出 / cover

Serverless 與 Node-Canvas 實作動態圖表匯出


[React DnD](http://react-dnd.github.io/react-dnd/) 使用 HOC 的方式來實作複雜的 Drag and Drop 介面，可以在 Drag Drop Component 之間輕鬆的溝通傳遞資料。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-dnd-practice) 下來 checkout 研究研究。

---

### 1. 先刻出靜態 React Component，並且將每張卡片的資料用 state 管理

```jsx=
class Card extends Component {
  render() {
    const {
      name
    } = this.props

    return (
      <div className='card'>
        { name }
      </div>
    )
  }
}

class CardWall extends Component {
  render() {
    const {
      children,
      status,
    } = this.props

    return (
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cards: [
        { id: '1', name: 'issue 1111', status: 'todo' },
        { id: '2', name: 'issue 104', status: 'todo' },
        { id: '3', name: 'issue 9527', status: 'todo' },
        { id: '4', name: 'issue 5278', status: 'todo' },
        { id: '5', name: 'issue 591', status: 'develop' },
        { id: '6', name: 'issue 666', status: 'develop' },
        { id: '7', name: 'issue 9453', status: 'develop' },
        { id: '8', name: 'issue 8591', status: 'deploy' },
        { id: '9', name: 'issue 9999', status: 'deploy' },
      ]
    }
  }

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          {
            ['todo', 'develop', 'test', 'deploy'].map(status => (
              <CardWall key={status} status={status}>
                {
                  (cards[status] || []).map(card => (
                    <Card
                      key={card.id}
                      id={card.id}
                      name={card.name}
                      status={card.status}
                    />
                  ))
                }
              </CardWall>
            ))
          }
        </div>
      </div>
    );
  }
}
```

以上主要是把 `<CardWall />` 以迴圈的方式把 `<Card />` map 出來，`this.groupOfCards()` 會把 `state.cards` 的資料以 status 來做 group 分類，會得到：

```javascript=
{
  todo: [...],
  develop: [...],
  test: [...],
  deploy: [...],
}
```

完成後長這樣：

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

---

### 2. 準備好更新卡片狀態的 function

```jsx=
class App extends Component {
  constructor(props) {

    ... // 省略

    window.test_update = this.updateCardStatus.bind(this)
  }

  updateCardStatus(cardId, targetStatus) {
    const { cards } = this.state
    const targetIndex = cards.findIndex(c => (cardId === c.id))
    cards[targetIndex].status = targetStatus // 更新 card status

    const targetCard = cards.splice(targetIndex, 1)[0] // 刪除原始陣列位置的 card
    cards.push(targetCard) // 將目標 card 放入陣列最後一筆

    this.setState({ cards })
  }

  ... // 省略
}
```

然後就可以使用 `window.test_update` 來測試一下運作是否正確，將 `id` 為 `1` 的卡更新狀態為 `test`。

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

---

### 3. `<Card />` 套用 React DragSource
依照 [官方文件 DragSource](http://react-dnd.github.io/react-dnd/docs-drag-source.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { DragSource } from 'react-dnd'

const dragSource = {
  beginDrag(props) {
    // 會將所有 <Card /> 的 props 帶到 onDrop Component 
    return {
      ...props,
    }
  }
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <Card /> 裡面
function dragCollect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div className='card'>
        { name }
      </div>
    )
  }
}

// export component 的時候用 DragSource 以 HOC 的方式
// 將 Card 帶入，DragSource 第一個參數為 item type (string)，
// 會用來判斷 DropTarget 的 item type 是否為一樣，
// 一樣才會觸發 Drag & Drop。
export default DragSource('CONNECT_CARD', dragSource, dragCollect)(Card)
```

---

### 4. `<CardWall />` 套用 React DropTarget
依照 [官方文件 DropTarget](http://react-dnd.github.io/react-dnd/docs-drop-target.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { findDOMNode } from 'react-dom'
import { DropTarget } from 'react-dnd'

const dropTarget = {
  ..., // code 省略

  drop(props, monitor, component) {
    ... // code 省略

    // 此處已經可以得到 props(CardWall) 與 item (Card props)
    const item = monitor.getItem()    
    console.log('dropCard:', item) // card props
    console.log('dropWall', props) // card wall props
    const { id } = item
    const { updateCardStatus, status: targetStatus } = props

    // 更新 Card status
    updateCardStatus(id, targetStatus)

    return { moved: true }
  },
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <CardWall /> 裡面
const dropCollect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType(),
})

class CardWall extends React.Component {
  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

// DropTarget 第一個參數為 item type(string)，
// 必須要跟 DragSource 的 item type 設為一樣才可以觸發 Drag & Drop
export default DropTarget('CONNECT_CARD', dropTarget, dropCollect)(CardWall)
```

---

### 5. 最後再把 `DragDropContext` 套用在 `<App />`

[官方文件 DragDropContext](http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html)

```jsx=
import React, { Component } from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

class App extends Component {
    /* ... */
}

export default DragDropContext(HTML5Backend)(App)
```

這樣就完成簡易的拖拉功能

![](https://i.imgur.com/CmSofsr.gif)

---

### 6. 處理 `<Card />` onDrag 效果

```jsx=
class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        className='card'
        style={{
          // React DnD 提供的 isDragging 用來達到 onDrag 效果
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        { name }
      </div>
    )
  }
}
```

![](https://i.imgur.com/Mhljot6.gif)

### 7. 處理 `<CardWall />` onDrop 效果
要達到 onDrop 時，卡片插入的效果，必須先準備用來 render 的空白 `<Card />`，並且只能在不同的狀態牆上觸發。

加入 `empty` props 到 `<Card />`：

```jsx=
  class Card extends React.Component {
  render() {
    const {
      name,
      empty,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        // 加入 empty props, 來讓卡片有 empty class name
        className={`card ${ empty ? 'empty-card' : '' }`}
        style={{
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        <span>{ name }</span>
      </div>
    )
  }
}
```

css：

```css=
.card.empty-card { background-color: #c9c9c9; }
.card.empty-card > * { display: none; }
```

`<CardWall />`

```jsx=
import Card from '../Card'

const dropTarget = {
  canDrop(props, monitor) {
    // You can disallow drop based on props or item
    const item = monitor.getItem()
    const { status: wallStatus } = props // 卡片牆
    const { status: cardStatus } = item // 卡片

    // 卡片跟卡片牆為不同時，才會回傳 canDrop: true
    return wallStatus !== cardStatus
  },

  ... // 省略
}

class CardWall extends React.Component {

  ... // 省略

  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }

            // 符合 isOver 和 canDrop 狀態才可以插入 empty <Card />
            { isOver && canDrop && <Card empty /> }

          </div>
        </div>
      </div>
    )
  }
}
```

完成後就有插入卡片的感覺了

![](https://i.imgur.com/MdKwhaY.gif)

---

### 8. 處理 `<Card />` onDrag 旋轉效果

要達到卡片 onDrag 時的 `transform: rotate` 效果，但是 React DnD 預設是使用 [HTML5 backend](http://react-dnd.github.io/react-dnd/docs-html5-backend.html) 來替 onDrag 物件做 snapshot, 所以並不能直接操作 onDrag 中的物件，而且還會有這種畫面被切斷的 bug：

![](https://i.imgur.com/WshTYMG.gif)

不過 React DnD 提供了另一種方式 [DragLayer](http://react-dnd.github.io/react-dnd/docs-drag-layer.html) 同樣可以達到這個效果，而且還不會有畫面被切斷的問題。

在 `<Card />` 中加入以下程式碼，讓 onDrag snapshopt 為一個空的圖片：

```jsx=
import { getEmptyImage } from 'react-dnd-html5-backend'

class Card extends React.Component {
  componentDidMount() {
    const { connectDragPreview } = this.props
    if (connectDragPreview) {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      })
    }
  }

  ... // 省略
}
```

依照官方文件實作出一個 `<CardLayer />` ，該 component 為一個 `position: fixed;` 滿寬滿長的畫布， 並且會追蹤你的滑鼠座標來動態改變裡面的替代 component 的座標。

```jsx=
import React from 'react'
import { DragLayer } from 'react-dnd'

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
}

const snapToGrid = (x, y) => {
  ... // 省略
}

const getItemStyles = (props) => {
  const { initialOffset, currentOffset } = props
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none',
    }
  }

  let { x, y } = currentOffset

  if (props.snapToGrid) {
    x -= initialOffset.x
    y -= initialOffset.y
    [x, y] = snapToGrid(x, y)
    x += initialOffset.x
    y += initialOffset.y
  }

  // 加入想要的 transform rotate 效果
  const transform = `translate(${x}px, ${y}px) rotate(5deg)`
  return {
    transform,
    WebkitTransform: transform,
  }
}

const LayerCollect = monitor => ({
  ... // 省略
})

const CardLayer = (props) => {
  const { item, itemType, isDragging } = props
  if (!isDragging) {
    return null
  }

  return (
    <div className='card-layer' style={layerStyles}>
      // 你的替代 onDrag component，
      // style 將會帶入動態的座標位置(使用 transform)
      <div className='card' style={getItemStyles(props)}>{ item.name }</div>
    </div>
  )
}

export default DragLayer(LayerCollect)(CardLayer)

```

把 `<CardLayer />` 放到 `<App />` 裡面：

```jsx=

import CardLayer from './CardLayer'

class App extends Component {

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          <CardLayer />

          ... // 省略

        </div>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App)

```

將原本的 html5 onDrag snapshot 藏起來，改用可視範圍內的畫布來動態追蹤滑鼠的座標並將替代 component mount 上去。

### 完成後就可以做到跟 `Trello` 一樣的卡片拖拉效果！

![](https://i.imgur.com/nzeVd5F.gif)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-用 React Drag & Drop 來實作 Trello 拖拉牆 / cover

用 React Drag & Drop 來實作 Trello 拖拉牆


「檔案上傳」是網站開發永遠的課題，充滿各種<del>地雷</del>眉角。Active Storage 是由 Rails 核心團隊開發的原生方案，內建於 Rails 5.2 之後的版本中，提供開發者在處理檔案上傳時的另一個選項。由於還相當年輕，以成熟度來說也許還比不過上傳界的前輩們，但未來的發展依然相當令人期待，甚至老字號的 Paperclip 都已順勢宣布停止維護。

## 首先你至少需要 Rails 5.2

因為不想從頭重刻，筆者隨便撿了個被放置的 side project 來試玩。這邊花了點時間升級到 Rails 5.2，不過因為這不是本文重點，很快帶過一下就好：

```ruby
# Gemfile
gem "rails", "~> 5.2.1"
gem "bootsnap"

# 更新 Rails 和相關 gem；視需要處理版本衝突
$ bundle update rails

# 更新 app；注意不要蓋掉需要的檔案
$ rails app:update
```

確認一下是否以下的資訊都有更新到，就算是準備就緒了：

```ruby
# config/application.rb
require "active_storage/engine"

# config/environments/development.rb
# config/environments/production.rb
config.active_storage.service = :local

# config/environments/test.rb
config.active_storage.service = :test

# config/storage.yml
test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
```

## 準備就緒，開箱囉
### 資料庫設定

和 CarrierWave 不同的是，你不需要在 model 上另加欄位去 mount。Active Storage 是以 polymorphic 方式實做，把所有資料集中在`active_storage_blobs`（存放附檔資訊） 和 `active_storage_attachments` （存放附檔和 model 的關聯）兩張 table 裡管理，所以先來設定資料庫：

```ruby
$ rails active_storage:install
$ rails db:migrate
```

### 關聯設定

如果你原本是使用 CarrierWave 的話，接下來只需要做一個修改：

```ruby
# app/models/image.rb
class Image < ApplicationRecord
# ...

# CarrierWave 的寫法
# mount_uploader :file, ImageUploader

# Active Storage 的寫法
has_one_attached :file

# ...
end
```

因為沿用同樣的命名 `:file`，所以對應的表單和 controller 都不用修改，到這邊為止，上傳的功能已經無痛轉移完成了！

### 上傳

實際上傳一張圖片後，來看一下 create image 時的 log：

![create image log](https://i.imgur.com/IBQqcHb.png)

從 log 可以發現表單送出後 Rails 做了這幾件事：

- 將檔案存入 storage（本例中為本機端的 disk storage）
- 將檔案位置（key）寫入 `active_storage_blobs`
- 產生一筆 `Image` 資料
- 建立上述 image 和 blob 的關聯，寫入 `active_storage_attachments`

接下來就可以透過 `@image.file` 來對檔案進行各種操作了。

### 前端顯示

利用 Rails 內建的黑魔法（誤），在 `url_for`, `link_to`, `image_tag` 等方法中傳入附檔物件即可。

```ruby
# app/views/images/show.slim
= image_tag @image.file
```

如果你的使用情境不在 controller/view 內的話，也可以這樣呼叫：

```ruby
Rails.application.routes.url_helpers.rails_blob_url(@image.file)
```

但要記得另外指定 host：

```ruby
# config/environments/development.rb
Rails.application.configure do
  # ...
end
Rails.application.routes.default_url_options = { host: "localhost:3000" }
```

檢視前端網頁原始碼，可以發現圖片網址會長得像這樣：

```
http://localhost:3000/rails/active_storage/blobs/{encoded_key}/{filename}
```

檢視 log，可以發現圖片顯示總共做了兩次 request。首先是由 `ActiveStorage::BlobsController` 產生 signed url：

![BlobsController request log](https://i.imgur.com/ysYrjX4.png)

再來由 `ActiveStorage::DiskController` 自 storage 取得實體檔案：

![DiskController request log](https://i.imgur.com/V10azUT.png)

### 縮圖處理

在 `variant` 方法中傳入 MiniMagick 參數即可。未來 Rails 6 會引入 `image_processing` gem，語法可以更簡練，但現階段只能使用 MiniMagick。

```ruby
= image_tag @image.file.variant(combine_options: { resize: "500x500", auto_orient: true })
```

檢視前端網頁原始碼，可以發現縮圖的網址長得不太一樣：

```
http://localhost:3000/rails/active_storage/representations/{encoded_key}/{filename}
```

從 log 也可以看出，request 的第一步換成了 `ActiveStorage::RepresentationsController`：

![RepresenationsController request log](https://i.imgur.com/cQgLhvi.png)

Active Storage 預設是在「variant 第一次被存取」時才進行圖片處理：

- 先檢查 variant 是否已存在 storage 中
- 若不存在，則取得原圖，加工後再將 variant 寫入 storage
- 產生 variant 的 signed url
- 重導至 `ActiveStorage::DiskController` 取得實體檔案

如果想要在上傳時就即時處理縮圖的話，實做方式是：

```ruby
= image_tag @image.file.variant(resize: "100x100").processed.service_url
```

### 天生 N+1
在先天設計上，使用 Active Storage 很難不遇到 N+1 問題。對此官方也提供了內建的 scope `with_attached_{name}` 因應：

```ruby
# app/controllers/images_controller.rb
def index
  @images = Image.with_attached_file
end
```

### 小結

Active Storage 的設計理念是要讓檔案的 public url 和檔案的實際位置徹底脫勾，但也因此產生了一些問題，例如天生易踩 N+1 雷、欠缺永久網址難以 cache（目前是全面強制為 signed url）、redirect 造成的效能瓶頸、routing 上的衝突，以及一旦超出預設的情境後就很難做其他客製化等等（詳見文末的參考資料）。也有人指出 Active Storage 完全只圍繞在「圖檔」這個主題上，對於其他格式的檔案支援有限的窘境。

雖然仍有不足，不過這畢竟是正式推出才半年的新玩具，當然還很多有改善空間，相信 Rails 核心團隊不會讓大家失望（太久）的。回到 Active Storage 最大的賣點，當然還是它「內建於 Rails」的事實。這意味著「Rails 升級時不會有相容性問題」，對開發者來說是相當有魅力的。

## おまけ
由於筆者是拿舊專案來試玩的，有些原本寫好的功能也被逼著一起更新了，既然雷都踩了那也順便分享一下 XD

### EXIF

這裡解決的問題是「想拿到照片的 EXIF 資訊」。原本只需要安裝 [EXIF Reader](https://github.com/remvee/exifr) 後，在 CarrierWave 對應的 uploader 裡動動手腳就可以簡單做到，換成在 Active Storage 就需要魔改 analyzer 了：

```ruby
# Gemfile
gem "exifr"
```
```ruby
# config/initializers/exif.rb
require "exifr/jpeg"

module ActiveStorage
  class Analyzer::ImageAnalyzer < Analyzer
    def metadata
      read_image do |image|
        if rotated_image?(image)
          { width: image.height, height: image.width }
        else
          { width: image.width, height: image.height }
        end.merge(exifdata(image) || {})
      end
    rescue LoadError
      logger.info "Skipping image analysis because the mini_magick gem isn't installed"
      {}
    end

    private

    def exifdata(image)
      return unless image.type == "JPEG"
      reader = EXIFR::JPEG.new(image.path)
      { exif: reader.to_hash } if reader.exif?
    rescue EXIFR::MalformedImage, EXIFR::MalformedJPEG
    end
  end
end
```

之後就可以透過 `@image.file.metadata[:exif]` 取得相片資訊了。當然，你想在這裡魔改其他功能進來也是 ok 的 XD

### 測試
由於是內建於 Rails，Active Storage 本身提供的功能其實不需要另外測試。但如果你需要有一個能在測試中使用的附檔，我們可以仿照官方的測試，自己刻一個 helper：

```ruby
# spec/rails_helper.rb
# ...
Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }

RSpec.configure do |config|
  config.include UploaderSpecHelper

  config.after(:all) do
    FileUtils.rm_rf(Dir["#{Rails.root}/tmp/storage/*"]) if Rails.env.test?
  end  
end
```
```ruby
# spec/support/uploader_spec_helper.rb
module UploaderSpecHelper
  # 配合前面的魔改，這邊也做了 exif 的對應處理
  def create_file_blob(filename: "image.jpg", content_type: "image/jpeg", metadata: { exif: {} })
    ActiveStorage::Blob.create_after_upload!(
      io: file_fixture(filename).open,
      filename: filename,
      content_type: content_type,
      metadata: metadata
    )
  end
end
```

最後在 `spec/fixtures/files` 裡隨便放一個 `image.jpg` 進來，準備工作就完成了。之後，就可以在測試中使用了：

```ruby
# spec/models/image_spec.rb
RSpec.describe Image, type: :model do
  it "should contain exif data" do
    image = FactoryBot.create(:image)
    image.file.attach(create_file_blob)
    expect(image.file.metadata).to include(:exif)
  end
end
```

## 參考資料
- [Rails Guide: Active Storage Overiew](https://guides.rubyonrails.org/active_storage_overview.html)
- [Rails 5.2: Active Storage and beyond](https://evilmartians.com/chronicles/rails-5-2-active-storage-and-beyond)
- [Rails 5.2 and Active Storage - the new approach to file uploads](https://prograils.com/posts/rails-5-2-active-storage-new-approach-to-file-uploads)
- [7 Practical Tips for ActiveStorage on Rails 5.2](https://bloggie.io/@kinopyo/7-practical-tips-for-activestorage-on-rails-5-2)
- [Moving from CarrierWave to ActiveStorage in a Rails app](https://medium.com/epfl-extension-school/moving-from-carrierwave-to-activestorage-in-a-rails-app-31f13e3ff37d)
- [Stack Overflow: ActiveStorage wont crop variants](https://stackoverflow.com/questions/50547257/activestorage-wont-crop-variants/50552733#50552733)
- [Caching variants with ActiveStorage](https://www.neontsunami.com/posts/caching-variants-with-activestorage)
- [Rails issue#31419: ActiveStorage: Allow access to backing file from Service API](https://github.com/rails/rails/issues/31419)
- [Rails issue#30431: Permanent or direct links to ActiveStorage uploads](https://github.com/rails/rails/issues/30431)
- [Rails issue#31228: Rails Router Catchall Picks Up ActiveStorage Routes](https://github.com/rails/rails/issues/31228)
- [Deleting ActiveStorage Attachments From the Controller, 3 Ways](https://www.nicholasshirley.com/several-strategies-to-delete-activestorage-attachments/)
- [Exif analyzer for Active Storage](https://www.georg-ledermann.de/blog/2018/05/15/exif-analyzer-for-active-storage/)
- [Deprecating Paperclip](https://robots.thoughtbot.com/closing-the-trombone)

(Photo by John Schnobrich on Unsplash)

---

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

cover

Active Storage 開箱文


`\[a-zA-z]{3,}|^\D$|^[0-9a-z]*$|^[0-9A-Z]*$\`

相信大家在寫程式的過程當中，一定都曾看到過像上面這種，有點像亂寫的程式碼，有些可能看起來沒那麼複雜，而有些則是長到讓人難以招架，光是看到就讓人頭痛，更不用說去讀懂它了。

事實上，這種程式碼叫做正規表達式(RegExp，Regular Expression），是處理文字非常重要的利器，當你希望規範文字的格式、或者是限制使用者的文字格式時，正規表達式是不可或缺的存在。

文首的表達式是我超級討厭的銀行密碼格式（還有 PlayStayion Network 的密碼格式），會找出這些格式：

* 超過連續三個英文字母（不分大小寫）
* 沒有任何數字
* 沒有任何大寫字母
* 沒有任何小寫字母

只要你設立的密碼符合以上任何一個格式，程式就會拒絕你使用這組密碼，以這樣的方式來讓使用者建立出一個安全性相對高的密碼——雖然很多時候都是徒勞無功的。

在這篇文章當中，希望可以透過簡單明瞭的方式來講解正規表達式，並且讓大家在未來撰寫或閱讀正規表達式的時候，能夠得心應手，無所畏懼。

在 Ruby 裡面，有幾種方式可以定義正規表達式，比較普遍的方式是用 slash(/) 將正規表達式包起來，像是 `/[a-zA-Z]*/`，而另一種方式則是用 Ruby 的 class生成，變成、 `Regexp.new('[a-zA-Z]*')` ，值得注意的是，使用第二種方式不需要加入 slash，只要將內容以字串方式傳入即可。大部分情況下我們會看到第一種方式，少部分的情況下，特別是需要動態產生正規表達式的時候，第二個方式會比較好用。最後則是將利用 `%r{[a-zA-Z]*}` 這樣的方式也可以定義正規表達式。

> 使用 %r 的情況下，不需要將 {} 裡面的表達式包成字串

在正規表達式當中，我們有幾個比較常用的 Match Character 來表示我們的規則：

| Match Character | 規則                 |
|-----------------|----------------------|
| .               | 所有字元             |
| \w              | 所有字母，包含大小寫跟數字 |
| \d              | 所有數字（0-9)       |
| \D              | 除了數字以外的字元   |
| [ ]              | 指定的範圍，例如[a-f]|

當然，只有 Match Character 還不夠，我們還必須指定字元是否重複，或者重複的次數，否則預設都是一個字元。

| 重複表示 | 規則                         |
|----------|------------------------------|
| ?        | 未出現或出現一次             |
| *        | 未出現或出現多次             |
| +        | 出現一次或多次               |
| {a}      | 出現 a 次                    |
| {a,}     | 至少出現 a 次以上            |
| {,b}     | 最多出現 b 次                |
| {a,b}    | 最少出現 a 次，最多出現 b 次 |

舉個例子來說，台灣的市話號碼有可能是七碼或者八碼，我們就可以利用 {a, b} 這個重複規則來做出正確的格式：`/^\d{7, 8}$/`。這個正規表達式的意思，我們希望找出一個有七到八個數字的字串，而前面的 `^` 以及後面的 `$` 分別代表字串的開頭開始和字串的結尾，這在很多場合是非常重要的。假設沒有規定必須從字串的最前面開始或在最後結束，他便會抓取最前面或是最後面符合的字串，如此一來便不符合我們希望的規則。

舉例來說，如果我們的規則是這樣 `/^\d{7, 8}/`，沒有最後結束的符號，那麼即使當我輸入手機號碼 0955555555，他還是會回傳最前面的八位數字給你。

```ruby
# incorrect
pry(main)> '09555555555'.match /^\d{7,8}/
=> #<MatchData "09555555">

# correct
pry(main)> '09555555555'.match /^\d{7,8}$/
=> nil
```

如此一來我們可以回頭看一開始的表達式
> `\[a-zA-z]{3,}|^\D$|^[0-9a-z]*$|^[0-9A-Z]*$\`

這邊可以注意到，中間我們用 pipe `|` 來做分隔，其實 pipe 就是 or 的意思，我們可以利用這個方式來加入多個條件，因此我們也可以將表達是分開來解讀。

- `[a-zA-Z]{3,}` 這個部分則表示我們要找出無論大寫或是小寫的字母，三個連續字母連在一起的組合。
- `^\D$` 這裡則表示找出整個字串都完全沒有數字的組合。
- `^[0-9a-z]*$` 這段則是找出整個字串中只有小寫和字母，意思就是字串中完全沒有大寫的組合。
- `^[0-9A-Z]*$` 和上面那段相似，只是找出沒有小寫的組合。

利用這個表達式，我們就可以順利做出一個討人厭的密碼規則囉，是不是很簡單呢？

在文章的最後，提供一個方便的線上工具，你可以在這個網頁上任意嘗試各種 RegExp 的組合，並且確認規則是否正確，非常地方便：[http://rubular.com/](http://rubular.com/)

希望透過這篇文章，讓大家可以輕鬆地解讀正規表達式，並且也能夠順利地用正規表達式寫出簡潔的程式碼。

photo by [Christiaan Colen](https://www.flickr.com/photos/christiaancolen/)


post-動動手來學 Regular Expression 正規表達式 / cover 

動動手來學 Regular Expression 正規表達式


[calc()][0] 是一個 CSS function 作用於屬性設定是數值的時候可以進行加減乘除的運算，例如： `<length> 長度`、`<frequency> 頻率`、`<angle> 角度`、`<time> 時間`、`<number> 數字`或者是 `<integer> 整數`這幾個屬性值都可以使用 `calc()`。

```css
/* property: calc(expression) */
/* 屬性: calc(運算式) */
width: calc(100% - 50px);
```

## calc() 語法

calc() 這個 function 需要傳入 1 個加減乘除的運算式，在設定 `width`、`height` 這種 \<length\> 相關的屬性時， 在不同單位間也可以進行運算，如剛剛上面的範例：`width: calc(100% - 50px);`。calc() 的運算式一樣是按照先乘除後加減進行計算，如果需要進行複雜的運算，在 calc() 裡面也可以再加入括號 `()`，就可以設為括號先決裡面的先算。

- `+`：加
- `-`：減
- `*`：乘。其中一個運算參數必須是數字 (number)
- `/`：除。除數必須是數字，除數不可為零，會造成 HTML 解析錯誤。

必須注意在使用 + 和 - 的時候，在前後一定要加上空白，不然會被誤為是給了個負值。* 和 / 可以不用加，但為了格式統一方便和閱讀建議還是加一下。

```css
width: calc(50% + 8px)
/* 意思是 50% 的寬度 + 上 8px */
width: calc(50% + -8px)
/* 意思是 50% 的寬度 + 上 -8px，也等於 '50% - 8px' */
```

## Example 應用範例

### 定位

calc() 可以用來定位，如下面所設定的 CSS，就能作出一個滿版的藍色 banner 區塊有固定 40px 的邊距，也是一種將區塊置中的寫法。

```css
.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  background-color: #6C92AF;
  padding: 6px 0;
  text-align: center;
  color: #FFF;
}
```

```html
<div class="banner">Hello banner/div>
```

<p data-height="265" data-theme-id="light" data-slug-hash="PEgoZq" data-default-tab="css,result" data-user="fokayx" data-embed-version="2" data-pen-title="CSS_calc" class="codepen">See the Pen <a href="https://codepen.io/fokayx/pen/PEgoZq/">CSS_calc</a> by fokayx (<a href="https://codepen.io/fokayx">@fokayx</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### 根據父層容器尺寸自動調整尺寸

設定 width 或 height 屬性使用 calc() 計算的數字是 100% 的時候，會自動去抓父層容器的尺寸。例如：做 autocomplete 的時候，希望在輸入框下，出現和輸入框等寬的列表：

```css
.container1 {
  width: 30%;
}

input {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0;
  border-left: 2px solid #6c92af;
  border-right: 2px solid #6c92af;
  border-top: 2px solid #6c92af;
  border-bottom: 2px solid #6c92af;
}

ul {
  background-color: #6c92af;
  margin: 0;
  padding: 0;
  width: calc(100% + 1rem + 1rem + 2px + 2px);
  color: #FFF;
  list-style: none;
}
```

```html
<div class="container1">
  <input placeholder='container1'/>
  <ul>
    <li>show item 1</li>
    <li>show item 2</li>
    <li>show item 3</li>
  </ul>
</div>
```

由於 CSS 在加上 border、padding 的時候都是從原本設定得尺寸再往外加，所以長出來的東西看起來的尺寸會比原本設定的 width 還要大，因此要做到 ul 和 input 等寬的結果，在 input 加上的 padding 和 border 在算 ul 的 width 的時候也要幫他算進去，所以 `ul { width: calc(100% + 1rem + 1rem + 2px + 2px); }` 指的是：符合父容器的 100% 寬度，加上 input 的 `padding-left: 1rem` 和 `padding-right: 1rem`，再加上 `border-left: 2px` 和 `border-right: 2px`。用 calc() 計算尺寸非常方便，即使不同單位也沒有問題。如：codepen 第一個區塊。

如果在 ul 有設定 border、padding，ul 自己也會長大，在 calc() 計算的時候就必須扣掉這部份，例如：codepen 第二個區塊。

```css
.container2 {
  width: 30%;
}

.container2 input {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0;
  border-left: 2px solid #6c92af;
  border-right: 2px solid #6c92af;
  border-top: 2px solid #6c92af;
  border-bottom: 2px solid #6c92af;
}

.container2 ul {
  background-color: #6c92af;
  margin: 0;
  padding: 0;
  border: 1px solid #212c35;
  width: calc(100% + 1px + 1px);
  color: #FFF;
  list-style: none;
}
```

```html
<div class="container2">
  <input placeholder='container2'/>
  <ul>
    <li>show item 1</li>
    <li>show item 2</li>
    <li>show item 3</li>
  </ul>
</div>
```

<p data-height="265" data-theme-id="light" data-slug-hash="JMqyyP" data-default-tab="css,result" data-user="fokayx" data-embed-version="2" data-pen-title="css_calc_ex2" class="codepen">See the Pen <a href="https://codepen.io/fokayx/pen/JMqyyP/">css_calc_ex2</a> by fokayx (<a href="https://codepen.io/fokayx">@fokayx</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### 將 calc() 巢狀包入 CSS 變數中

只要用括號 () 包好包滿，就可以無限次使用 calc() 方法，會一層一層從括號裡面計算出來。

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

在上面這段程式碼裡面展開所有變數之後 widthC 就等於：

`--widthC: calc( calc( 100px / 2) / 2)`

所以 .foo 的 width 最後算出來的值就是 25px。

[0]: https://developer.mozilla.org/zh-TW/docs/Web/CSS/calc 'calc at mdn'

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 HTML / CSS 觀念和原理嗎？
>
> 我們有開設 🪁 [HTML 網頁設計新手村](https://5xruby.tw/courses/html) 課程唷 ❤️️
>


post-CSS： calc() 數值運算 / css calc xuemei

CSS： calc() 數值運算


相信大家小時候都學過四則運算。以 Ruby 進行四則運算時，**整數**的加法、減法、乘法相當單純：

```
> 1 + 2
=> 3

> 9 - 2
=> 7

> 3 * 2
=> 6
```

為什麼要強調整數呢…因為換成**浮點數**的話就會混進奇怪的東西 XD

```
> 0.1 + 0.2
=> 0.30000000000000004

> 0.3 - 0.1
=> 0.19999999999999998

> 0.1 * 0.2
=> 0.020000000000000004
```

簡單來說，由於電腦記憶體有限，**浮點數的 0.1** 和一般人腦認知的**小數點 0.1**有著極微妙的誤差。這是有名的「浮點數不精確問題」，不論任何程式語言都會遇到。不過今天的主題是除法，這部分就跳過吧。

## 那除法呢？
和加減乘法比起來，除法的花樣就多了。首先，從數學上來說，除法運算必然會產生**商數**和**餘數**：

```
被除數 = 商數 * 除數 + 餘數
# 14 = 4 * 3 + 2
```

因此，對人腦來說是簡單的 `x ÷ y`，對電腦來說就是黑人問號了：「所以你現在是想知道除數還是餘數還是什麼？」

### 我兩個都想知道，不行嗎？
可以喔！使用 `x.divmod(y)` 方法，可以同時取得商數和餘數：

```
> 14.divmod(3)
=> [4, 2]
```

### 我想知道商數

#### 總之先幫我隨便算一下吧
好喔，那就是最經典的 `x / y` 方法：

```
# 整數相除，得到整數的商數
> 14 / 3
=> 4

# 非整數相除，得到非整數的商數
> 14 / 3.0
=> 4.666666666666667
```

#### 就是要整數

使用 `x.div(y)` 方法，結果會轉為整數：

```
> 14.div(3)
=> 4

> 14.div(3.0)
=> 4
```

#### 浮點數錯了嗎？

使用 `x.fdiv(y)` 方法，結果會轉為浮點數：

```
> 14.fdiv(3)
=> 4.666666666666667

> 14.fdiv(3.0)
=> 4.666666666666667
```

#### 整數什麼的最討厭了

使用 `x.quo(y)` 方法，會得到更精確的商數：

```
# 整數相除，得到分數物件（Rational）
> 14.quo(3)
=> (14/3)

# 非整數相除，得到浮點數物件（Float）
> 14.quo(3.0)
=> 4.666666666666667
```

### 我想知道餘數

我們先從最單純的情況開始。

#### x, y 的正負值相同時

`x.modulo(y)` 和 `x.remainder(y)` 可以取得餘數：

```
> 14.modulo(3)
=> 2
> 14.remainder(3)
=> 2
```

兩邊同樣都是負數時也是一樣：

```
> -14.modulo(-3)
=> -2
> -14.remainder(-3)
=> -2
```

其中 `x.modulo(y)` 也可以寫成（比較常見的？） `x % y`，兩者意義是一樣的。

#### x, y 的正負值不同時

好，問題來了。當 `x` 和 `y` 的正負值不同時，也就是像是 `14 ÷ -3` 或 `-14 ÷ 3` 這樣的計算時，會發生什麼事情呢？

```
> 14.divmod(-3)
=> [-5, -1]
> 14.modulo(-3)
=> -1
> 14.remainder(-3)
=> 2
```

咦？為何同樣是取得餘數的 `x.modulo(y)` 和 `x.remainder(y)`，得到的結果卻是不一樣的呢？還記得剛才的除法復習嗎：

```
被除數 = 商數 * 除數 + 餘數
```

當被除數和除數的正負值不同時，例如 `14 ÷ -3`，按照數學上對餘數的定義（詳細請參考[維基百科](https://zh.wikipedia.org/wiki/%E4%BD%99%E6%95%B0)），以下兩個解法都是成立的！

```
14 = (-5) * (-3) + (-1)
14 = (-4) * (-3) + 2
```

這也就是說，在數學上，`14 ÷ -3` 的餘數同時有可能是 `-1` 和 `2`。因此，Ruby 同時提供了 `x.modulo(y)` 和 `x.remainder(y)` 兩種方法，以分別取得兩個不同解法所得到的餘數。

簡單地說，能使 `x = a * y + b` 成立的**最小商數解**`a`，與其搭配的餘數 `b` 就是 `x.modulo(y)` 會取得的值：

```
# 14 = (-5) * (-3) + (-1)
> 14.modulo(-3)
=> -1
```

而另一個解法所得到的餘數，就是 `x.remainder(y)` 的結果。它和被除數的正負值會是一致的：

```
＃ 14 = (-4) * (-3) + 2
> 14.remainder(-3)
=> 2
```

前述 `x.divmod(y)` 所取得的餘數，則是以 `x.modulo(y)` 的值為準。

### 特殊狀況

再補充一些和零有關的特殊狀況：

```
＃ 除數是零的話會噴錯
> 1 / 0
=> ZeroDivisionError

＃ 但可以是 0.0 XD
> 1 / 0.0
=> Infinity

# 被除數是零的話，怎麼除都會是零
> 0 / 3
=> 0

# 除非用 0.0 去除 XD
> 0 / 0.0
=> NaN
```

## 結語

以上是關於 Ruby 除法的介紹，雖然實用性應該很低（笑）想更深入理解 Ruby 的數學運算的話，可以參考官方文件的 [Numeric API](https://ruby-doc.org/core-2.4.0/Numeric.html)，還有很多不常用的冷門方法等大家去認識喔～

---

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

post- Ruby 冷知識：除法篇 / cover

Ruby 冷知識：除法篇


## 部署 Rails 你可能會需要用到...

在學習 Rails 部署的路上，你一定聽過 Nginx、 Passenger、 Capistrano 這幾個東西吧？這篇文章會依序介紹這幾個工具特色，以及常見功能！

> 學習 Rails 部署建議可以參考蒼時的 [系列教學文章](https://blog.frost.tw/tags/DevOps/)  
它會詳細帶著讀者一步一步在 DigitalOcean 的機器上部署 Rails 專案

部署大概像什麼樣子？大概像下面這張圖吧
![](https://i.imgur.com/TeWMZTB.png)

遠端伺服器可能是 GCP、AWS、DigitalOcean 這些機器，程式碼倉庫則是 GitHub、 Gitlab、Bitbucket 這些服務，部署過程就是讓遠端伺服器可以取得程式碼倉庫的程式碼，然後順利的把專案執行起來。其中我們會需要在遠端伺服器安裝 Passenger、Nginx 這兩個軟體，同時得用 Capistrano 讓部署自動化、更有效率！

--- 
### 目錄

* Nginx & Passenger
  * 為什麼是 Nginx 搭配 Passenger ?
  * Passenger 擅長什麼呢？
  * Passenger 常用指令：
  * Nginx 設定檔說明
  * 自己設定 Nginx 

* Capistrano
  * Capistrano 功能介紹
  * 部署架構 
  * 設定檔
  * 常用指令
* 結論

---

## Nginx & Passenger

Nginx 是一個 Web Server，它的功能是接受 http request 並回覆 http response ， Nginx 本身和 Ruby 沒有關係，通常使用 Nginx 時我們還會搭配 Passenger 這一個 App Server，它可以管理 Rails 的 process 數量，同時 App Server 符合 Rack 的規範所以可以跟符合 Rack 規範的 Web Application (例如 Rails 溝通)

> 在接下來的文章中，會使用三個名詞<br><br>
> Web Server 就是 Nginx<br><br>
> App Server 就是 Passenger<br><br>
> Web Application 就是 Rails App<br><br>
> 關於 Passenger 和 Nginx 的安裝可以參考 [這篇文章](https://blog.frost.tw/posts/2018/04/10/Getting-started-deploy-your-Ruby-on-Rails-Part-4/#more)

### 為什麼是 Nginx 搭配 Passenger ?

這是我一開始學習部署時一直弄不懂的地方，我原本的想像是伺服器上面除了有我的 Web Application 外，再來就是某個軟體來處理其他的事情。到底為什麼需要 Nginx 和 Passenger 兩樣工具的搭配才能完成這些工作呢？

Nginx 和 Apache 都是 Web Server，它們專攻處理靜態檔案還有 http request。一般來說 Web Server 會放在 App Server 還有 Web Application 之前，它可以直接接觸 Client 端送來的請求，但在它後面的 App Server 和 Web Application 卻不行，因為這樣的架構讓這些軟體可以更有效率的分工，也讓我們的伺服器更安全。

此外，Web Server 還能處理效能上的議題，譬如 slow client 問題，如果 Client 端處理 http request 的速度超慢，Server 這邊就可能得花許多時間在等待這個 Client ，這樣的等待是很浪費資源的，為了解決這類型效能問題，又不讓其他開發者浪費時間重複造輪子，最好的方式就是讓 Web Server 處理這些問題，讓 App Server 和 Web Application 處理他們擅長的，這就是為什麼我們會用到 Nginx 和 Passenger 這兩樣工具了！

### Passenger 擅長什麼呢？

Passenger 會根據流量來判斷現在應該開啟多少個 Web Application，同時它也像是 Web Application 還有 Web Server之間的橋樑，它可以用 Rack 跟 Web Application 溝通，也能處理 Web Server 傳來的 http request，另外 Passenger 在架構上相當彈性也穩定，下圖是 Passenger 的架構圖

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

圖片來源：www.phusionpassenger.com

Passenger 是由多個模組所組成的，包含在編譯 Nginx 時一起編譯的 Phusion Passenger module，以及負責管理、重啟其它模組的 Watchdog 等等，因為這樣的結構可以讓 Passenger 更加有彈性，只要 Watchdog 沒有壞掉它就能幫忙重啟其他模組。

由於這些模組都是由許多的 process 在運行，因此彼此之間的溝通，需要透過一個 instance directory 的目錄，來存放這些 process 之間彼此溝通需要的檔案，所以在 nginx.conf 裡面我們會設定 `passenger_instance_registry_dir` 告訴 Passenger 它的 instance directory 在哪裡，我們在使用 `passenger-status` 指令的時候也是透過這資料夾內的資料取得資訊的。

> 之前在用 Passenger 的時候常常會跑不起來卻不知道為什麼？
> 原來就是少了 `instance directory` 這個目錄！

關於這架構圖更詳細介紹可看[官方文件](https://www.phusionpassenger.com/documentation/Design%20and%20Architecture.html#_web_server_module)

### Passenger 常用指令：

要使用 passenger 的指令必須先將 passenger 的 bin 目錄放到路徑之下，我們可以看到 passenger 的 bin 目錄下有這些執行檔
```
passenger  passenger-config  passenger-install-apache2-module  passenger-install-nginx-module  passenger-memory-stats  passenger-status
```

> 這些執行檔也就是我們可以使用的指令唷！

其中我們常用的可能有這兩個

```
# 查詢 passenger 的狀態
passenger-status 

# 透過 passenger 重新啟動 Rails 
passenger-config restart-app
```

咦！那要在哪邊做 Passenger 的相關設定呢？還記得前面說到的跟 Nginx 一起編譯的  Phusion Passenger module 模組嗎？因為這樣的關係，我們在寫 Nginx 設定檔時也可以一起設定一些 Passenger 需要的東西，接下來可以來看看 Nginx 的設定檔

### Nginx 設定檔說明

Nginx 安裝好後會有 `nginx.conf` 這設定檔，我們可以直接在裡面做修改，或是用 `include site-enabled/*.conf;` 之類的方法把設定檔寫在其他地方，在這個範例我們會將設定檔寫在其他地方，所以在 `nginx.conf` 加上一行 `include site-enabled/*.conf;` 即可，同時也得在有 `nginx.conf` 檔案的目錄下新增 site-enabled 資料夾來放我們要的設定檔。

如果把 nginx.conf 的註解都拿掉的話，你的設定檔可能長這樣

```
# 註解0
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    passenger_root /usr/local/passenger/passenger-5.3.3;
    passenger_ruby /usr/local/ruby-2.4.3/bin/ruby;
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    # 這行是後來加上去的
    include site-enabled/*.conf;
}

```

在 nginx.conf 中可以看到 `http { ... }` 包起來的設定，在這裡面還會看到 ` server {...} ` 的結構，而我們的`include site-enabled/*.conf;` 會寫在 http 這個 block 內然後 server 這個 block 外，因為其實我們要寫的設定檔就是好幾個 `server {...}` ，這些層級之間的規定可以在 [Nginx 的文件](http://nginx.org/en/docs/beginners_guide.html
)中找到~

> 註解0

> 設定 Nginx 的 worker_processes 數量，Nginx 啟動方式是一個 master process 和多個 worker processes，master process 負責根據設定檔的設定來操作 worker processes，所以 worker processes 是真正在處理 http request 的 process！

### 自己設定 Nginx 

在看完 nginx.config 後我們使用以下指令來建立我們自己的設定檔

```
$ mkdir site-enabled
$ cd site-enabled
$ vim xxx.conf (xxx可換為你的設定檔名稱，通常會用網域名稱好區分)
```

完成後可以在 `xxx.conf` 中這樣寫，其中 `#` 為註解符號

```
#設定 Passenger 的 instance directory
passenger_instance_registry_dir /var/run/passenger-instreg;

#第一個 server 區塊
server {

    #監聽 port 80 （ http request ）
    listen 80; 

    #註解1，設定 server name 
    server_name dodeploy.tk;

    #註解2，將 http request 都轉給第二個 server 區塊
    return 301 https://dodeploy.tk$request_uri;
}

#第二個 server 區塊
server {

    #監聽 port 443 （ https request ）
    listen       443 ssl;

    server_name dodeploy.tk;

    #SSL 憑證相關設定
    ssl on;
    ssl_certificate      /etc/letsencrypt/live/dodeploy.tk/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/dodeploy.tk/privkey.pem;

    #註解3
    location ~ /.well-known {
        allow all;
        root /opt/nginx/html;
    }

    #提供靜態檔案的放置目錄
    root /home/deploy/do_deploy.com/current/public;

    #啟動 Passenger
    passenger_enabled on;
}
```

> 註解1<br><br>
> 如果有需要，我們也可以讓多個 domain 都對應到這台機器，首先申請多個 domain name 都對應到我們機器的 IP，然後我們就可以用多個 server 的區塊分別接收到帶有不同網域名稱的 http 請求。

> 註解2<br><br>
> 我們的範例會將 HTTP 轉換成 HTTPS ，要完成這功能要設定多個 server 的區塊，第一個區塊監聽 port 80，也就是只接受 HTTP 請求，在接收到 HTTP 請求後再來就是 return 將請求交由監聽 https 的第二個區塊來處理

> 註解3<br><br>
> 在第二個區塊我們做了 SSL 的憑證的設定，另外 location 那一塊是為了讓遇到 ~/.well-known 開頭的頁面，都使用 /opt/nginx/html 這個目錄，如此一來就能夠讓 Certbot 把驗證用的檔案放在這裡面，讓 Let’s Encrypt 可以驗證到。

完成以上設定後，可以用以下指令檢查設定檔有沒有問題
```
sudo /opt/nginx/sbin/nginx -t
```

如果沒問題可以用以下指令重新啟動 Nginx ( 使用這指令需要設定 systemd 功能 )
```
sudo systemctl restart nginx
```

## Capistrano

### Capistrano 功能介紹

Capistrano 是自動化部屬的工具，如果少了 Capistrano 我們要部署遠端伺服器就得每個動作都自己來，如果有多台機器多個環境，就更會需要 Capistrano 來幫忙處理各種繁瑣的任務了！

Capistrano 支援 Multiple stages，stage 指的是環境( staging, production 之類的)，我們只需要定義一次部署的方式，就能將這樣的部署方式套用在多個環境，也就是將 Web Application 部署到不同環境卻不用重複寫相同的設定檔，只需要設定這些環境所不同的地方譬如 IP 位置就可以了！

Capistrano 也支援 Server roles，在一個環境下我們可能會定義多個 role，因為 Web Application 可能是由多個服務一起完成的，有跑 Web Application 、database 和 CronJob server 等等，每個 role 在部署時會有不同的流程，這些也可以透過定義什麼 role 需要執行甚麼來完成。

### 部署架構 

Capistrano 部署到機器後結構大概會如下

```
├── current -> /home/deploy/do_deploy.com/releases/20150120114500/
├── releases
│   ├── 20150080072500
│   ├── 20150090083000
│   ├── 20150100093500
│   ├── 20150110104000
│   └── 20150120114500
├── repo
│   └── <VCS related data>
├── revisions.log
└── shared
    └── <linked_files and linked_dirs>
```

Capistrano 在每次部署時都會產生一個新的資料夾在 releases 目錄下，新的資料夾裡面就是新版本的 code 而資料夾名稱也是用當時時間命名。所以 releases 目錄下就會有每次部署時程式碼。current 資料夾是目前最新版本的程式碼資料夾，他的來源其實就是用 symlink 指到 releases 資料夾中最新版本的程式資料夾！

在我們的專案中有一些資料我們可能希望他能在不同的 release 中都能使用同樣的資料，就譬如 `20150080072500`、`20150090083000` 等資料夾中的 log 目錄想用同一個，這時候我們會把 log 目錄放在 shared 資料夾中，同時一些敏感資料如 database.yml 或是 settings.yml 這些不會放在版本控制的檔案，也會放在 shared 資料夾中，要怎麼放進去呢？那就要在設定檔中設定啦！

### 設定檔

Capistrano 的相關檔案在專案中的位置如下：

```
├── Capfile
├── config
│   ├── deploy
│   │   ├── production.rb
│   │   └── staging.rb
│   └── deploy.rb
└── lib
    └── capistrano
            └── tasks
```
>設定檔部分會依序介紹 Capfile、deploy.rb、prdouction.rb 這三份檔案

Capfile 的設定會決定你的 Capistrano 可以使用哪些功能，這些功能也就是你能使用的 Capistrano 指令有哪些，以及在跑這些指令的時候會做什麼事。

將部分註解都拿掉，一份全新的 Capfile 設定檔可能長這樣

```
# Load DSL and set up stages
require "capistrano/setup"

# Include default deployment tasks
require "capistrano/deploy"

require "capistrano/scm/git"
install_plugin Capistrano::SCM::Git

# require "capistrano/bundler"
# require "capistrano/rails/assets"
# require "capistrano/rails/migrations"
# require "capistrano/passenger"

# Load custom tasks from `lib/capistrano/tasks` if you have any defined
Dir.glob("lib/capistrano/tasks/*.rake").each { |r| import r }
```
為了部署 Rails App 同時讓我們管理設定檔方便，我會在 Capfile 加上

```

require "capistrano/bundler"
require "capistrano/rails/assets"
require "capistrano/rails/migrations"
require "capistrano/passenger"
require 'capistrano/upload-config'
```

這樣我們就有了專門針對 Rails 部署設計的功能，至於到底會有什麼差別呢？我們可以在使用 cap production deploy 的時候知道，詳細情況會在常用指令介紹

---

接下來 deploy.rb 還有 production.rb 分別代表 global 的設定還有 stage specific 的設定，這是什麼意思呢？我們部署時可能有很多種環境，staging、production 等等之類的，如果有些設定是所有環境都套用的就是 global 的設定，如果是專門放在某個環境的就是 stage specific 的設定。其中 deploy.rb 裡面就是 global 的設定，而 config/deploy/ 這目錄下的 xxx.rb 就是 stage specific 的設定唷！

config/deploy.rb
> global 設定

```
lock "~> 3.10.1"

# 設定專案名稱
set :application, "do_deploy"

# 讓機器知道要到哪裡找我們的程式碼
set :repo_url, "git@github.com:shes50103/do_deploy.git"

# 放在 shared 中，那些不在版本控制中的檔案
append :linked_files, "config/database.yml", "config/secrets.yml", "config/settings.yml"

# 放在 shared 中，不同 release 之間共享的目錄
append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/system"
```

config/deploy/production.rb
> stage specific  設定

```
# 設定部署 Rails 的模式
set :rails_env, :production

# 決定要部署版本控制庫的哪一個 branch
set :branch, 'master'

# 決定部署到遠端伺服器哪個地方，從絕對路徑寫起
set :deploy_to, '/home/deploy/do_deploy.com'

# 見下方說明
role :web, %w{deploy@178.128.xxx.xxx}
role :db, %w{deploy@178.128.xxx.xxx}
```
>其實如果你喜歡的話，把所有 deploy.rb 裡面的東西都丟到 production.rb 裡面也是跑得動的，問題就會是假如到時候想要部署 staging 的時候， staging.rb 也得寫一大堆東西

整個部署流程，我們需要在本地電腦用 ssh 連線到遠端伺服器，要連線上去需要有遠端伺服器的 IP 以及我們要連線上去的身份，在這裡我們使用一個叫做 `deploy` 的使用者連線上去，意思就是在遠端伺服器裡面有這麼一個使用者，同時他的`~/.ssh/authorized_keys` 裡面有我本地電腦 ssh 公鑰，這樣我才能連線上去！

此外，當我以 deploy 使用者連線上遠端伺服器後，我還需要在遠端伺服器中再連線到程式碼倉庫，所以我也必須把 deploy 使用者的公鑰放到程式碼倉庫才能完成部署。記得前面提到的 Capistrano 的特性 Server roles 嗎？這邊看到的 `role :web` 還有 `role :db` 就是我們在部署時指定的 role 唷！

誒！？
怎麼感覺只設定了一點點東西，其實設定檔還有很多其他參數可以調整，但都有預設值了，譬如

```
# Releases 目錄下最多保留五份程式碼
set :keep_releases, 5

# 預設版本控制是使用 Git
set :scm, :git
```

因為已經有預設值了，所以可以少設定很多東西，我們就特別對我們要設定參數調整即可！ 
更多詳細資料可以看[官方文件](https://capistranorb.com/documentation/getting-started/configuration/)

### 常用指令

完成設定檔後，我們總需要在終端機下指令來部署或是操作些什麼，要怎麼知道我們現在的設定能使用哪些指令呢？那就是下面這個

```
bundle exec cap -T
```

可以查詢目前 Capistrano 中能使用的指令，能使用的指令有哪些就取決於 Capfile 中 require 了多少東西，可以試試看把一些 require 的設定註解掉後再輸入一次 `bundle exec cap -T` 能使用的指令會變少

---

```
bundle exec cap production config:pull
bundle exec cap production config:push
```

要使用這兩個指令必須安裝 `gem 'capistrano-upload-config'` 以及在 Capfile 中加入 `require 'capistrano/upload-config'` ，這兩個指令就是把遠端伺服器中的 linked_files 檔案抓下來以及上傳上去

---

```
bundle exec cap production deploy:check
```

這個指令會幫忙檢查要部署的專案目錄( `deploy_to設定的那個` )、 linked_dirs 、 linked_files 這些是否存在，如果不存在它會幫我們把目錄的部分做出來，所以在部署專案的一開始都會使用這指令來幫我們把 shared 目錄建立好，這樣才能用 `cap production config:push` 將設定檔上傳上去！

---

接下來這個就是部署的指令啦！

```
bundle exec cap production deploy
```

到底會做什麼呢？取決於設定檔的寫法，如果 Capfile 有了這兩行

```
require "capistrano/setup"
require "capistrano/deploy"
```

在 deploy 的時候就會跑過以下步驟

```
git:wrapper
git:check
deploy:check:directories
deploy:check:linked_dirs
deploy:check:make_linked_dirs
git:clone
git:update
git:create_release
deploy:set_current_revision
deploy:symlink:linked_files
deploy:symlink:linked_dirs
deploy:symlink:release
deploy:cleanup
deploy:log_revision
```

如果要部署 Rails 這可能還不夠，我們會需要在 Capfile 內加上

```
require "capistrano/bundler"
require "capistrano/rails/assets"
require "capistrano/rails/migrations"
```

這樣在跑 deploy 的時候就能增加這幾個步驟

```
bundler:install
deploy:assets:precompile
deploy:assets:backup_manifest
deploy:migrate
deploy:migrating
```

> 這五個步驟會在 `deploy:symlink:linked_dirs` 和 `deploy:symlink:release` 之間

在使用 Capistrano 比較常卡關的問題可能就是有些步驟是只有特定的 role 才能執行，這時候就要另外設定，又或者是有些東西的安裝我們可能需要額外指定明確路徑，不然就會安裝在錯的地方。更詳細的部署流程可以參考[這裡](https://capistranorb.com/documentation/getting-started/flow/)

## 結論

在學習部署的過程中，儘管已經完整走完了部署的流程讓服務可以正常執行，但是對這些部署工具的掌握還是十分有限，有很多東西只知道出問題了要這樣做、要那樣試可能可以解決問題，但往往不是很清楚自己到底在幹嘛XD，所以趁這個機會整理了一下這些工具的使用方法。

---

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

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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

Git 面試題

Serverless 與 Node-Canvas 實作動態圖表匯出

用 React Drag & Drop 來實作 Trello 拖拉牆

Active Storage 開箱文

動動手來學 Regular Expression 正規表達式

CSS： calc() 數值運算

Ruby 冷知識：除法篇

Rails 部署工具，原來是這樣

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款