手把手實戰部署 ReactJS 至 Amazon S3

本文嘗試盡可能實作最佳實踐,但部分設定請依據自身需求調整。

大綱

  • 建立一個簡易的 React 應用程式
  • 設定 S3 提供靜態網站託管
  • 部署
  • 進階實戰 - SSL 搭配自訂網域
  • 進階實戰 - S3
  • 進階實戰 - CloudFront
  • 進階實戰 - 自動化腳本

繼續閱讀

分享到

如何使用 React Hooks 搭配 Context API 取代 Redux 快速範例入門

本筆記為閱讀 How to Replace Redux with React Hooks and the Context API 後自行實作調整簡化之範例。對於希望直接從範例學習的讀者可自行練習,本範例並非非常完整的教學,不過在能帶給您在使用 Hook 和 Context 上一些啟發:

繼續閱讀

分享到

[譯] 理解 React Hooks

為什麼要使用 Hooks

我們都知道元件是由上而下傳遞資料,藉此協助我們分解一個複雜的大型介面,利用較小單位的介面功能(元件)組成。這些元件各自是獨立的,可重複使用的。雖然理想上是如此,可是實務上我們卻常常無法拆解複雜的元件,使其變成更小的單元,那是因為其相關的邏輯和狀態無法被提取到其他 function 或元件中。

繼續閱讀

分享到

React Hooks 不是黑魔法,只是陣列

本文旨在提供一些關於 Hooks API 一些乍看之下奇怪的規範以及理解這些規範的見解。

繼續閱讀

分享到

手把手設定 MediaConvert 轉檔 HLS 搭配 S3 + CloudFront

使用 S3 + CloudFront + MediaConvert

AWS Elemental MediaConvert 可以編譯您輸入的影音檔案並轉換產出其他格式的影音檔案。MediaConvert 可以從 S3 取得來源檔或者通過 HTTP 或 HTTPS。整體步驟如下:

  • 建立 S3 Bucket
  • 建立 SSL 憑證,後續 CloudFront 欲使用自訂網址
  • 設定 CloudFront
  • 設定 IAM 權限
  • 上傳 Video 使用 MediaConvert 轉譯

繼續閱讀

分享到

如何使用 react-intl

React 國際化

快速概覽:如何建置一個國際化的 React 應用程式。通過本文的協助您可以學會如何偵測使用者的本地資訊,將其儲存在 cookie 並允許使用者變更,提供不同語言的介面,適當的貨幣格式同時也包含一些常見問題的列表。

注意:本文為React Internationalization – How To 的翻譯/專案實作更新,大部分文章為翻譯原文,專案與實作則進行簡化與更新。該文由 react-intl 官方文件所推薦。
進行更新當下 react-intl 版本為 v2.9.0,因此稍微備註 v3+ 的一些警告。

繼續閱讀

分享到

Rails 6 Action Text 直接上傳圖片至 Google Cloud Storage 失敗

直接先備份參考解答

繼續閱讀

分享到

React Beautiful Dnd 快速使用筆記

react-beautiful-dnd 有 3 個主要元件:

  • DragDropContext - 建立一個可 DnD 的範圍。
    • onDragStart
    • onDragUpdate
    • onDragEnd
  • Droppable - 建立可以被拖曳放入的區塊。
  • Draggalbe - 可被拖拉元件

繼續閱讀

分享到

匯出 PostgreSQL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 0. 取得連線字串
# 1. Instance Security 記得允許您的 IP 存取
# 2. 測試連線
$ psql -h [ENDPOINT_URL] \
-U [USERNAME] \
-d [DATABASE_NAME]
# 輸入密碼
# 檢查 - 列出所有資料庫
$ \l

# 檢查 - 列出所有 Tables
$ \d

# 3. 匯出
$ pg_dump -h [ENDPOINT_URL] \
-U [USERNAME] \
-f [FILENAME].sql [DATABASE_NAME]
分享到

Deploy Rails 6 to Google App Engine

繼續閱讀

分享到