愛料理網站建置經驗談

淺談愛料理網站的技術架構以及運用的第三方套件，都是很簡單且常見的套件。

在 Rails 所提供的完整生態系中，倘若能善用各種資源，讓團隊可以專注在解決特定問題、發展產品上，將會對公司、網站的營運有非常大的助益。

Transcript

1. 愛料理 網站建置經驗談 ྛٓठ Lawrence@polydice.com
2. 關於我 ·•林宜儒 Lawrence https://fb.com/yiru.lin ·•Polydice, Inc. 寶利拾股份有限公司 ·•愛料理 iCook.tw（網站與 iPhone app） ·•Mr. Plurk ·•Inside 網路趨勢觀察部落格 www.inside.com.tw
3. 愛料理食譜分享社群
4. 數據概況 ·•上線時間：2011. 11. 8 ·•會員人數： 50,000 人 ·•食譜數量： 8,500 道食譜 ·•粉絲人數： 24.7 萬人
5. 分享食譜以及幸福時刻
6. 我深信食物的力量 在我們的家庭裡占有一席之地 為我們留住生命中的美好 Jamie Oliver
11. 網站緣起
12. 因為愛煮菜才做這網站嗎？
20. 相容性 IE7/IE8/IE9、Firefox、Google Chrome、Safari、iPhone
21. 團隊的信念 ·•資訊技術是我們的核心價值之一 ·•Done is better than perfect. ·•持續創新
22. Team building ·•培養團隊夥伴們對於網路、行動網路的 敏銳度 ·•相近的溝通頻率，很重要 ·•對產品要有愛與認同 ·•公司文化：要快樂、要持續動手做 ·•Ideas without execution are nothing 沒做就是零分
23. 產品營運 ·•追蹤各種數據 ·•每天、每週、雙週、每月的成長率 ·•Google Analytics、MySQL、Redis 交互運用 ·•用 d3.js 呈現在後台供營運人員查看 ·•透過各種監控的服務，掌握營運狀況 ·•Pingdom, New Relic, Cloudwatch, Exceptional, Google Analytics ·•自建 Log parsing 機制
24. 我們所運用的技術
25. 選用 Rails 的理由 ·•Rails 是個成熟且可信賴的網頁開發框架 ·•豐富的生態系 ·•大量的套件可運用 ·•大量的參考文件、書籍、教材 ·•許多廠商專門為 Rails 提供服務 ·•社群蓬勃發展 ·•node.js 也有類似條件
26. 感謝 Rails 生態系 ·•運用了各種 Ruby gems 提高生產力 ·•正在試圖努力回饋開放社群
27. Architecture Web Server Database Message Queue Workers/Schduler AWS EC2 AWS EC2 AWS RDS/MySQL AWS EC2/Redis Load Balancer AWS ELB CDN AWS Cloudfront AWS EC2/Redis AWS S3 File Storage Database Search Engine AWS EC2/Solr DNS management AWS Route 53 AWS EC2/Memcached Cache
28. 我們使用的各種工具 ·•Rails 3.2.8 ·•Ruby Gems ·•Bootstrap, powerful front-end framework. ·•3rd-party tools/services
29. devise & omniauth ·•帳號管理系統 （註冊、登入、驗證、忘記密碼等等） ·•社群網站整合 ·•Facebook、Twitter 、支援 oauth 的網站 ·•搭配 devise_invitable 建立 email 邀請功能 ·•可以追蹤使用者是由誰邀請加入
30. kaminari ·•資料分頁用 ·•可輕易自定輸出的 HTML 格式 ·•方便自定樣式 ·•Kaminari.paginate_array 很實用
31. carrierwave ·•檔案上傳套件 ·•搭配 imagemagick/mini_magick 處理縮圖 ·•利用 Fog 可直接將檔案傳至 AWS S3 ·•搭配 CDN 動態輸出檔案網址 config.fog_host = lambda do lambda do |file| host_number = file.path.sum % 4 "http://cdn%d.icook.tw" % host_number end end
32. simple_form ·•表單產生器 ·•產生對應的 ·•欄位名稱 ·•欄位型態 ·•欄位提示 ·•開發者、設計師有一致的標準依循
33. client_side_validations ·•利用 JavaScript 進行用戶端資料驗證 ·•搭配 Model 事先定義好的邏輯進行驗證 ·•搭配 simple_form、bootstrap 很方便
34. sunspot_rails & rsolr ·•站內搜尋引擎 ·•即將換成 elasticsearch ·•重要的是： ·•可自定斷詞規則 ·•提供多元的查詢 API ·•換的理由：架構、效能、未來發展
35. acts_as_list, acts_as_tree ·•基本資料結構，list, tree ·•運用在： ·•多層次分類 ·•需自定排序的資料 ·•使用者自定的食譜清單
36. compass/compass-rails ·•大量好用的 helpers ·•CSS3/Layout/Reset/Typography 等 @include border-radius(4px, 4px); .simple { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; } }
37. Message Queue: resque ·•發信、抓資料、更新資料、統計數據 ·•resque ·•resque_mailer ·•resque-scheduler ·•resque-pool ·•resque-exceptional
38. exceptional ·•網站經營，應盡可能避免例外出現 ·•例外出現時，要能主動發現 ·•程式出現 exception 時主動通知 ·•getExceptional.com
39. aws-ses ·•運用 AWS SES 進行 SMTP 發信 ·•便宜好用，進階的統計功能需自行開發 ·•早期我們用 Sendgrid，最近換到 SES
40. cancan ·•權限控管 ·•網站管理員、一般使用者、測試人員 <%= link_to edit_question_answer_path(question, answer) do %> ฤा౴Ҋ <% end if can? :update, answer %>
41. state_machine ·•超重要 ·•資料的狀態管理 ·•草稿、待發佈 ·•已發佈 ·•標記為垃圾或是 soft_delete ·•搭配 Rails 的 scope, default_scope 運用
42. jbuilder ·•JSON template builder ·•用來提供 Web Services
43. rails_autolink ·•讓帶有 URL 或 email 的內容變成超連結 <%= auto_link(@post.body, :all, :rel => "nofollow") %>
44. cells ·•邏輯較為複雜或通用的頁面元件 ·•優點： ·•簡化 Controller/View 的複雜度 ·•cells 可個別進行 cache ·•可視為一般 Controller 使用 （例如 include 某些特定的 helpers）
45. inherited_resources ·•一直寫一樣的程式很膩吧？ ·•inherited_resources 透過更多的 convention 減少開發人員撰寫重複程式碼的機會 ·•運用在後台，處理以 CRUD 為主的操作
46. 測試，真的很重要 ·•rspec-rails ·•rspec-cells ·•factory_girl_rails ·•ffaker ·•populator ·•should-matchers ·•guard
47. Unicorn ·•Zero-downtime deployment ·•斷線影響到數千個使用者，成本很高 ·•uptime 很重要 ·•可以 zero downtime 最好
48. Bootstrap
49. Bootstrap ·•完整的文件（開發者與設計師好溝通） ·•豐富的元件 ·•容易自定樣式 ·•透過 Responsive Design 適應各種尺寸
51. Font Awesome ·•向量 Icon ·•搭配 Bootstrap 使用 ·•透過 CSS 指定樣式 ·•尺寸、顏色、效果
52. 關於前端 ·•大量運用 jQuery，少部分 Backbone.js ·•未來會增加 Backbone.js 或其他前端 MVC ·•將較為複雜的邏輯交給前端 ·•前端、後端分工可更明確切割 ·•requireJS、Backbone.js、Handlebars、jQuery
53. 關於 SEO
54. 關於 SEO
55. 關於 SEO
56. 關於 SEO
57. 關於 SEO
58. 關於 SEO •氣炸鍋
59. 關於 SEO •情⼈人節
60. 用的雲端服務
61. 用的雲端服務
62. 用的雲端服務
63. 用的雲端服務
64. 用的雲端服務
65. 用的雲端服務 ·•ELB ·•EC2 ·•RDS ·•S3 ·•Cloudfront ·•Route 53 ·•SES ·•Cloudwatch
66. 用的雲端服務
67. New Relic ·•Application Performance Monitoring ·•Deployment ·•Throughput, Apdex, Availability, etc.
68. 用的雲端服務
69. 用的雲端服務
70. 結論 ·•架網站很簡單，積木堆一堆就有了 ·•持續的營運與成長才是真正的挑戰 ·•網站上線，才是真正的開始 ·•盡可能優先採用現成的解決方案
71. Server Operation ·•高度依賴 Amazon Web Services ·•盡可能自動化 ·•大量依賴各種工具、script ·•九月份 Uptime: 99.85%
72. 工商服務 RubyConf Taiwan 2012 ·•Ruby Toolbox for DevOps, Richard Lee 隨著各種行動、社交網路服務的蓬勃發展，以及敏捷軟體開發和 SaaS、雲 端運算的普及化，在現今的網路服務，程式的開發以及服務的維運已經變 得密不可分。開發者時常是身兼得伺服器管理以及營運的角色，也因此產 生了 DevOps 這樣的新一代工作職位。 ·•Provisioning - 透過 Chef / Vagarnt 等 Ruby 相關工具來達成自動化部署 以及彈性的調整伺服器數量 ·•Continous Integration & Deployment - 透過 Capistrano / Janky / Hubot 以及 GitHub 的 API 整合來達成持續整合和部署 ·•Monitoring - 透過 God / Fluentd 等工具來監控伺服器以及程式狀況、並 且收集所需要的記錄以便後續進行分析 在演講的內容中，將會使用目前本公司的服務以及工作流程來作為例子分 享，會特別針對中小型的 Startups 要如何善用這些工具來改善工作流程和 節省會加以描述。"
73. 愛料理 分享幸福時刻