# Deployment - Heroku
記錄部署至 Heroku 流程。

## 部署至 Heroku 流程簡介。
### Step1. 申請 Heroku 帳號
申請完帳號後會收到確認信，點選紅色框框內連結。
### Step2. 安裝工具 Heroku CLI

$ brew tap heroku/brew && brew install heroku

完成後確認 heroku 版本

$ heroku --version

### Step3. 登入 heroku

$ heroku login

按下除了q（離開）以外任一按鍵，跳轉至登入頁面。
點選 Log in 後，可以離開此頁面，接著都透過 Heroku CLI 操作。
### Step4. 在 Heroku 建立專案
:::warning
專案名稱不能重複
:::

$ heroku create wubay555

建立完成後會得到一個網址。

點選連結過去後，目前只會看見 Heroku 歡迎字樣。

除了heroku 提供的網址外，也加了一個遠端節點。

建立專案除了在 terminal 操作外，也可以直接到 heroku 網站上點選
接著再到 terminal

$ heroku git:remote -a wubay(herokuapp 名稱) || git remote add heroku "Heroku git URL"(https://git.heroku.com/wubay.git)

### Step5. 推至 Heroku

$ git push heroku main(or master)

:::warning
推上去的分支只能是 main 或 master，才會執行 build，其他則無效。
:::

推上去失敗，檢查錯誤訊息需要另外執行一段指令。

`bundle lock --add-platform x86_64-linux` and try again.

$ bundle lock --add-platform x86_64-linux

執行完後，需要先 commit，否則直接一樣會推前一個版本。

接著再推上 Heroku。
又失敗了，Heroku 不支援 sqlite3，需要改為其他資料庫

更換資料庫的方法為：
先到 Gemfile 將 spring 註解。

# gem 'spring'

:::warning
註解後記得要執行 ```bundle install```
:::
接著再執行

$ rails db:system:change --to=postgresql

別忘了要 commit ！！！
一般在拿到專案時除了執行 yarn install 和 bundle install 以外，還要執行 rails db:migrate，推上 Herokuu 也一樣要執行，在 Heroku 遠端執行的方式為 rails db:migrate，線上需要再加上 heroku run。

接著就在推上 Heroku。


又再次出現錯誤訊息。
![](https://i.imgur.com/B5Oms07.png)
查看 log 可以發現錯誤訊息為 <mark>Cannot find module 'tailwindcss'</mark>
![](https://i.imgur.com/oRFWktM.png)
當初安裝完 tailwind 是在開發模式下執行，當部署到 Heroku 時（為 production 模式）找不到。
![](https://i.imgur.com/8vTq27z.png)
解決：
將此行程式碼一致 dev 上方就可以了。
![](https://i.imgur.com/G4GeHR0.png)
修正完錯誤後記得要再一次 commit。
如果覺得一直 commit 很麻煩，可以用指令 ```git commit --amend```，跟前一次 commit 合併。 

terminal 執行完畢後，再到線上去檢查一下。
![](https://i.imgur.com/mhsNCt5.png)
還是有錯誤，按照網站上的提示在 terminal 執行 ```heroku logs --tail```
![](https://i.imgur.com/s8UZWo1.png)
從一堆錯誤訊息中找到提示。
![](https://i.imgur.com/aoDqjCX.png)
通常錯誤前的指令看起來是可以正常執行。
![](https://i.imgur.com/KhWEdud.png)


需要在 Gemfile 中設定 ```gem 'net-smtp', require: false```
結束後一樣要 ```bundle install``` 和 ```git add .```、```git commit --amend```

再推上 Heroku，出現無法推上去的錯誤訊息。
![](https://i.imgur.com/yNj7Rz1.png)

此時下指令 ```git push heroku main -f ``` 強制推上去。

接著推上去後再到網站上檢查一次，還是得到 error ，需要在重複到 log 裡檢查錯誤。

重複來回幾次發現錯誤訊息均為跟 email 有關。

# Gemfile
gem 'net-smtp', require: false
gem 'net-pop', require: false
gem 'net-imap', require: false

解決完以上錯誤後就可以在網站上成功看到畫面了！！！

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

### 後記：
假如 css 也是使用 webpack 打包，在部署上 Heroku 時需要在 app/views/layouts/application.html.erb 在 head 加上以下程式碼。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Heroku 後台設定變數（如串接金流需要用的金鑰）
![](https://i.imgur.com/1BRB22T.png)