Ruby on Rails 網站程式設計基礎班

第十課：Heroku 雲端上架

git 小招 

若上一節課是使用我提供的 postboard 程式碼 ：

 

你要 push 程式碼到 github 上，我們需要先修正 git :

 

 


 

# 用 git remote -v 檢查所有遠端 branch 的 url

git remote -v

# 應該會回傳

# origin https://github.com/yuyueugene84/postboard.git (fetch)
# origin https://github.com/yuyueugene84/postboard.git (push)

# 用 set-url 修改 url

git remote set-url origin 你的github專案url

heroku 雲端服務 

今天若要上架到雲端，成本很高(裝 OS, 裝環境 etc.)

所以出現了PaaS (Platform as a Service 即時平台服務)

在 Rails 界最有名的 PaaS 就是 Heroku

(Matz 大神也是在 Heroku 工作)

 

 


 

heroku 雲端服務 

先到 Heroku 註冊帳號：

https://www.heroku.com/

 

 


 

heroku 雲端服務 

接下來下載 Heroku Toolbelt:

https://toolbelt.heroku.com/debian

 

 


 

heroku 雲端服務 

安裝完 Heroku Toolbelt 後，開一個新的 terminal

 

 

 

 


 

# 先用 Heroku login，輸入你的資訊

heroku login 

# 在 gemfile 裡加入以下： 

group :production do
  gem 'pg'
end

# 然後執行

bundle install --without production

# 接下來把改變的程式碼做 commit

翻開下一頁前，請確保你已經 commit 現有的程式碼

heroku 雲端服務 

確保你的 Commit 都完成之後，就要正式上架了：

 

 

 


 

# 先創造一個 heroku app...
# 記住，heroku create 一個專案只需做一次，不然會在 heroku 上創出另一個 app

heroku create

# 把程式碼推上 heroku..

git push heroku master

# 最後跑一下 migration

heroku run rake db:migrate

# 用 browser 打開 app

heroku open

記住，同一個專案要是已經做了 heroku create，下次 push 就不需要再執行一次 heroku create

heroku 雲端服務 

創建完後沒有資料可以顯示...

 

 

 


 

# 我們有兩種方法可以在後端把 Rails App 的資料建立出來：

heroku run rails console

# 執行後就會幫你在 terminal 連上 heroku server 的 terminal
# 然後我們就可以像在 rails console 裡面建立資料一樣的把 Post 建出來：

Order.create(name: "bob", email: "bob@gmail.com", description: "big mac with coca cola")

heroku 雲端服務 

不過要是你需要建立多筆資料...

 

 

 


 

# heroku run console 很 lag，建立多筆資料會消耗很多時間...

# 可以使用 seed.rb 檔案，不需要每次重建資料建到瘋掉

# 打開 db/seeds.rb，建立多筆 Post 資料：

Order.create(name: "bob", email: "bob@gmail.com", description: "big mac with coca cola")
Order.create(name: "amy", email: "amy@gmail.com", description: "big mac with coca cola")
Order.create(name: "mary", email: "mary@gmail.com", description: "big mac with coca cola")
Order.create(name: "andy", email: "andy@gmail.com", description: "big mac with coca cola")

# 做好 git commit 之後...

git push heroku master

# 然後再跑：

heroku run rake db:seed

Asset Pipeline

javascript,  css, 圖檔等都是靜態資源(Asset)

所謂靜態資源就是指不會隨著Request不同而改變的檔案

 

 

 


 

Asset Pipeline

今天 Client 端對 Server 發出 Request，實際上就是把這些靜態資源從 public 目錄中下載靜態資源使用，若 Javascript 和 css 檔案越來越多時，管理這些檔案和網站效能就會出問題

 

 

 


 

Asset Pipeline

Rails 的 Asset Pipeline 主要功能就是把多個 Javascript 和 css 檔打包並且壓縮成一個檔案，這樣就會減少 Browser 的 Request 下載次數

 

 

 


 

可直接輸入以下網址查看被打包起來的 js 和 css:

http://localhost:3000/assets/application.js
http://localhost:3000/assets/application.css

Asset Pipeline

在一個 Rails 專案裡我們可以放置 Assets 的路徑：

 

app/assets/ - 一般我們自己定義的 javascript 和 css 檔案

app/lib/assets/ - 放自己寫的 js 或 css 套件

app/vendor/assets/ - 放第三方 (非你自己寫) 的 js 或 css 套件

 

 

 

 


 

Made with Slides.com