# 20220824 Docker/部署Heroku/Rails7
###### tags: `Ruby` `Rails` `Docker`
查看版本

$ docker -v

## Image 映像檔 (read only)
-> image + image

可被建立，但不能被修改

## Container 容器 (內容可以修改)
- start
- stop
- rm

內部，外部 volumn <-- mount
/mnt/c/

container = image.new

>[alpine](https://hub.docker.com/_/alpine)
迷你版linux

$ docker run alpine

:::info
記得要開鯨魚喔～～
不然會連不上
會docker就有飯吃了 TAT
:::

$ docker run alpine unamex

# 列出所有image
$ docker image ls

# 列出所有在執行的container
$ docker container ls

# 列出所有的container，包括沒在執行
$ docker container ls -a

$ docker run --interactive --tty alpine sh
# 工程師的特質
$ docker run -it alpine sh 

interactive: 我要跟你互動
tty：輸出到外面

就算你刪掉或建立裡面的東西，當你離開，再打開後還會是全新的～

撿回停止的container:

docker container start -i -a 123456

-v 把外面某個目錄對應到內部的目錄

**可以看回放喔～大概在11:28開始～**

## Docker file
不想寫又臭又長的指令
所以可以建立一個docker file，連續幫你執行一連串的指令

FORM ruby:3.1.2-alpine
WORKDIR /prohect
COPY Gemfile Gemfile 
RUN bundle install

COPY Gemfile Gemfile => 複製一份Gemfile到container裡～
## Docker compose
去新公司 下這個指令後環境就設定好了 可以專心寫rails
所以環境不用自己寫，交給公司的前輩大大們～～

$ docker compose up

:::info
題外話：
問面試官問題
開發環境是用什麼呢？請問開發流程中是使用docker或其他類似的工具嗎？
:::

重點
Image
container

***～～Finish～～***

## Heroku 部署

>:rocket:第五支影片
:::info
2022/Nov.28 起要付費
heroku用小時計費 demo前開付費方案 一天NTD 10
:::

首先，先註冊帳號啊！！！
如果有就不用。
>CLI: command line interface
[Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)

brew tap heroku/brew && brew install heroku

---
>版本確認

heroku --version

>:bulb:checkpoint: 會顯示：`heroku/7.62.0 darwin-x64 node-v14.19.0`
---
>在專案的terminal輸入以下

$ heroku login

>:bulb:checkpoint:
---
>開專案＋遠端節點

$ heroku create [name]

>:bulb:checkpoint: 已經贈送網址！只差push上去

---

$ git remote -v


>先git add/ git commit 只有main有作用 其他分支無作用

$ git push heroku main

bundle lock --add-platform x86_64-linux

但現在 push 會壞掉～因為heroku不支援sqlite
所以要換另外一個資料庫-->:bulb:[改資料庫](https://ithelp.ithome.com.tw/articles/10196250)

>把這次的 commit 併在上一次的 commit

$ git commit --amend 

部屬後 css 跑掉(沒tailwind)解法:
application.html.erb 裡面增加

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

### purgecss
可以處理css上線後的內容，只留有用到的tailwind css 減輕容量，加速載入頁面的使用經驗

串金流的環境變數，可以到 heroku 的後台去設定。

***～～Finish～～***

## Rails 7 時代

- rails 7 沒有node module沒有yarn add, 裝套件使用importmap
- 內建foreman
- 內建預設支援tailwind 3
- 內建stimlus
- CRUD的destroy, method: delete => data: { turbo-method: :delete }
-
- `<%= link_to "Destroy", book, data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>`
- :arrow_up: [RAILS GUIDES](https://guides.rubyonrails.org/layouts_and_rendering.html#rendering-by-default-convention-over-configuration-in-action)
- `<%= button_to 'Destroy this book', book_path(@book), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>`
- :arrow_up: generated by scaffold

> 檢查相容性 [Can I use](https://caniuse.com)

透過importmap引入套件:

bin/importmap pin 套件
bin/importmap unpin 套件

turbolinks => turbodrive
- 不只聽連結，連表單也會聽

### HOTWire (HTML over the wire)
Modal可以透過 action cable 或 websocket 來傳遞 html
按下去再跟後端要
.
.
.
.
.
.
(爆米花準備好)
老師表演 rails 7 CRUD
15:50

method: "delete" => data: {"turbo_method": "delete"}

#### turbo_drive
>
#### turbo_frame
>inline editing在線編輯
#### turbo_stream
>可以做到不用js就寫好前端

***～～Finish～～***

**各位專案加油！！！！！！**