搞懂 React 和 Rails 作為前後端分離夥伴的麻煩事

Transcript

1. ⿈碼科技 TSECHINGHO 2023/07/30 搞懂 React 和 Rails 
 作為前後端分離夥伴的麻煩事 COSCUP 2023 - Ruby track
2. 前後端架構
3. RAILS / API END REACT / WEB NEXT / REMIX / VITE NGINX CLIENT CREDENTIALS GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser / CRS VPC AMAZON GITHUB REACT / MOBILE Frontend Backend AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSR / SSG
4. RAILS / API END REACT / WEB NGINX SSO DOORKEEPER VPC RAILS / VIEW REACT / MOBILE GOOGLE APPLE FACEBOOK AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT CSR Browser / CRS
5. RAILS / API END REACT / WEB NGINX SSO DOORKEEPER VPC INDEX.HTML VITE COMPILE REACT / MOBILE GOOGLE APPLE FACEBOOK AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT CSR Browser / CRS
6. Next.js
7. RAILS / API END REACT / WEB NEXT NGINX CLIENT CREDENTIALS GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser / CRS VPC AMAZON GITHUB REACT / MOBILE Frontend Backend AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSR / SSG
8. Next.js 伺服器端與⽤⼾端⽤的 
 程式或資料未區分開 • Server 端 Only 的資料，不要傳到 Client 端 • Index.getInitialProps = async () => {} • Server 端與 Client 端都會執⾏ • getServerSideProps = async () => {} • 僅會在 Server 端執⾏ • getStaticProps = async () => {} • Server 端的環境變數，不要傳到 Client 端 • process.env.PRIVATE_API_ENDPOINT • process.env.CLIENT_SECRET • SSR 和 CSR 的程式混在⼀起 • SSR 和 CSR 的 API Client 不易區分 • Redux actions 也要區分 • Server 端需要哪些 API endpoint ? • Cookies 使⽤ • CSR 可讀 Server 端給的 initial token • sameSite: “strict”, httpOnly, secure • Sever 端安全管理 • Nginx Proxy
9. CSR with Rails View
10. RAILS / API END REACT / WEB NGINX SSO DOORKEEPER VPC RAILS / VIEW REACT / MOBILE GOOGLE APPLE FACEBOOK AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT CSR Browser / CRS
11. Rails View • Initial Page for React • Controller/Action • Public • Nginx • Initial Props • JSON in data attributes • JSON in script tag 
 document.querySelector('#initial-props') • SSR for SEO • ⽤ Rails view 獨立做⼀份不需登入的⾴⾯？ • ⽤ React 做所有需要登入的⾴⾯？ • Asset compile & deploy 獨立？Node 環境 • Manifest.json 管理 • ENV 和 Setting 管理 <script id="initial-props" type="application/json"> { "auth": { "accessToken": "xxx", "expiredAt": "ooo" } } </script>
12. CSR on AWS S3 / Nginx
13. RAILS / API END REACT / WEB NGINX SSO DOORKEEPER VPC INDEX.HTML VITE COMPILE REACT / MOBILE GOOGLE APPLE FACEBOOK AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT AUTHORIZATION_CODE / 
 PASSWORD / IMPLICIT CSR Browser / CRS
14. CSR 容易遇到的狀況 • ENV 暴露在外 • 讀檔案內容不⽅便 => 只能給後端處理 • 沒地⽅寫暫存檔案 => 只能存 localStorage • SessionStorage / LocalStorage 使⽤ • CSR 存 cache API 資料 • CSR 存 access token, refresh token • 第三⽅ OAuth 登入應對（Google, Apple） • 和⾃有 API 的 Token 驗證與交換 • 效能不佳的狀況 • 視訊 (優化 backend 不⼀定能有效解決) • 照相機 • 畫圖 (canvas) • 截圖 (解析度, 尺⼨) 在 memory 少的狀況下 • Compile & Deploy • Assets 可直接放 CDN 或 AWS S3
15. Rails API End Point
16. Public / User / Manager ⾴⾯ • CSR to SSR API to RAILS API • Access token 取得⽅式安全，依賴後端溝通 • 可⽤在 Public ⾴⾯ • 可⽤在登入後的⾴⾯ • CSR to RAILS API • Access token 取得⽅式不安全 • 不建議⽤在 Public ⾴⾯ • 適合⽤在登入後的⾴⾯
17. Rails APIs • Restful API • Open API v3 • Swagger ⽂件撰寫 • GraphQL ⽀援 • CORS 管理 • User Authorization 辨識 • Access token 和 user_id 對應 • OAuth Scope 實作 • Doorkeeper OAuth 2 Grant Flow • authorization_code • client_credentials • implicit • password • 辨識 OAuth Application 來源 (CRS/SSR) • 辨識第三⽅ OAuth Provider (Google, Apple) • Access Token 驗證
18. Demo with Next.js 
 https://github.com/goldenio/rails-nextjs-demo
19. RAILS / API END REACT / WEB NEXT NGINX GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser VPC AMAZON GITHUB Frontend Backend CLIENT CREDENTIALS (BAD) + API ACCESS with TOKEN AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSG
20. RAILS / API END REACT / WEB NEXT NGINX CLIENT CREDENTIALS GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser VPC AMAZON GITHUB Frontend Backend API ACCESS with TOKEN AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSG
21. RAILS / API END REACT / WEB NEXT NGINX CLIENT CREDENTIALS GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser VPC AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSG API ACCESS with TOKEN
22. RAILS / API END REACT / WEB NEXT NGINX CLIENT CREDENTIALS GOOGLE APPLE FACEBOOK SSO DOORKEEPER Browser / CRS VPC AMAZON GITHUB Frontend Backend AUTHORIZATION_CODE / CLIENT CREDENTIALS / IMPLICIT SSR API ACCESS with TOKEN /api/users
23. Recap
24. 什麼原因要前後端分離 • ⼤公司應該以各團隊的需求為主 • PM 與設計團隊⽅便前期 Demo 作業 • 前端團隊和後端團隊⽅便各⾃維護 
 Feature, Repo, Infra, Deploy 作業 • DevOps 團隊基於安全、效能等要求 • ⼩公司應該以專案的特性為主 • 客⼾要求 • 團隊技術推進
25. • Repo 規劃：Mono repository 或 multiple repositories 看團隊運作 • 環境變數：前後端減少重複定義，不要隨意暴露到 Client 端 • 專案設定值：Single source，前後端減少重複定義，分清楚 development 和 production 的設定 • Asset 管理：統⼀由 Rails 或 Node.js 端編譯檔案，管理 manifest.json • 開發環境：保持前後端完整性，有 https 網址可⽤，需容易除錯 • 部署：⾃動化部署前後端，是否要 Docker 化 • Nginx 設定：規劃好 Location 與 Proxy，靜態檔案對應 • Credentials 取得：注意安全性，使⽤合適的 Grant 模式 • Credentials 保存：注意安全性，存放在適當的地⽅（SessionStorage、LocalStorage、Cookies） • 多樣登入⽅式的 token 交換：注意雙向認證，有效時間，Refresh ⽅式 • API 規劃：是否依⾓⾊（Public / User / Manager）區分端點，是否⽤ token 辨識⾓⾊與使⽤情境 • CSR 安全：CORS 管理 • CSR 和 SSR 區分：程式容易辨識 • E2E 溝通準則：請寫⽂件說明
26. View Component + Lookbook + Tailwind 
 
 Alpine.js + Turbo + Stimulus