在 react 專案效能調整上，發現了最基礎的玩意。

前言

因爲工作使用 React 開發，對於許久沒碰的我來說，難免錯過了許多好料。

這篇的原由是有一次「質疑」現有專案的寫法：

const [list, setList] = useState(() => getList());

閱讀他人的代碼，先質疑，再理解。這也是一種成長的方式。

仔細查了，才發現原來這叫做「useState Lazy Initialization」。

回到最基礎的文件上，可以找到這篇：Avoiding recreating the initial state 。

它就是在講述使用useState，傳入function可以使狀態僅在初始時 render。

如果 function需要花費較高的運算時間，甚至引起畫面卡頓，那麼這是一個有效提升效能的做法。

中文應該叫做：惰性初始 state。

這篇記錄學習內容，閱讀後你應該會知道 useState lazy initialization：

1. 如何正確起手式。
2. 概念與實踐方式。
3. 有無使用的差異。

一、初始化方式的兩種模式

1. 直接傳遞初始值

const [todos, setTodos] = useState(createInitialTodos());

• 初始值會在 組件每次渲染時 計算。
• 如果createInitialTodos()運算較重，將會影響效能。

2. 傳遞函數進行 lazy initialization

const [todos, setTodos] = useState(() => createInitialTodos());
// or 
const [todos, setTodos] = useState(createInitialTodos);

• React 只會在第一次渲染時執行該函數，並將結果作為初始狀態。
• 避免在每次渲染時執行昂貴的計算。

3. 建立昂貴計算

嘗試將createInitialTodos弄得複雜一點，你會發現開始延遲了。

/**
 * @param {number} depth
 * @param {number} size
 */
function createInitialTodos(depth = 3, size = 100) {
  if (depth === 0) {
    return Array(size)
      .fill(0)
      .map((_, i) => i);
  }
  return Array(size)
    .fill(0)
    .map(() => createInitialTodos(depth - 1, size));
}

二、使用範例來比較效能

完整範例放在：https://github.com/explooosion/react-lazy-initialization

1. 初始 CRA 專案

使用一個乾淨的專案來測試。

npx create-react-app my-app

[ App.css ]

記得先移除所有樣式。

2. 建立兩種 Components 比較

沿用剛剛昂貴計算的function createInitialTodos()。

建立一個直接傳遞初始值的 ComponentAppWithDirectValue。

[ App.js ]

function AppWithDirectValue() {
  const [count, setCount] = useState(0);

  console.time("Direct initializer");
  const [todos, setTodos] = useState(createInitialTodos());
  console.timeEnd("Direct initializer");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        AppWithDirectValue ({count})
      </button>
    </div>
  );
}

• 在useState上下使用console.time, console.timeEnd記錄時間。
• 在useState直接傳入值createInitialTodos。
• 使用一個button來觸發re-render。

以及建立一個傳遞函數進行 lazy initialization 的 Component AppWithLazyInitializer。

[ App.js ]

function AppWithLazyInitializer() {
  const [count, setCount] = useState(0);

  console.time("Lazy initializer");
  const [todos, setTodos] = useState(createInitialTodos);
  console.timeEnd("Lazy initializer");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        AppWithLazyInitializer ({count})
      </button>
    </div>
  );
}

• 同樣在useState上下使用console.time, console.timeEnd記錄時間。
• 在useState傳入函數createInitialTodos，你也可以傳入() => createInitialTodos()。
• 使用一個button來觸發re-render。

接著在 App 使用，就可以來比較囉！

[ App.js ]

export default function App() {
  return (
    <>
      <AppWithDirectValue />
      <AppWithLazyInitializer />
    </>
  );
}

完整代碼：

[ App.js ]

// @ts-check

import React, { useState } from "react";

/**
 * @param {number} depth
 * @param {number} size
 */
function createInitialTodos(depth = 3, size = 100) {
  if (depth === 0) {
    return Array(size)
      .fill(0)
      .map((_, i) => i);
  }
  return Array(size)
    .fill(0)
    .map(() => createInitialTodos(depth - 1, size));
}

function AppWithDirectValue() {
  const [count, setCount] = useState(0);

  console.time("Direct initializer");
  const [todos, setTodos] = useState(createInitialTodos());
  console.timeEnd("Direct initializer");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        AppWithDirectValue ({count})
      </button>
    </div>
  );
}

function AppWithLazyInitializer() {
  const [count, setCount] = useState(0);

  console.time("Lazy initializer");
  const [todos, setTodos] = useState(createInitialTodos);
  console.timeEnd("Lazy initializer");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        AppWithLazyInitializer ({count})
      </button>
    </div>
  );
}

export default function App() {
  return (
    <>
      <AppWithDirectValue />
      <AppWithLazyInitializer />
    </>
  );
}

三、Lazy Initialization 合適的場景

✅ 適用於初始值計算量大，例如：

• 具有龐大的值或深度的資料。
• 複雜計算，例如來源是解析 JSON、深拷貝物件。
• 只需要在 第一次渲染 設定狀態的情境。

❌ 不適用於：

• 簡單的靜態值，如 useState(0)、useState(false)。
• 不影響效能的初始化（過度使用 Lazy Initialization 反而讓代碼變得難讀）。

reference

• react dev useState - avoiding-recreating-the-initial-state
• React Hooks 總整理筆記
• useState lazy initialization and function updates

有勘誤之處，不吝指教。ob'_'ov

前言

最近工作派發了一些 Legacy Code 專案翻修，難免會遇到一些 deprecated 的方法。

面對這些陳年代碼，最大的敵人往往都是疏忽了商業邏輯以及代碼可讀性。

本篇重點不在於介紹 substr, substring, slice ，想必大家都略懂這方法。

如果使用冷門特性，你一輩子都會記得寫註解對吧！？

這一篇的角度在於筆者對 Legacy Code 進行 String.substr() 重構的思路。

從「維護性」與「效能」的之間找到合適的平衡。

這份筆記也是為了日後仍遇到時，可以快速拿自己的文章參考。

希望能對大家有所幫助。

一、字串切割介紹

簡單說明一下他們「主要」的用法。

最大的區別在於第二個參數「索引 Index」的意義。

String.prototype.substr() - MDN Web Docs

substr(start)
substr(start, length)

String.prototype.substring() - MDN Web Docs

substring(indexStart)
substring(indexStart, indexEnd)

String.prototype.slice() - MDN Web Docs

slice(indexStart)
slice(indexStart, indexEnd)

這些方法中，最大的差異在於：

• 參數使用幾個？

• 傳入的參數值是否為 ≥ 0？

• 傳入的參數值是否為 負數？

二、評估抽換方式

這篇是解決 Legacy Code 的場景，因此可以思考你面對的 substr() ，是為了解決什麼問題？

接著來探索這些可能的條件，找出最適的解決方案！

極端的例子我相信是鮮少的，不太需要執著於極端案例。

難以長期傳承商業邏輯的代碼，最需要的是直觀的可讀性。

以下提供 7 種的例子，作為重構的選擇：

1. 基本使用 substr(start, length))

2. 起始索引為負數 substr(-start, length) → 使用 slice()

3. 長度超過字串長度 substr(start, length) → 使用 substring()

4. 起始索引超過字串長度 substr(start, length) → 使用 slice()

5. 單參數 substr(start) → 使用 substring()

6. 起始索引為負數且超過字串長度 substr(-start, length) → 使用 slice()

7. 無法使用 substring(start, end) 替代 substr() 的情境 → 使用 slice()

1 . 基本使用 substr(start, length)

適用於簡單的範圍擷取，用於單純的商業邏輯。

const str = "JavaScript";
console.log(str.substring(4, 10)); // "Script"

使用 substring() 替換。

console.log(str.substring(4, 10)); // "Script"

✅ substring(start, start + length) 直觀表達了「從 start 位置擷取 length 個字元」，可讀性極高。

2. 起始索引為負數 substr(-start, length) → 使用 slice()

substring() 不支援負數索引，因此需要 slice() 來替代。

const str = "Hello World";
console.log(str.slice(-5)); // "World"

使用 slice() 替換。

console.log(str.slice(-5)); // "World"

✅ slice(-start) 直接從倒數第 start 個字元開始擷取，行為與 substr() 相同。

3. 長度超過字串長度 substr(start, length) → 使用 substring()

在一些未知長度的條件下，如果允許 length 超出範圍，substr() 會自動調整，substring() 也有類似行為。

const str = "abcdef";
console.log(str.substring(2)); // "cdef"

使用 substring() 替換相對直觀，slice() 你喜歡也可以使用。

console.log(str.substring(2, str.length)); // "cdef"

✅ substring(start, end) 自動處理 end 超過範圍的情況。

4. 起始索引超過字串長度 substr(start, length) → 使用 slice()

如果場景具有未知的起始索引，substring() 會自動交換 start 和 end，而有不同結果，這種條件建議使用 slice()。

const str = "Hello";
console.log(str.slice(10, 13)); // "" (空字串)

使用 slice() 替換。

console.log(str.slice(10, 13)); // "" (空字串)

✅ slice(start, end) 行為與 substr() 一致，會返回空字串。

5. 單參數 substr(start) → 使用 substring()

當 length 省略時，substr(start) 會提取到字串結尾，這與 substring(start) 行為相同。這應該是最簡單的場境，單純且單一參數。

const str = "Hello JavaScript";
console.log(str.substring(6)); // "JavaScript"

使用 substring() 替換。

console.log(str.substring(6)); // "JavaScript"

✅ substring(start) 直覺地表示「從 start 開始到字串結尾」，可讀性高。

6. 起始索引為負數且超過字串長度 substr(-start, length) → 使用 slice()

通常在於更多的演算方法。substring() 不支援負數索引，應該使用 slice()。

const str = "Hello";
console.log(str.slice(-10, -7)); // "Hel"

使用 slice() 替換。

console.log(str.slice(-10, -7)); // "Hel"

✅ slice(start, end) 在負索引時表現一致，適用於此場景。

7. 無法使用 substring(start, end) 替代 substr() 的情境 → 使用 slice()

substring() 無法處理負數索引，也無法擷取固定長度，因此 slice() 是更好的選擇。

const str = "Hello World";
console.log(str.slice(-5, -2)); // "Wor"

錯誤的 substring() 替換。

console.log(str.substring(0, 3)); // "" (錯誤，因為 `substring()` 會將負數視為 0)

正確的做法應該用 slice()。

console.log(str.slice(-5, -2)); // "Wor"

✅ slice() 是唯一能夠完全取代 substr() 在負索引情境下的選擇。

三、結論

整體而言，應該根據重構的目的，以及代碼的職責來決定適合哪一種。

• 基於可讀性優先：如果今天你在業務邏輯單純，且索引範圍固定時，substring() 可讀性更高。

• 基於效率且容錯率高的場景：如果面對特定的演算或者複雜的計算，甚至索引可能是負數等等不穩定的條件，這時候使用 slice() 相對安全。

適合 substring() 的場景：

• start 與 end 你能肯定商業邏輯為正數。

• 需要擷取 固定範圍，不考慮負索引。

• 可讀性佳，適用於基本的字串擷取。

適合 slice() 的場景：

• 需要支援負數索引 substr(-start, length)。

• 起始索引超出字串長度時，應返回空字串。

• 避免 start > end 情境時自動交換。

在悠閒的假日，最快樂的便是探索新技能～

前言

筆者 MacBook 拿來混雜工作與私人開發用，

因此經常有不同的 Repository 須對應不同的 Github Account。

如果沒設定好 SSH，就會被終端機嗆：

ERROR: Permission to explooosion/nuxt3-boilerplate.git denied to robbywu-work.
fatal: Could not read from remote repository.

每次在新環境都需要重新配置，

也…時常遺忘作法，所以這次將流程紀錄起來！

注意事項

1. 文章筆者分為 Personal 與 Work 的情境建置
2. 筆者開發環境使用 macOS

0.環境檢查

可以先檢查自己電腦是否已經存在一些 git 使用的 SSH，

在 ~/.ssh/目錄下檢查是否存在以下兩個檔案（類似）：

• id_rsa（私鑰）
• id_rsa.pub（公鑰）

如果已經存在，可以選擇刪除重新來過，

或者跳過 1.建置金鑰，直接到 2.SSH 設定檔。

1.建置金鑰

1.1 私人用

新增 SSH，輸入指令。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

• 請將your_email@example.com 改為自己的私人電子郵件

輸入上述指令建立檔案與名稱時，會提示你儲存檔案。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/robbymac/.ssh/id_rsa): id_personal

• 可設定自己喜歡的名字。例如：id_personal

添加 SSH 金鑰到 SSH 代理，輸入指令。

ssh-add ~/.ssh/id_personal

• 請指向自己的檔案路徑與名稱

複製公鑰，輸入指令。

稍後我們便可以貼到 Github - Settings - SSH keys 上。

pbcopy < ~/.ssh/id_personal.pub

• 請記得要複製公鑰.pub
• 建立 SSH 時會自動產生私鑰匙與公鑰，公鑰預設檔名為[私鑰].pub

在 GitHub 上添加 SSH 金鑰，選擇 New SSH key。

將剛剛透過 pbcopy 指令複製的公鑰，貼到 key，並適當取一個你好識別裝置的金鑰。

• Key type不需要變更，預設Authentication Key

測試 SSH 連接，輸入指令。

ssh -T git@github.com

1.2 工作用

參照 「1.1 私人專案金鑰」，建立一組金鑰 id_work、id_work.pub

步驟很簡單，不是筆者懶了不寫文章。

2. SSH 設定檔

接著我們要在這個檔案，配置 SSH 用於連接遠端主機的相關設定。

請到 ~/.ssh 目錄建立新檔案，內容如下：

可使用 vi 或者 nano 編輯，

或者用 Finder 打開，直接建立檔案，輸入指令。

open ~/.ssh

新增 SSH 設定檔案，輸入指令。

touch config

SSH 設定檔案內容，輸入內容。

Host github-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_person

Host github-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_work

• Host：可以自己設定方便識別的名稱
• HostName：根據你的主機配置，由於 Repository 建立在 Github，因此設定 github.com 即可！
• IdentityFile：設定你的 SSH 來源，請依據你的私人與工作用指定 私鑰

以上流程就完成建置囉！後續不再需要改動。

3. 設定 Repository

以下有兩種情境，請根據所需擇一配置。

3.1 新專案 Clone 指定 SSH Config Host

在 Git 的預設設置中，當使用 SSH 協議與遠端版本控制倉庫進行通信時，它會自動讀取 ~/.ssh/config 文件中的主機配置。

這些主機配置包含了與遠端主機的連接參數，例如主機名稱、用戶名和身份證書文件等。

由於我們環境存在多個遠端主機，因此每次 Clone 需要指派對應的 Host。

使用 SSH 協議進行操作時忽略 ~/.ssh/config 文件中的任何主機配置。

設定環境變數，輸入指令。

export GIT_SSH_COMMAND="ssh -F /dev/null"

接著 Clone 你的新專案。

git clone ssh://github-personal:<使用者名稱>/<儲存庫名稱>.git

3.2 將既有專案添加指定 SSH Config

每次你有新專案，都需要設定所使用的 SSH 帳號。

請先移動到你的專案目錄，輸入指令。

git remote set-url origin github-personal:<使用者名稱>/<儲存庫名稱>.git

• github-personal：根據你的專案用途，輸入 SSH Config 配置的 Host 名稱。

檢查專案的 Remote，輸入指令。可以發現 remote-url 增加了 Host 名稱。

git remote -v

好耶！恭喜你設置完畢。

只要要記得，這兩種的專案配置就行囉！

或者跟筆者一樣，重新回顧這篇文章！！

有勘誤之處，不吝指教。ob'_'ov

又是值得探索 typescript 的日子 ~

前言

平常專案的開發上使用都 TypeScript，但其實用的範圍很淺，沒有太多的琢磨。

而近期在重構撰寫上心中冒出了一些問題，這些問題其實蠻新手向的。

這篇文章最感謝 ChatGPT，在指引下找到關鍵字，進而翻閱到官方文件。

好耶！

本篇非常淺薄筆記用途，如果讀者有更多的興趣，可以直接參見官方文件：

https://www.typescriptlang.org/docs/handbook/utility-types.html

新手向前置作業

在開始前可以先初始開發環境，讓環境能夠編譯 TypeScript。

npm init -y

安裝 TypeScript 的定義管理工具。

npm install --save-dev typescript ts-node

初始 tsconfig.json，預設配置不修改，如果有額外需求再自行設置。

npx tsc --init

如果要編譯時，執行指令即可：

npx tsc

下方是一段關於用戶的介面定義，文章的範例都會沿用此介面。

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
  address: string;
  phoneNumbner: string;
}

一、Pick 應用

Pick

如果今天想基於這個介面，取出需要的屬性來定義新的介面，可以使用 Pick。

範例為定義一個介面，包含 name、age、email、address 4 種屬性。

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
  address: string;
  phoneNumbner: string;
}

type PersonPreview = Pick<Person, "name" | "age" | "email" | "address">;

const person: PersonPreview = {
  name: "Robby",
  age: 18,
  email: "robby@email.com",
  address: "my address",
};

二、Omit 應用

Omit

如果今天想基於這個介面，剔除不需要的屬性來定義新的介面，可以使用 Omit。

範例為定義一個介面，從 Person 介面中去除了 id、phoneNumber 後，剩餘的 4 種屬性。

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
  address: string;
  phoneNumbner: string;
}

type PersonPreview = Omit<Person, "id" | "phoneNumbner">;

const person: PersonPreview = {
  name: "Robby",
  age: 18,
  email: "robby@email.com",
  address: "my address",
};

三、Partial 應用

Partial

Partial 用於定義介面是允許非必填的，這裡所指的是將原本屬性賦予 undefined 型別，不包含 null！

今天情境為定義一個介面用於新增用戶，可以延續使用 Person 來完成這個新介面定義。

在下方例子中：

1. 若 name、email 為必填，可使用 Pick 來抽出所需屬性。
2. 若除了 name、email，其餘屬性皆可必填，我們可使用 Partial。
3. 由於 id 不應該被視為 request body 提交，因此使用 Omit 去除 id。

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
  address: string;
  phoneNumbner: string;
}

type CreatePersonRequest = Pick<Person, "name" | "email"> &
  Partial<Omit<Person, "id">>;

const person: CreatePersonRequest = {
  name: "Robby",
  email: "robby@email.com",
};

四、延伸思考

到目前為止其實範例都很簡單，在官方文件 Utility Types 都能找到！

而筆者在 Partial 的例子中有了新疑惑！？

對於 CreatePersonRequest 賦予了必填：

Pick<Person, "name" | "email">

而我們卻在 Partial 只替除了 id，意味著 name、email 是非必填：

Partial<Omit<Person, "id">>

關於非必填的設定，嚴格上做法是這三個屬性去除：

Partial<Omit<Person, "id" | "name" | "email">>

那為何我們最初的例子結果卻是必填？？？

type CreatePersonRequest = Pick<Person, "name" | "email"> &
  Partial<Omit<Person, "id">>;

交叉型別

交叉型別，Intersection Types：

在交叉型別中，如果有相同的屬性，則該屬性必須符合所有相關型別的規則。

這是因為在這裡使用了「&」作為結合，名詞稱之為「交叉型別，Intersection Types」。

在這個情況下，即使 name 和 email 在 Partial> 這個型別中是可選的，

但是由於他們在 Pick 型別中是必填的，所以在 CreatePersonRequest 中也是必填的。

換句話說：

可以把它看作是 "更嚴格" 的規則（也就是必填）優先於 "更寬鬆" 的規則（也就是可選）。

這是 TypeScript 的 Intersection Types 的行為。

延伸例子

一些關於 Intersection Types 的例子：

在這個範例中，型別 C 是型別 A 和 B 的交叉型別，因此它將有兩個屬性：一個數字型別的 a 屬性，和一個字串型別的 b 屬性。

type A = {
  a: number;
};

type B = {
  b: string;
};

type C = A & B;

let c: C = {
  a: 1,
  b: "hello"
};

如果在兩個型別中都有相同的屬性，而其中一個是必須的，另一個是可選的，則結果型別將會是必須的。

type A = {
  a: number;
};

type B = {
  a?: number;
};

type C = A & B;

let c: C = { a: 1 }; // Correct
let c2: C = {}; // Error, property 'a' is missing in type '{}'

在交叉型別中，如果有相同的屬性但是型別不一致，則該屬性必須符合所有相關型別的規則。

這個例子中，型別 C 會導致一個錯誤，因為 a 在 A 中是 number 型別，而在 B 中是 string 型別。

type A = {
  a: number;
};

type B = {
  a: string;
};

type C = A & B;

維基百科

筆者在前端領域上接觸較深，對於後端或強型別語言的一些名詞或特性相對生疏。

關於 Intersection Types 可以在維基百科看到更多擁有此特性的語言：

有勘誤之處，不吝指教。ob'_'ov

修正 nginx 出現 405 方法拒絕

前言

本篇的錯誤發生於 cloudflare 設置 DDoS Protection 機制後發生

在 cloudflare 經過此機制後會向 server 發送 POST 事件

由於 nginx 預設禁止靜態資源配置 POST 請求

因此發生禁止的 Response

設置

將 nginx 設置關於 error_page 的捕捉

[ default.conf ]

server {

    listen 80;
    listen [::]:80;

    return 301 https://$host$request_uri;
}

server {

    # ...

    error_page 405 =200 https://$host$request_uri;
}

參考

• https://stackoverflow.com/questions/24415376/post-request-not-allowed-405-not-allowed-nginx-even-with-headers-included
• https://www.izhangheng.com/nginx-405-not-allowed
• https://cloud.tencent.com/developer/article/1680056
• https://github.com/denysvitali/nginx-error-pages

有勘誤之處，不吝指教。ob'_'ov

在架設 GCP HTTPS 時遇到的小坑

先看看你現在有哪些憑證，如果沒有就先手動建立好吧～

gcloud compute target-https-proxies list

找到 Name 之後進行驗證

gcloud compute target-https-proxies describe TARGET_HTTPS_PROXY_NAME --global --format="get(sslCertificates)"

過一陣子查詢一下憑證就會亮綠燈囉

REF

https://cloud.google.com/load-balancing/docs/ssl-certificates/google-managed-certs

有勘誤之處，不吝指教。ob'_'ov

關於 Windows 環境 EOL 的設定問題

前言

眼尖的你會發現 Banner 怎麼會是 git，沒錯，筆者就是被 git 搞到 血流成河 ！

本次經驗主要在 vscode 開發上遇到了 EOL 的問題，

雖然這類文章滿街跑，不過筆者也仍紀錄自己也被搞的經歷

原來大家都被搞過啊

如果你想知道怎麼處理，請直接跳到：處理方式

因為更換了新電腦，所有環境都要重設定，

想說把平常在 mac 開發的專案拿到 Windows 搭配新的螢幕寫。

因為也換了一台 27" 2K 曲面螢幕 :D

於是專案 clone 並開啟後，結果 prettier 和 eslint 噴了一堆 WARNING

：require or disallow newline at the end of files (eol-last)

原本想說調整 vscode 的 Editor: Unfold On Click After End Of Line

結果即使檔案開啟使用 LF，但問題仍會被 git 的 diff algorithms 判斷到

Dear：　

　　　你是不是在安裝 git 的時候，一鍵完成？

解決方式

筆者採取最快最乾淨最簡單的方式

FAST . EASY . CLEAN . ONCE

請移除 git，重新安裝

並且在 Configuring the line ending conversions 步驟！

預設是第一個，他會把你符號轉成 CRLF

就算你提交時會幫你改回 LF...

但你在 develop 階段會被 lint 誤判啊！！！

所以請改為第三個：

Checkout as-is, commit as-is | 你怎麼簽出就怎麼提交

這樣你的 repo git 就不會亂掉了 ~

還敢不 Step By Step 啊你

Reference

• Git 在 Windows 平台處理斷行字元 (CRLF) 的注意事項

有勘誤之處，不吝指教。ob'_'ov

關於重新包裝組件的方式，本篇圍繞著 Render Functions 與 Template。

• banner: Persist Access Token with Vue.js

前言

在工作誤打誤撞下，開始接觸 Vue 一陣子，

在環境中使用了 Quasar framework。

在組件高複用下，經常為了統一樣式，增加不少行數，

因此筆者把常用的組件設定樣式後再封裝一次。

為了讓組件能夠持續使用原有的 props 以及 slot，

設定上遇到了不少困難。

本文從理解簡單的 component 建立，

接著實作 components 與 extends，

以及 template 與 render functoins 的方式。

由於筆者屬於新手入門，當然本篇也以初學者的角度分享，

環境是使用 options api 的方式，所以不探討 composition api。

專案範例放置於：

https://github.com/explooosion/vue-extend-slot-example

目錄

• 前置作業
• ㄧ、簡單的組件建立
• 二、使用 components 包裝 Button
• 三、使用 extends 繼承 Button

前置作業

本專案使用 @vue/cli 建立

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

vue create hello-world

為了簡單使用 fontawesome，在 index.html 新增 CDN

[ public / index.html ]

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

ㄧ、簡單的組件建立

簡單建立一個 Button 的 component。

利用 v-on, v-bind 方式將 listeners 與 attrs 綁給 button 。

在範例組件中，筆者提供了：

• 3 個 props ( type, label, bold )
• 2 種 slots ( default, #after )
• 1 個 event ( greet )

[ Button.vue ]

<template>
  <button
    v-on="$listeners"
    v-bind="$attrs"
    :type="type"
    :style="`font-weight: ${bold ? 'bold' : 'normal'}`"
    @click="$emit('greet', 'Hello Vue')"
  >
    <slot></slot>
    {{ label }}
    <slot name="after"></slot>
  </button>
</template>

export default {
  name: "Button",
  props: {
    type: {
      type: String,
      default: "button",
    },
    label: {
      type: String,
      default: "",
    },
    bold: {
      type: Boolean,
      default: false,
    },
  },
};

• type: buttoon type [ button, submit, reset ]
• label: button 的文字
• bold: 如果 true 則為粗體字

使用範例：

[ App.vue ]

<!-- with props -->
<Button label="Button" />

<!-- with props, default slot -->
<Button label="Submit" type="submit" :bold="true">#</Button>

<!-- with props, after slot -->
<Button label="Reset" type="reset" :bold="true">
  <template #after>@</template>
</Button>

畫面預覽：

二、使用 components 包裝 Button

使用 components 的方式可以想成你又把 Button 組件再包一層起來。

一個 wrapper 的概念，而 DOM 實際上只會有一層 element render 出來

假如想重新封裝一次 Button，並且預先指定好 props 與 slots，

以下範例筆者讓 label 為 Reset，type 為 reset，

並且 slot #after 塞入了一個 redo icon。

[ ButtonTemplate.vue ]

<template>
  <Button :label="label" :type="type" v-on="$listeners" v-bind="$attrs">
    <template #after><i class="fas fa-redo"></i></template>
  </Button>
</template>

import Button from "./Button";

export default {
  name: "ButtonTemplate",
  components: {
    Button,
  },
  props: {
    type: {
      type: String,
      default: "reset",
    },
    label: {
      type: String,
      default: "Reset",
    },
  },
};

三種使用範例：

[ App.vue ]

<!-- basic -->
<ButtonTemplate @greet="onGreet" />

<!-- with props -->
<ButtonTemplate
  label="New Reset"
  type="reset"
  :bold="true"
  @greet="onGreet"
/>

<!-- with slots -->
<ButtonTemplate @greet="onGreet">
  <template><i class="fas fa-sync-alt"></i></template>
  <template #after><i class="fas fa-sync-alt"></i></template>
</ButtonTemplate>

畫面預覽：

關於上述 3 種使用情境：

1. basic

直接使用我們重新封裝過的，沒甚麼問題。

2. with props

再次傳遞 Button 組件提供的 props，在外觀上似乎沒問題，

但是查看 DOM tree，bold 被誤當 attrs 加上去了。

因為我們沒有在 ButtonTemplate.vue 告知他是 props

這時你可以把 Button 的 props 透過 spread 方式： ...Button.props 補進來：

[ ButtonTemplate.vue ]

import Button from "./Button";

export default {
  name: "ButtonTemplate",
  components: {
    Button,
  },
  props: {
    ...Button.props, // add here
    type: {
      type: String,
      default: "reset",
    },
    label: {
      type: String,
      default: "Reset",
    },
  },
};

重新檢視原始碼，就不會被當屬性顯示！

雖然沒被當屬性顯示，但我們傳遞的 bold 也失效了，

因為你接收了 props: bold 但沒做任何處理。

沒有成功接收到 props: bold 的畫面：

這時你可以在 v-bind 補上 $options.propsData 就沒問題囉！

[ ButtonTemplate.vue ]

<template>
  <Button
    :label="label"
    :type="type"
    v-on="$listeners"
    v-bind="[$attrs, $options.propsData]"
  >
    <template #after><i class="fas fa-redo"></i></template>
  </Button>
</template>

成功後的畫面：

3. with slots

這段我們將 default, 與 name 為 #after 的 slots 傳遞進去，但很明顯地，並沒有成功傳入。

可以嘗試在 mounted 印出 this.$scopedSlots，可以發現多了 after 與 default

我們可以利用 v-for 將這段 slots 補進來：

[ ButtonTemplate.vue ]

<template>
  <Button :label="label" :type="type" v-on="$listeners" v-bind="$attrs">
    <template #after><i class="fas fa-redo"></i></template>
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </Button>
</template>

畫面預覽：

完整的 components 方式：

[ ButtonTemplate.vue ]

<template>
  <Button
    :label="label"
    :type="type"
    v-on="$listeners"
    v-bind="[$attrs, $options.propsData]"
  >
    <template #after><i class="fas fa-redo"></i></template>
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </Button>
</template>

import Button from "./Button";

export default {
  name: "ButtonTemplate",
  components: {
    Button,
  },
  props: {
    ...Button.props,
    type: {
      type: String,
      default: "reset",
    },
    label: {
      type: String,
      default: "Reset",
    },
  },
};

好處是你可以設定 name，透過 Vue.js devtools 找到你的組件。

同時你也可以發現，ButtonTemplate 其實是個 wrapper 概念。

三、使用 extends 繼承 Button

使用 extends 的方式，有別於 component，並不是又包了一層，

而是繼承原有的組件，並且再覆寫原本的 render 內容。

本篇暫不討論 mixins。

使用 extends 的方式，以下範例筆者讓 label 為 Search，

後續範例則在 slot 塞入了一個 search icon。

[ ButtonFunctional.vue ]

import Button from "./Button";

export default {
  extends: Button,
  props: {
    label: {
      type: String,
      default: "Search",
    },
  },
};

• label: 在順序上，如果沒有傳遞 props，就會使用 default value

三種使用範例：

[ App.vue ]

<!-- basic -->
<ButtonFunctional @greet="onGreet" />

<!-- with props -->
<ButtonFunctional
  label="New Search"
  type="button"
  :bold="true"
  @greet="onGreet"
/>

<!-- with slots -->
<ButtonFunctional @greet="onGreet">
  <template><i class="fas fa-search-plus"></i></template>
  <template #after><i class="fas fa-search-plus"></i></template>
</ButtonFunctional>

畫面預覽：

關於上述 3 種使用情境：

似乎都是沒甚麼問題。

如果想讓特定 slot 為 search icon，該怎麼做？

由於我們使用 extends，因此改使用 render functions 方式。

相關 render functions 也可參考：簡單的 Vue Render Functions 與動態組件的綜合應用

在 render functions 中，筆者參考官方的文件 Slots，

使用 scopedSlots 方式去設定，其中：

• h: CreateElement
• ctx: RenderContext

[ ButtonFunctional.vue ]

import Button from "./Button";

export default {
  extends: Button,
  functional: true,
  props: {
    label: {
      type: String,
      default: "Search",
    },
  },
  render(h, ctx) {
    return h(
      "Button",
      {
        ...ctx.data,
        props: {
          ...ctx.props,
          /** use props or extend here */
        },
        scopedSlots: {
          ...ctx.scopedSlots,
          default: () => h("i", { class: ["fas", "fa-search"] }),
          /** use slots or extend here */
        },
      },
      ...(ctx.children || [])
    );
  },
};

• functional: true。由於我們組件屬於無狀態，又需要接收 props，因此設置為 true，把組件寫成 functinal component。
• props: 預設值可寫在最外層的 props，如果寫在 render functions 的 props，則代表強制蓋掉指定的 props
• scopedSlots: 將原本的 scopedSlots 展開，並於 default 處設定我們的 search icon，你也可以把 default: 根據 slot name 改成 after:
• ctx.children: 如果我們有在 ButtonFunctional 標籤內新增內容，那就是 child 囉！

關於 functional：

由於該組件不處理 data，我們可以轉換成無狀態的寫法，

筆者使用 Functional Component + render function 方式，因此把 functional 設置為 true。

• https://vuejs.org/v2/api/#functional
• Vue.js functional components: what, why, and when?

當然你也可以改使用 Functional Component + Vue Template，改寫後跟前面組件 ButtonTemplate 結構類似，如下：

<template functional>
  <Button
    :label="props.label"
    v-on="$listeners"
    v-bind="[$attrs, $options.propsData]"
  >
    <template><i class="fas fa-search"></i></template>
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </Button>
</template>

import Button from "./Button";

export default {
  extends: Button,
  props: {
    label: {
      type: String,
      default: "Search",
    },
  },
};

關於 children 範例：

<ButtonFunctional>
  child1
  <span>child2</span>
</ButtonFunctional>

畫面預覽：

有個小缺點是你無法透過 Vue.js devtools 找到你的組件。

專案範例放置於：

https://github.com/explooosion/vue-extend-slot-example

Reference

• https://vuejs.org/v2/guide/
• https://v3.vuejs.org/api/options-api.html
• https://vuejs.org/v2/guide/render-function.html#Slots
• https://composition-api.vuejs.org/
• https://mini-ghost.dev/blog/vue-render-function-dynamic-component/
• https://stackoverflow.com/questions/57493900/how-to-extend-vue-component-with-default-values-for-props-and-slots

有勘誤之處，不吝指教。ob'_'ov

利用 Github Actions 部署你的專案到 GKE Cluster 上吧！

• GitHub Actions self-hosted runners on Google Cloud

前言

有關 GCP 與 Github Actons 的設定，大多於前一篇文章，說明詳細。

• GCP - 使用 Github Actions 部署 React 到 Cloud Run

因此本篇略過大多設定，以重點設定的方式說明。

在 Github Actions 的部分，

參考使用 Google Kubernetes Engine - GitHub Actions 的範例建置。

本篇文章專案範例放置於：

https://github.com/explooosion/react-gke-deploy-example

1. 新增服務帳戶 Service Account

根據 Google Kubernetes Engine - GitHub Actions 的建議，

新增服務帳戶，並提供兩個權限：

• Kubernetes Engine Developer - allows deploying to GKE

• Storage Admin - allows publishing to Container Registry

接著取出 Service Account Key，將 JSON file 下載保存。

內容結構如下：

{
  "type": "service_account",
  "project_id": "project-id",
  "private_key_id": "key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nprivate-key\n-----END PRIVATE KEY-----\n",
  "client_email": "service-account-email",
  "client_id": "client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://accounts.google.com/o/oauth2/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-email"
}

你也可以選擇使用 gcloud 命令方式取得金鑰：

gcloud iam service-accounts keys create ./key.json --iam-account  --iam-account <sa-name>@<project-id>.iam.gserviceaccount.com

2. 建立 Kubernetes 叢集

到 Kubernetes Engine 建立新的叢集 cluster。

在位置區域的配置，筆者選擇 asia-east1-a。

3. 建立 CRA 專案 ( Create React App )

接著可以建立專案：

npx create-react-app my-app

如果你會使用 Docker 部署環境，那麼你可以替換成你想部署的專案。

4. 建立 Github Actions ( Workflow syntax for GitHub Actions )

[ Dockerfile ]

可根據自己的專案撰寫，此專案筆者將專案 build 後放置於 nginx html。

FROM node:10 AS Builder

ENV NPM_CONFIG_LOGLEVEL info

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY . .

ARG GENERATE_SOURCEMAP=false

RUN yarn install && yarn build

FROM nginx:1.13.3-alpine

RUN rm -rf /usr/share/nginx/html/*
COPY --from=Builder /usr/src/app/build /usr/share/nginx/html

[ .dockerignore ]

加入一點忽略規則。

Dockerfile
README.md
node_modules
npm-debug.log

[ .github / workflows / main.yml ]

建立 workflows，內容參考 gke。

name: Build and Deploy to GKE

on:
  push:
    branches:
    - master

env:
  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
  GKE_CLUSTER: cluster-1    # TODO: update to cluster name
  GKE_ZONE: asia-east1-a   # TODO: update to cluster zone
  DEPLOYMENT_NAME: gke-app # TODO: update to deployment name
  IMAGE: my-image

jobs:
  setup-build-publish-deploy:
    name: Setup, Build, Publish, and Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    # Setup gcloud CLI
    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
      with:
        version: '290.0.1'
        service_account_key: ${{ secrets.GKE_SA_KEY }}
        project_id: ${{ secrets.GKE_PROJECT }}

    # Configure Docker to use the gcloud command-line tool as a credential
    # helper for authentication
    - run: |-
        gcloud --quiet auth configure-docker
    # Get the GKE credentials so we can deploy to the cluster
    - run: |-
        gcloud container clusters get-credentials "$GKE_CLUSTER" --zone "$GKE_ZONE"
    # Build the Docker image
    - name: Build
      run: |-
        docker build \
          --tag "gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA" \
          --build-arg GITHUB_SHA="$GITHUB_SHA" \
          --build-arg GITHUB_REF="$GITHUB_REF" \
          .
    # Push the Docker image to Google Container Registry
    - name: Publish
      run: |-
        docker push "gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA"
    # Set up kustomize
    - name: Set up Kustomize
      run: |-
        curl -sfLo kustomize https://github.com/kubernetes-sigs/kustomize/releases/download/v3.1.0/kustomize_3.1.0_linux_amd64
        chmod u+x ./kustomize
    # Deploy the Docker image to the GKE cluster
    - name: Deploy
      run: |-
        ./kustomize edit set image gcr.io/PROJECT_ID/IMAGE:TAG=gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA
        ./kustomize build . | kubectl apply -f -
        kubectl rollout status deployment/$DEPLOYMENT_NAME
        kubectl get services -o wide

在 yml 中，使用了幾個需要在 github 建立 secret 的參數：

• GKE_PROJECT：專案 id
• GKE_SA_KEY：專案金鑰，建立 secret 時，務必整個 JSON 內容貼上

而 yml 自身也使用了幾個 env 參數：

• PROJECT_ID: ${{ secrets.GKE_PROJECT }} # 自動會帶入來自 secret 設定
• GKE_CLUSTER: cluster-1 # 輸入你所建立的叢集名稱
• GKE_ZONE: asia-east1-a # 輸入你的叢集主要地區 zone
• DEPLOYMENT_NAME: gke-app # 部署名稱, 此名在其他 yml 需要一致
• IMAGE: my-image # docker 映像名稱

關於 zone，可以回到 GCP 後台叢集查找，

或者使用指令查看：

gcloud container clusters list

[ kustomization.yml ]

在專案根目錄建立 kustomization 設定檔。

apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization
resources:
- deployment.yml
- service.yml

[ deployment.yml ]

建立 工作負載 部署設定檔。

這邊有些與官方不太一樣，appVersion 請使用 apps/v1

並且加上 spec.selector.matchLabels.app: gke-app

apiVersion: apps/v1
kind: Deployment
metadata:
  name: gke-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: gke-app
  strategy:
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 1
  minReadySeconds: 5
  template:
    metadata:
      labels:
        app: gke-app
    spec:
      containers:
      - name: gke-app
        image: gcr.io/PROJECT_ID/IMAGE:TAG
        ports:
        - containerPort: 80
        resources:
          requests:
            cpu: 100m
          limits:
            cpu: 100m

• containerPort：是指容器內部要映射的 port

[ service.yml ]

建立 Service 與 Ingress 部署設定檔。

apiVersion: v1
kind: Service
metadata:
  name: gke-app-service
spec:
  type: LoadBalancer
  ports:
    - port: 80
      targetPort: 80
  selector:
    app: gke-react-app

接著就可以 git push，看看跑完的結果吧～

5. 查看 Container Register & Kubernetes Engine

可以看到順利建置好 image。

工作負載也順利部署成功。

Service 與 Ingress 也順利建立，在端點欄位可以看到公開網址。

看！他在動！

本篇文章專案範例放置於：

https://github.com/explooosion/react-gke-deploy-example

有勘誤之處，不吝指教。ob'_'ov

利用 Github Actions 部署你的專案到 GCP Cloud Run 上吧！

• How to deploy your Cloud Run service using GitHub Actions

前言

在 GCP 環境部署中，提供了網頁上 GUI 的操作、Cloud SDK，

此外你也可以使用 Github Actions 將你的專案部署到 Cloud Run。

本文將介紹如何使用 GoogleCloudPlatform 開源的 github actions，將專案部署到 Cloud Run。

專案部分使用 CRA ( create-react-app ) 作為範例，並將 build 好的專案，搭配 nginx 伺服器。

最後，本篇電腦作業系統環境使用 macOS，

對於 Windows 的朋友抱歉了，但設定與操作大同小異！

本篇文章專案範例放置於：

https://github.com/explooosion/react-gcp-deploy-example

若有時間，再針對 GKE ( Google Kubernetes Engine ) 部署方式撰寫文章。

本篇可能需要具備的微薄知識：

1. Google Cloud Platform
2. Github Actions
3. Cloud Run
4. React
5. Nginx
6. Docker
7. Terminal
8. Git
9. YAML

由於本篇屬於入門教學，因此設定上大多為預設值。

由於本篇屬於入門教學，內文會有些圖文並茂。

由於本篇屬於入門教學，上述知識略懂聽過即可。

流程說明

大致上工作流程 Workflow 如下：

1. 透過設定好的 github actions，會將專案建置成 docker image
2. 將 image 發佈到 Container Registry 存放
3. 使用 Container Registry 存放的 image 建立 Cloud Run 服務

目錄

1. 安裝 gCloud CLI ( Installing Google Cloud SDK )
2. 建立 GCP 專案 ( Creating Your Project )
3. 建立服務帳戶 ( Creating and managing service account keys )
4. 建立 CRA 專案 ( Create React App )
5. 建立 Github Actions ( Workflow syntax for GitHub Actions )
6. 新增 Github Secrets ( Encrypted secrets )
7. Push 專案 ＆ 檢視 Actions
8. 啟用 API 服務 ( API Library )
9. 新增 Docker & 修改 yml
10. 查看 Container Register & Cloud Run

1. 安裝 gCloud CLI ( Installing Google Cloud SDK )

雖然本文操作建立大多使用友善的瀏覽器，

但安裝 CLI 有時也能幫助到我們進行操作，因此建議安裝。

請先安裝好 python，不再特別說明此步驟。

下載好 google-cloud-sdk-313.0.1-darwin-x86_64.tar.gz 並解壓縮後，以指令安裝。

./google-cloud-sdk/install.sh

./google-cloud-sdk/bin/gcloud init

接著可能會跳出網頁要你登入、並且選擇你的專案。

或者下指令登入，再重新 gcloud init 取得專案資料，

可參考 Initializing Cloud SDK。

gcloud auth login

你可以嘗試確認現在電腦已授權登入的 google 帳戶

gcloud auth list

你可以嘗試確認電腦 gCloud 環境狀態

gcloud info

後續會我們會讓 Github Actions 嘗試呼叫 gcloud info

2. 建立 GCP 專案 ( Creating Your Project )

到 GCP 上，建立你的專案，例如 my-project ( 筆者隨便決定的 )。

完成後到首頁，可以看到你的專案資訊。

專案名稱、專案 ID、專案編號 後續會使用到，請務必留意。

3. 建立服務帳戶 ( Creating and managing service account keys )

由於我們使用 Github Actions 存取 GCP，自然也要有身份驗證。

到 IAM 與管理頁面 - 服務帳戶，點選 ＋建立服務帳戶

下方資料，看各位想怎麼填都可。

根據 cloud build github-actions，我們會用到的角色如下：

• Cloud Run Admin - allows for the creation of new services

• Cloud Build Editor - allows for deploying cloud builds

• Cloud Build Service Account - allows for deploying cloud builds

• Viewer - allows for viewing the project

• Service Account User - required to deploy services to Cloud Build

因此請選擇以下的角色名稱：

此圖是後來筆者重新到 IAM 建立角色，故有些畫面不同。

如果你覺得很麻煩，權限設定部分可先給最大的擁有者。

完成後在右邊選擇建立金鑰。

由於私密金鑰只能下載一次，務必保存好。

內容格式應該類似下方：

這份金鑰我們會用在 Github Actions 的 Secrets 中

{
  "type": "service_account",
  "project_id": "project-id",
  "private_key_id": "key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nprivate-key\n-----END PRIVATE KEY-----\n",
  "client_email": "service-account-email",
  "client_id": "client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://accounts.google.com/o/oauth2/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-email"
}

4. 建立 CRA 專案 ( Create React App )

接著可以建立專案了：

npx create-react-app my-app

如果你會使用 Docker 部署環境，那麼你可以替換成你想部署的專案。

5. 建立 Github Actions ( Workflow syntax for GitHub Actions )

建立 workflow，專案參考 setup-gcloud。

[ .github / workflows / main.yml ]

name: Build and Deploy to Cloud Run

on:
  push:
    branches:
    - master

jobs:
  setup-build-deploy:
    name: Setup, Build, and Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    # Setup gcloud CLI
    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
      with:
        version: '286.0.0'
        service_account_email: ${{ secrets.GCP_SA_EMAIL }}
        service_account_key: ${{ secrets.GCP_SA_KEY }}
        project_id: ${{ secrets.GCP_PROJECT_ID }}
        export_default_credentials: true

    # Print gcloud info
    - name: Info
      run: gcloud info

• 根據說明，checkout@v2 務必使用 v2
• secrets.GCP_SA_EMAIL：到時候要到 github 建立 secrets
• secrets.GCP_SA_KEY：到時候要到 github 建立 secrets
• secrets.GCP_PROJECT_ID：到時候要到 github 建立 secrets
• run: gcloud info：執行命令 gcloud info

6. 新增 Github Secrets ( Encrypted secrets )

在 github 建立你的 repo，之後到 Settings 選擇 Secrets。

點選 New secret，根據前一步驟的 yml，我們會需要用到以下三個 secrets：

1. GCP_PROJECT_ID：一開始建立專案時給予的 id，你也可以從剛剛 金鑰 json 找到
2. GCP_SA_KEY：打開 金鑰 json ，將所有內容複製貼上
3. GCP_SA_EMAIL：打開 金鑰 json ，可以從 client_email 找到，或者回到 IAM 的 服務帳戶 找到

命名方式自由選擇，記得 yml 要一樣就好。

你也可以把 金鑰.json 轉 base64 貼到 GCP_SA_KEY 儲存，指令： base64 -i key.json

完成如下：

7. Push 專案 ＆ 檢視 Actions

把你的專案 push 到 github，接著就可以看到 Actions 在執行囉！

展開 Run gcloud info，就可以看到指令的結果了！

8. 啟用 API 服務 ( API Library )

在這一步，我們將要把專案用 docker 建立成 image，並發佈到 Container Registry。

接著使用 Container Registry 的映像檔，為我們建立 Cloud Run。

以下 yml 利用 gcloud builds submit、gcloud run deploy 等指令操作。

由於我們尚未開通使用 Container Registry 服務，

請先到該頁面選擇啟用 Container Registry API。

以下為必啟用的 API，可到 API 程式庫 尋找並安裝：

由於我們要使用 gcloud build, gcloud run deploy 等指令，協助我們部署到 Cloud Run，

因此需要啟用 Cloud Build API 和 Cloud Run API 。

以上有任何缺少的服務啟用，很可能會在 Github Actions 階段噴錯，

例如 Cloud Build API 沒啟用的錯誤：

9. 新增 Docker & 修改 yml

接著開始撰寫 Dockerfile 吧！

[ Dockerfile ]

可根據自己的專案撰寫，此專案筆者將專案 build 後放置於 nginx html。

FROM node:10 AS Builder

ENV NPM_CONFIG_LOGLEVEL info

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY . .

ARG GENERATE_SOURCEMAP=false

RUN yarn install && yarn build

FROM nginx:1.13.3-alpine

RUN rm -rf /usr/share/nginx/html/*
COPY --from=Builder /usr/src/app/build /usr/share/nginx/html

[ .dockerignore ]

加入一點忽略規則。

Dockerfile
README.md
node_modules
npm-debug.log

[ .github / workflows / main.yml ]

name: Build and Deploy to Cloud Run

on:
  push:
    branches:
    - master

env:
  PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
  SERVICE_NAME: create-react-app
  RUN_REGION: us-central1

jobs:
  setup-build-deploy:
    name: Setup, Build, and Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    # Setup gcloud CLI
    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
      with:
        version: '286.0.0'
        service_account_email: ${{ secrets.GCP_SA_EMAIL }}
        service_account_key: ${{ secrets.GCP_SA_KEY }}
        project_id: ${{ secrets.GCP_PROJECT_ID }}
        export_default_credentials: true

    # Print gcloud info
    - name: Info
      run: gcloud info

    # Build and push image to Google Container Registry
    - name: Build
      run: |-
        gcloud builds submit \
          --quiet \
          --tag "gcr.io/$PROJECT_ID/$SERVICE_NAME:$GITHUB_SHA"
    # Deploy image to Cloud Run
    - name: Deploy
      run: |-
        gcloud run deploy "$SERVICE_NAME" \
          --quiet \
          --region "$RUN_REGION" \
          --image "gcr.io/$PROJECT_ID/$SERVICE_NAME:$GITHUB_SHA" \
          --platform "managed" \
          --port 80 \
          --allow-unauthenticated

• env 的參數是要給後面 gcloud 指令使用
• PROJECT_ID：是你原專案名稱，使用 secret 的 ${{ secrets.GCP_PROJECT_ID }} 即可
• SERVICE_NAME：是你 image 在 container register 的名稱
• gcr.io 是 container register 的網址，我們發佈的映像檔網域

接著就可以 git push，看看跑完的結果吧～

10. 查看 Container Register & Cloud Run

當 github action 順利建置好並發佈 image 後，

就能看到 image 在列表中了，並且是以私人的方式發佈！

當 github actions 完全跑完後，就可以查看服務。

點進去查看，可以看到網址，那就是你的服務公開網址囉！

看！他在動！

本篇文章專案範例放置於：

https://github.com/explooosion/react-gcp-deploy-example

REF

• Google Cloud Doc
• GoogleCloudPlatform/github-actions

有勘誤之處，不吝指教。ob'_'ov

每次在新環境中，難免還是會遇到新手村的問題。

前言

在新環境使用 npm 時，難免有些「新人問題」。

此處意旨，從 0 開始作業容易碰到的起始問題。

故事是這樣發生的，

筆者在安裝全域套件 ( global package ) 時，噴了一些錯誤導致安裝失敗。

npm install <package-name> -g

粗估，應該是被守門員阻擋住 ...

並且收到訊息如下：

• ref: 鎖鏈康妮

欸不是。

錯誤訊息如下：

考過太多次英文閱讀測驗的你，

可以很明顯地抓出以下關鍵訊息：

1. Missing write access to /usr/local/lib/node_modules

2. Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

3. The operation was rejected by your operating system.

4. try running npm ERR! the command again as root/Administrator.

簡單的說，就是沒有權限對目錄做寫入行為。

解決方式

根據錯誤訊息，可以知道套件安裝的目錄位置在：

/usr/local/lib/node_modules

注意：此目錄為使用官網 Node.js 下載後的預設安裝路徑。

因此開啟 terminal，於任意目錄，輸入指令修改該目錄權限即可：

sudo chown -R $USER /usr/local/lib/node_modules

由於修改存取權限等行為需要管理員身份，

因此下完指令後，電腦會要求輸入電腦用戶密碼，

將該目錄與其子目錄的擁有者，更改為當前電腦的用戶（對就是在講你）。

如此一來，

就算是全域安裝，有存取權限就沒問題了，對吧！？ （ Ref ）

果然再嘗試一次安裝套件，就沒問題了～

後記

如果你想知道這些片段指令是什麼意思 ...

筆者有份作業推薦，並且已經幫你做答完最後一題。

作答完畢後，相信一定可以知道的。

• sudo：
• chown -R：
• $USER：
• /usr/local/lib/node_modules：
• 鎖鏈康妮：

有勘誤之處，不吝指教。ob'_'ov

npm 套件管理中的棄用與分配標籤應用。

前言

很久沒有發表文章了，本篇很簡短的分享遭遇與解法。

如果有使用過 npm 且有發佈過套件的朋友，

對 npm publish 應該再熟悉不過。

筆者日前誤發佈了一個有 bug 的套件，

而且相當嚴重... 吐血，專案直接 crash 那種，

果然沒多久就收來了 issue 表示 latest 版本出問題。

啊啊啊啊啊好慌！

怎麼會！？ 怎麼會！？ 就變成了一灘爛泥...

作法

在 npm 上，找到了沒有特別用過的指令：

• npm-deprecate：將指定的版本標註為棄用

• npm-dist-tag：修改指定版本的標籤

於是便開始了 Developing in Production

因為沒使用過，某種程度來說就是直接上！

以下筆者使用本次修復的套件作為指令範例

將 0.8.1 改為 0.8.0

1. Release

首先到 Github Release 中改成 Pre-release，

防止相關貼紙及 Github、npm 頁面資訊顯示有錯誤的版本：

2. Deprecate

利用指令 npm-deprecate 將 0.8.1 進行棄用聲明：

npm deprecate agm-direction@0.8.1 "critical bug fixed in v0.8.1"

完成後可以在 npm 頁面上看到有 deprecated 警語：

並且在 Versions 頁籤中可以看到棄用的版本被隱藏了起來。

3. Tags

利用指令 npm-dist-tag 將 0.8.0 設置為 latest 版本：

npm dist-tag add agm-direction@0.8.0

由於最後的參數 [] 我們並沒有使用，

因此預設會是以 latest 進行標記。　

以上完成後，在 npm install 時 latest ，

也就會對應到 0.8.0 版本囉！

最後也順利完成這次的突發事件。

有勘誤之處，不吝指教。ob'_'ov

有些經驗技巧，總在奇妙需求後。

前言

在 css 中，calc 的技巧想必大家都相當熟悉。

面對排版、佈局設計時，相當好用。

而當你在寫 scss 時，又多了好幾種解法，

如果你又使用了 styled-components，那麼使用情境就更多樣了。

本篇文章紀錄當要傳入 calc 計算的數值為「變數」的使用方式。

以下將從 css、scss 到 styled-components 依序介紹使用技巧。

ㄧ、CSS

當我們想在 css 檔案內進行計算。

1. 直白方法 ( HowHow Method )

男人就是直白，直接寫上數值，這是最入門的用法。

[ Foo.css ]

div {
  height: calc(100vh - 50px);
}

你知道嗎？筆者尊重性別平等，因此「男人...」這句話不代表本人立場。

2. 偽類別方法 ( Pseudo-elements Method )

根據偽類別 ( Pseudo-elements ) ，你可以使用 :root，來定義屬性與值。

然後利用 var() 方法來取出指定屬性的值。

[ Foo.css ]

:root {
  --head: 50px;
}

div {
  height: calc(100vh - var(--head));
}

你知道嗎？在 :root 內定義的屬性名稱，必須是 -- 開頭，例如：--head。

你知道嗎？ :root 內的命名方式也可以搞死人，例如：--__-_-_，var(--__-_-_)。

二、SCSS

當我們想在 scss 檔案內進行計算。

1. 偽類別方法 ( Pseudo-elements Method )

此方法為 css 本身的方式，因此與你的預處理器 ( scss、sass、less ) 無關。

語法當然也都是一樣的。

[ Foo.scss ]

:root {
  --head: 50px;
}

div {
  height: calc(100vh - var(--head));
}

你知道嗎？不少 css framework 經常使用 :root 來定義設計模式。

2. 宣告變數方法 ( Variables )

當你使用 CSS 預處理器 ( CSS Preprocessor ) 時，想必最熟悉的就是變數宣告了。

如果要在 calc 放入變數，需要使用插值法 ( Interpolation )，透過 # 與 { }，將變數包起來。

[ Foo.scss ]

$head: 50px;

div {
  height: calc(100vh - #{$head});
}

三、styled-components

當專案使用 react ＋ styled-components，除了元素的主樣式會寫在 js 內：

const Main = styled.main`
  width: 100px;
  color: #f00;
`;

你可能也會有 scss 資料夾存放各類模組，例如：

那麼 calc 內的變數，可能會有幾種來源：

1. 來自 js 內定義的變數
2. 從 ThemeProvider 載入 scss 的變數
3. 從 ThemeProvider 載入 scss 的 :root
4. 不經過 ThemeProvider ，載入 scss 的變數
5. 不經過 ThemeProvider ，載入 scss 的 :root

我們先撇除最佳實踐，單純思考在這些情境下的處理方式。

讓我們開始分析囉！

1. 來自 js 內定義的變數

由於 styled.div` ` 是用樣板字串 ( Template Strings ) 包起樣式，因此可以使用 ${expression} 來包入變數。

第二種只是把 ${expression} 函式改寫成 arrow function。

第三種則是第二種的簡化，即 arrow function 的簡化版。

[ Foo.js ]

const head = '50px';

const Foo = styled.div`
  height: calc(100vh - ${head});
`;

const Bar = styled.div`
  height: ${() => `calc(100vh - ${head})`};
`;

const App = styled.div`
  height: ${`calc(100vh - ${head})`};
`;

2. 從 ThemeProvider 載入 scss 模組中的變數

基本上用法跟前面樣板字串一樣，只是變數來自 props 的 theme。

[ Foo.js ]

const Main = styled.main`
  height: ${p => `calc(100vh - ${p.theme.head})`};
`;

3. 從 ThemeProvider 載入 scss 模組中的 :root

:root 偽類別與 scss 無關，因此使用方式同 css 一樣。

[ Foo.js ]

const Main = styled.main`
  height: calc(100vh - var(--head));
`;

4. 不經過 ThemeProvider ，載入 scss 的變數

由於不是從 Provider 倒入，無法從 props 中取出。

但可以透過 css-loader，使用 :export 將變數以物件形式匯出。

如果是用框架諸如：react、angular、vue 等，基本上 webpack 已經都設定過囉！

以下示範如何將 head 變數匯出。

[ Foo.scss ]

$head: 50px;

:export {
  head: $head;
}

[ Foo.js ]

import { head } from './Foo.scss';

const Main = styled.div`
  height: calc(100vh - ${head});
`;

5. 不經過 ThemeProvider ，載入 scss 的 :root

同樣 :root 與 scss 無關，因此也是直接使用。

[ Foo.scss ]

:root {
  --head: 50px;
}

[ Foo.js ]

import './Foo.scss';

const Main = styled.main`
  height: calc(100vh - var(--head));
`;

以上整理一些 calc 讀取變數的方式，

但為了一致性，個人認為 :root 與 變數 最好選擇使用一種。

最後再分享一篇文章探討：

Why we prefer CSS Custom Properties to SASS variables

歡迎大家討論自己喜歡的使用方式！

有勘誤之處，不吝指教。ob'_'ov

• ref：Kody Technolab.

目錄

1. 前言
2. 事情是這樣的
3. 開始設定
4. 參考資料

I. 前言

最近接到某個小小案子，專案平台需支援 Android，

一開始怕 deadline 的關係，所以簡單先用 webpack + PWA 建置，

最後再用 Cordova 封裝成 apk 提供安裝。

由於提早將專案完工...

乾脆來趁著機會學學 Flutter。

本篇記錄如何在 vscode 中，使用內建的 debug，

ㄧ次啟動 Android 與 iOS 兩個裝置，並且支援各種神器功能。

II. 事情是這樣的

你電腦不錯，想要同時執行 Android 與 iOS，

方便在開發時，可以確保雙平台的畫面與邏輯結果。

在多重裝置的啟用上，你可以直接開啟 terminal ，使用官方指令啟動所有裝置：

flutter run -d all

但卻無法在存檔 (Save) 程式碼時，自動更新 (Auto Update)，

通常我們使用指令啟動專案後，都會得到一段訊息：

雖然按下r可以進行 Hot Reload，但此一功能需要每次手動按，實在很麻煩...

人生而懶，懶覺除了使人恢復體力，更是科技進步的來源。

懶覺：指人貪睡，不愛起床。 多指早晨晚起。 如：他就愛睡懶覺，叫了幾次都不起床。

• ref: 漢語網

而本篇最主要的需求是要同時啟動雙平台裝置，即 Android 與 iOS。

並且透過 vscode ，來協助我們進行 debugger、auto hot reload。

慶幸的是，官方在 2019 年 12 初，釋出實驗版，

而同年底也正式支援此功能。其實距離現在也才短短不到 1 個月 XD。

原本筆者還不知道，於是查到早期文章的奇淫技巧...，

嚐盡各種苦頭，踩盡各種深坑。

（汗...

總而言之，趕緊來試試這新的功能吧！

III. 開始設定

1. 環境檢查

在設定前，請確保 Flutter 環境是 ok 的：

flutter doctor

● No issues found !

設定流程很簡單，基本上照著官方流程做就可以了：

• Multi device debugging in VS Code

2. 設定 launch.json

以專案為工作目錄，開啟 VSCODE ，

到左邊第4個蟲蟲，選擇 [ 建立 launch.json 檔案。 ]。

請選擇 [ Dart & Flutter ]，就會得到一個範本設定檔了。

接著到官方文件：

• Multi device debugging in VS Code

將 Setup 內的設定複製起來，全部覆蓋貼上。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current Device",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "Android",
            "request": "launch",
            "type": "dart",
            "deviceId": "android"
        },
        {
            "name": "iPhone",
            "request": "launch",
            "type": "dart",
            "deviceId": "iphone"
        },
    ],
    "compounds": [
        {
            "name": "All Devices",
            "configurations": ["Android", "iPhone"],
        }
    ]
}

存！好！就這樣！

設定過後，你的專案也會多一個 .vscode / launch.json 檔案。

3. 啟動模擬器

接下來讓我們來執行看看，

請確保你的模擬器是否都有在執行。

如果 VSCODE 右下顯示，[ No Device ]，請記得點選，然後開啟。

例如筆者的 Android 已經啟動，但 iOS 還沒啟動，

廢話不多說，啟動就對了！

你知道嗎？尚未開啟的模擬器會有前綴 Start 的字眼。

4. 進行偵錯

再剛剛的 debug 頁籤中，選擇 [ All Devices ]。

如果你要連接的裝置，是目前作用中的一台裝置，那就選 [ Current Device ]。

然後點選 綠綠的按鈕 執行！

同時你也一定很興奮著看著畫面在跑：

確認模擬器都開始執行你的專案。

除了模擬器，也會自動打開網頁，提供 Dart DevTools！

5. Auto Hot Reload

接著你會開始瘋狂的修改與存檔，

並且可以看到偵錯主控台多次的 Reloaded 紀錄。

6. 快速偵錯

當你執行過一次後，VSCODE 底部會顯示快速偵錯的按鈕選單。

括弧內是你的專案名稱喇！

點選後，上頭會出現選單，

你就可以快快樂樂選擇你要的偵錯環境囉！

IV. 參考資料

• Quickly Switching Between Flutter Devices

• Multi device debugging in VS Code

• VSCode and flutter, how to connect multiple devices?

• Support running on all connected devices

有勘誤之處，不吝指教。ob'_'ov

React 在 16.8 版之後納入 Hook 的功能。

• ref：阮一峰 - React Hooks 入门教程

前言

去年還在研究所打混，經過老闆再三囑咐。對於額外技術也暫時停止學習。

身為一位學術研究員，不專注於非研究領域的程式發展，也很合邏輯 QQ。

目前 CRA ( create-react-app ) 所使用的版號，也來到 16.12.0，

學習永遠不嫌遲，趁著一年國軍 online，趕緊補一下！

本篇文章僅簡單介紹、筆記，建議大家可以閱讀：

1. React 介紹 Hook
2. 阮一峰 - React Hooks 入门教程

1. Hooks 介紹

React 在 2019 年 2 月 Release v16.8.0，

該版本推出了 Hooks ，鉤子 (？

可以讓我們在 functional component 進行一些 state 的控管。

儘管 Angular 已經來到 8.3 ...

儘管 Vue 已經來到 2.6 ...

但 Hooks 的名詞，勢必會影響不少生態圈（Ｘ

春秋百家爭鳴 大家抄來抄去 到底誰有道理 誰的比較高明

你知道嗎？Hooks 其實就是希望能像鉤子一樣，可以隨手勾取所需工具、物品。

2. Functional Component

建議讀者可以直接拿官方的專案建置練習：create-react-app

在使用之前， Hooks 都是建構在 functional component 上，

因此建議至少先看過長什麼樣子：

import React from 'react';

function App() {
  return (
    <div>
      Hello React With Hooks
    </div>
  );
}

export default App;

當然你也可以選擇使用 ES6 的 const 進行 arrow function 宣告：

import React from 'react';

const App = () => {
  return (
    <div>
      Hello React With Hooks
    </div>
  );
}

export default App;

注意！ 好你現在看過了，可以繼續看下去囉！

3. Hooks 鉤鉤種類

React 的 Hooks 基本上常見的包含：

• useState
• useContext
• useReducer ( 本篇不介紹，不是懶，是忙投票 )
• useEffect ( 本篇不介紹，不是懶，是忙投票 )

useState

跟 setState 是同樣意思的，useState 內直接放入初始值即可。

返回陣列的第一個為當前值，第二個 setUser 則是用於設定。

import React, { useState } from 'react';

function App() {

  const [user, setUser] = useState('Anonymous');

  return (
    <div>
      <h1 onClick={() => setUser('Robby')}>
        Hi,
        <small>{user}</small>
      </h1>
    </div>
  );
}

export default App;

你知道嗎？設定值的變數名稱，以最佳實踐來說，大多使用 setUser, setData 等，駝峰式的命名。

useContext

如果我們要從父組件傳值給子子孫孫等組件，通常要 props 很多層，

而你的專案可能又包了一堆 HOC，例如：

export default withTranslation()(connect(mapStateToProps)(Todo));

嚴重時會破壞你的結構，大 guy 會變成下麵這葛樣子， ( 俗稱 Wrapper Hell )：

• Ref: https://twitter.com/GrexQL/status/1045110734550589441

如今！！！

只要你會丟出鉤子，稍微彎拉一下...

• 信長之野望資訊站 - WL

就能實現並解決這葛垢病！

請搭配著下方 createContext 章節閱讀。

createContext

在使用 useContext 之前，要先認識 createContext，它是用來創建 Context 的 Provider 。

Context ？？？

Provider ？？？

以下使用常見的套件來比喻：

1. react-redux 的 Provider
2. styled-components 的 ThemeProvider

如果這比喻不太明白，簡單說就是要從頂部灌水泥，灌資料下去喇 QQ

筆者簡單舉例父子組件傳遞值範例：

import React from 'react';

const name = 'Robby';

function App() {

  return (
    <div>
      <User name={name} />
    </div>
  );
}

function User(props) {
  return (
    <div>{props.name}</div>
  );
}

export default App;

現在將試著使用 createContex 改寫看看：

引入 createContex，宣告變數 UserContext，其參數就是初始值。

import React, { createContext } from 'react';

const name = 'Robby';

const UserContext = createContext(name);

接著於父子組件中使用：

在 UserContext 中，提供了 Provider 以及 Consumer，

1. Provider：用於父層，並利用 value，來塞入指定的初始值。
2. Consumer：顧名思義，就是用於接收子組件，內容為回傳一個 function。

請務必命名為 value，不可為其他屬性名稱。

function App() {
  return (
    <UserContext.Provider value={name}>
      <User />
    </UserContext.Provider>
  );
}

function User() {
  return (
    <UserContext.Consumer>
      {name => name}
    </UserContext.Consumer>
  );
}

• Provider 內需放入一個指定的 component，因此這邊建立一個 User 組件。
• Consumer 內需放入一個 function，因此這邊使用一個簡易的 arrow function，

過度謹慎的你可能會想改寫...

沒錯，你也可以拉出來再寫一個 const arrow function。

function User() {

  const renderName = name => {
    return name;
  }

  return (
    <UserContext.Consumer>
      {renderName}
    </UserContext.Consumer>
  );
}

需要注意的是，不可以在 Consumer 同層額外寫其他東西。

但你可以在 Consumer 組件中寫其他元素。

過度謹慎的你可能會不相信...

沒錯，如果你用以下方式寫，是有問題的。

return (
  <UserContext.Consumer>
    {renderName}
    <div>123</div>
  </UserContext.Consumer>
);

沒錯，如果你用以下方式寫，是沒問題的。

return (
  <div>
    <p>Hi, my name is</p>
    <UserContext.Consumer>
      {renderName}
    </UserContext.Consumer>
  </div>
);

-

過度謹慎的你可能會越想越不對勁...

一開始已經在 createContext 設定過初始值：

const UserContext = createContext(name);

為何在又要在 UserContext.Provider 內設定 value 初始值？

<UserContext.Provider value={name}>

：「沒錯親愛的，是多寫了。」

如果父層省略掉 Provider ...，

那就是直接以當初 createContext 的初始值為主，

否則會優先以 Provider 的 value 為主。

import React, { createContext } from 'react';

const name = 'Robby';

const UserContext = createContext(name);

function App() {
  return (
    <User />
  );
}

function User() {
  return (
    <UserContext.Consumer>
      {name => name}
    </UserContext.Consumer>
  );
}

export default App;

所以上述範例才故意這樣寫兩次。

-

過度謹慎的你可能會想省時間...

每次都寫 UserContext.Consumer 也太大坨麻煩了吧？

：「沒錯親愛的，終於可以使用 useContext 了！」

useContext 必須放入經由 createContext 所建立的變數。

由於當初設定的 name 為字串，因此勾出來的時候，當然也就是字串囉！

import React, { createContext, useContext, Fragment } from 'react';

const name = 'Robby';

const UserContext = createContext(name);

function App() {
  return (
    <User />
  );
}

function User() {
  const name = useContext(UserContext);
  return (
    <Fragment>
      {name}
    </Fragment>
  );
}

export default App;

你知道嗎？ 組件不想用任何元素包住子元素時， 可以使用 Fragment (片段) ，避免冗余的元素。

礙於時間不早，加上趕著早起投票。

本篇僅教學到 useState、useContext、createContext 應用。

為了不讓大家覺得筆者本篇... 過於敷衍過於廢文

最後提供一葛整合今日所學的奇淫技巧。

你知道嗎？奇淫技巧不一定代表是好的作法。

4. useState＋useContext＋createContext

前面學到的 useContext，依照本篇的內容，目前僅能讀取，卻不能改變。

大多的使用方式為： useContext + useReducer

有興趣的人，建議可以先利用「神Ｏ海Ｏ」詢問看看有沒有文章可以看。

接著，來為大家介紹這種邪門歪道，殘害新人的範例應用，

參照剛剛的範例，我們繼續修改：

首先在上面 import 我們要使用的鉤鉤，

接著將 createContext 初始值改為 null， 因為等等要改在 component 內初始化。

import React, { createContext, useContext, useState, Fragment } from 'react';

const UserContext = createContext(null);

接著我們利用 useState，建立一葛 name 的 state，

並使用 Provider 將初始值設定為陣列 [name, setName]。

function App() {
  const [name, setName] = useState('Robby');

  return (
    <UserContext.Provider value={[name, setName]} >
      <User />
    </UserContext.Provider>
  );
}

你知道嗎？為了方便管理，可以使用物件，將 [name, setName] 用物件包起來，讀取時就會是物件！

最後在子組件同樣使用 useContext 提取出來。

就可以進行讀取，以及使用 setName 修改囉～

function User() {
  const [name, setName] = useContext(UserContext);

  return (
    <Fragment>
      {name}
      <br />
      <button onClick={() => setName('Jack')}>ChangeName</button>
    </Fragment>
  );
}

完整程式碼如下：

import React, { createContext, useContext, useState, Fragment } from 'react';

const UserContext = createContext(null);

function App() {
  const [name, setName] = useState('Robby');

  return (
    <UserContext.Provider value={[name, setName]} >
      <User />
    </UserContext.Provider>
  );
}

function User() {
  const [name, setName] = useContext(UserContext);

  return (
    <Fragment>
      {name}
      <br />
      <button onClick={() => setName('Jack')}>ChangeName</button>
    </Fragment>
  );
}

export default App;

雖然上述做法可以達到 Context 的修改，不過很少這樣使用。

你知道嗎？筆者沒有特別這樣使用過... 是不是很 GY。

因為基於 useState 所產生的值，應由所屬的 component 控管。

因此正規來說，還是會以 useContext + useReducer 的方式進行管理。

-

最後

什麼是勾肥大戰？你不知道！？太弱惹喇！

• Ref：【心得】勾肥入門教學文【1.25版】，

那麼就先這樣，投票去，ㄅㄅ！

有勘誤之處，不吝指教。ob'_'ov

cloudflare 推出 Workers ，每葛人都該來體驗邊緣運算的快感！

• ref：Everyone can now run JavaScript on Cloudflare with Workers

前言

最近因為 SideProject 而買了新網址，又來到 Cloudflare 設定 DNS 了。

在 google 強大的推薦演算法之下，看到了 Cloudflare Workers 的產品廣告，

才發現原來服務已經推出一年多了～還不趕快「跟著大哥走！」

目錄

1. 介紹喇賽
2. 實作說明
3. 以 Dashboard 方式建立
4. 以 CLI 方式建立

一、介紹喇賽

Cloudflare Workers 在去年 2018 年初推出 beta ，於 3 月正式 release 推出 🎉！

Workers 以邊緣運算 ( Edge computing ) 運作，目前在世界各地有很多節點 ( node )。

根據官方指出，目前服務已經擴展到 90 個國家，194 個城市。

• ref：Cloudflare Global Network Expands to 193 Cities
• ref：The Cloudflare Global Anycast Network ( updated to 194 )

你知道嗎？　臺灣也有站點哦！目前設置在台北，是第 77 個 data center！

• 台北：CloudFlare的第七十七個數據中心已經上線喔！
• Cloudflare System Status

​Cloudflare Workers 也可以叫做 Web Workers，

是基於 W3C 標準規範的 Service Worker 所開發而來，因此主要以 JavsScript 進行撰寫。

對於要開始火紅的 wasm ( Webassembly) 更不能放過，

Cloudflare 在去年 10 月開始支援 Webassembly，

開發者可以將 C/C++、Rust、Go 等語言 Compile 成 wasm，再進行提交。

• WebAssembly on Cloudflare Workers

Workers 可以做些什麼事情？

大概就是跟 AWS Lambda 87% 相似。

Workers 這葛 serverless 服務，除了主要提供 cache ，

還可以建置各種的 function、rewrite、redirect、A/B testing ...，

當然也可以渲染 json 或是 html。

如果你想將網頁佈署在 Worker 上，那就建議使用 Workers Sites。

由於要將部署的網站上傳到 storage 需要付費，因此要自行斟酌看看費用惹。

如果不想付費...

那你就得想辦法把網站程式碼全部塞進 JS 裡面：

async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  }
  return new Response(someHTML, init)
}
addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request))
})
const someHTML =  `<!DOCTYPE html>
<html>
  <body>
  <h1>Hello World</h1>
  <p>This is all generated using a Worker</p>
  <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
  ></iframe>
  </body>
</html>
`

上述的作法，其實就是 SSR、isomorphic 的概念，

有興趣可以參考專案：isomorphic-worker-webpack

二、實作說明

本文實作範例，其實跟官網步驟一樣，可以看看 Cloudflare Workers Documentation。

目前文件提供不少 Templates 範例，可以試著在裡面發散構想。

搞不好你還可以因此發 PR 給 Cloudflare！

Worker 的建立，可以選擇到 Dashboard 頁面建立或是使用 CLI 建置：

[ Dashboard ]

Cloudflare 提供了後台管理系統，讓你可以直接在網頁上撰寫程式碼並測試，

但是無法提供程式碼的預處理（例如：webpack, babel, bundle, minify）。

[ CLI ]

利用套件管理系統 nodejs ( npm ) 安裝腳本指令套件，或使用 rust ( cargo )，

在 local 寫好專案後，利用 build，將 ES6 編譯壓縮，再進行 publish。

兩者各有好處，以下分別簡單步驟說明：

在開始之前，請務必到 Cloudflare 註冊帳號。

三、以 Dashboard 方式建立

在登入後，請至首頁右側，點選 Workers。

在初次進入後台時，

系統會要求你設定 subdomain 名稱，作為 Workers 部署之後的雲端網址，

設定之後將無法更改！... 筆者手殘 ... 好想更改啊！！！！

• 圖源：An Introduction to Cloudflare Workers

進入 Workers Dashboard 後，捲到最下方會有 Account ID，

請複製或留意取得方式，如果是使用 CLI 建立，則會需要提供該 ID。

別擔心，隨時都可以到後台取得 Account ID。

接著開始建立新的 Worker，很明顯可以看到一顆按鈕 Create a Worker，點下去。

進入編輯頁面後，左上角圖片紅框處可以看到系統隨機給予的 Worker Name，當然，是可以更改的！

程式碼編輯區塊可以看到已經有 Sample Code，右半邊則是 Preview。

大多 Worker 都是建立 fetch 的事件監聽，當 user 進行頁面 Request 的時候，就會觸發。

在範例中，Response 會直接渲染文字以及 http-status 回去。

此外也可以看到 Wasm 的頁籤按鈕，你可以直接上傳編譯好的 wasm 檔案上去。

接著在下方可以看見，系統預設已經幫我們啟用：

Will be deployed to your workers.dev subdomain

如果不使用，則不會發佈到帶有 .dev 的網址。

除非你要指定到自己的網域，否則就要啟用他送你的 workers.dev subdomain。

再點選 Save and Deploy 之後，系統會提示部署後的網址。

接著你可以點選頁面左上角 Cloudflare Logo 下方的左箭頭〈，返回列表。

回到 Workers Dashboard，就會看到新的 Worker 已經在列表中。

如果你點開瀏覽，應該會發現目前無法以 SSL 方式連入，請改用 http:// 即可！

最後就可以成功看到頁面出現：

hello world

如果想要使用 SSL 方式連入，請先準備好你的 Domain。

※ 自訂 Worker Domain

以下 Cloudflare 是筆者自己的網域範例。

先切換到自己註冊的 DNS 管理後台，

接著點選 Workers，下方新增路由，Add route。

在表單中，Route 是你 DNS 的路徑規則，

robby.tw 是我的域名，前面的 test 就是你指定的 route。

* 星號....就不用解釋惹吧，還不知道就該打屁股惹。

接著到 DNS 新增 CNAME：

• Type：CNAME
• Name：就看你想取蛇摸
• Target：steep-dawn-7db4.your_subdomain.workers.dev ( 範例 )

steep-dawn-7db4 只是我的 Worker Name。

你可以複製剛剛的 Worker dev 網址，貼上並修改，去除 http 等格式。

於是頁面就出來惹～https://test.robby570.tw

四、以 CLI 方式建立

本範例使用 nodejs 的 npm 作為 CLI 後端環境執行。

根據官方非常簡單的說明文件，步驟如下：

4.1 下載套件

npm install -g @cloudflare/wrangler

注意：不支援 32 位元... 原本想在工作的時候測試 CLI... QQ

4.2 初次要在 local 設定金鑰

wrangler config

只有第一次要設定哦！

依序會要你填入四個項目：

1. Account ID
2. Zone ID
3. Global API Key
4. Email address

Account ID

在你的 Cloudflare Dashboard 就有囉！

Zone ID

欄位內容不是必須，

除非你要像前面步驟一樣，想要指派給自訂的 CNAME，

如果想使用原本的網址，就不需要設定。

Global API Key

如果你會看英文就看文件說明：

如果你比較笨，看看下面的步驟....

-----------------------------------------------------------------------

到你的 Workers 首頁右邊，點選 Get your API token。

找到最下方的 API Keys，點選 Global API Key 的 View

輸入帳號密碼，然後勾選一葛 通過率很低 的 reCAPTCHA。

筆者也不知道為什麼... 總是驗證失敗。

最後得到的 Key 就把他複製起來，

貼到剛剛指令 wrangler config 所要求提供的 Global API Key。

Email address

最後的 email 各位讀者們就自行發揮ㄅ～

-----------------------------------------------------------------------

4.3 初始專案

接著開始初始 Worker 專案

wrangler generate my-worker

你也可以使用現成 Github 的專案

wrangler generate my-router-app https://github.com/cloudflare/worker-template-router

進入目錄

cd my-worker

用 VScode 打開，或任何你喜歡的編輯器。

code .

[ wrangler.toml ]

account_id = ""
name = "my-worker"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

• account_id：在 cloudflare dashboard 下方可以找到，上文也有提到，用於辨別帳號的
• name：發佈後的 Worker 名稱
• type：wrangler 跟 react-create-app 一樣，最後會經由 webapck bundle
• route：如同剛剛前面從網頁上新增的 route 一樣，例如 https://test.my_domain.tw/*
• workers_dev：是否部署在 dev 上
• zone_id：如果你要在指定的網域上使用，可以在 cloudflare 所要使用的網域上找到

如果你想要使用一些自訂的 webpack lib，可以在 wrangler.toml，新增一行：

[ wrangler.toml ]

webpack_config = "webpack.config.js"

• webpack_config：指定你的檔案路徑與檔名

內容就看你想怎麼設定，例如：

[ webpack.config.js ]

const Dotenv = require('dotenv-webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: 'index.js',
    module: {
        rules: [
            {
                test: /\.html$/i,
                use: 'raw-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
        ],
    },
    plugins: [
        new Dotenv(),
        new HtmlWebpackPlugin(),
    ],
};

[ index.js ]

這葛，就不解釋惹，官網文件看看，有很多範例應用，建議讀者要具備 HTTP headers 的知識。

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
/**
 * Respond with hello worker text
 * @param {Request} request
 */
async function handleRequest(request) {
  return new Response('Hello worker!', {
    headers: { 'content-type': 'text/plain' },
  })
}

4.4 預覽專案

接著可以預覽畫面。

wrangler preview --watch

如果啟動的時候出現下列訊息，代表你 wrangler.toml 的 account_id 忘了設定囉！

4.5 建置專案

調適好之後，就可以建置專案。

wrangler build

4.6 佈署專案

最後再將你的 Worker 發佈到 Cloudflare 上即可。

wrangler publish

這時候回到 Cloudflare Workers Dashboard ，就可以看到剛剛建置的 Worker 了。

如果你有設定 zone_id，那就可以在 Cloudflare 上的網域 Workers 列表中找到！

4.7 佈署專案 dev 與 prodiction

如果 Worker 在 push 的時候，

想分成 dev 與 production，可以將 wrangler.toml 新增 [ env.* ] ，

例如：[ env.production ]

[ wrangler.toml ]

account_id = ""
name = "my-worker"
type = "webpack"
webpack_config = "webpack.config.js"
workers_dev = true
entry-point = "workers-site"

[env.production]
zone_id = ""
route = "https://your-website/*"

當使用 publish 指令，則 [ env.production ] 的 zone_id, route 會被忽略。

wrangler publish

當使用 publish --env production 指令，則 [ env.production ] 的 zone_id, route 會被帶入。

wrangler publish --env production

以上小小心得，各位邊緣仔也快去邊緣化吧！

有勘誤之處，不吝指教。ob'_'ov

讓網站運作通通自己動起來！

• 圖源：https://github.blog/2019-08-08-github-actions-now-supports-ci-cd/

前言

好久沒發文了，距離上次文章已經有十個月左右，

接下來即將入伍，本篇之後大概又要隔一年了...

前陣子 Github 推出了 CI/CD，大概是換了富爸爸的關係吧（Ｘ

這次記錄一下，並以 create-react-app 作為範例，

當 local 端 push 之後，自動將專案編譯建置 (yarn build)，

並透過 Github Pages，建立並持續更新靜態網站。

後續的延伸，可以用在 Personal Website、Blog、SideProject 等等。

目錄

1. 事前準備
2. 建立Repo
3. 新增專案
4. YML設定檔
5. 建立令牌
6. 設定版本控制
7. 驗證結果
8. 參考文章

事前準備

請記得至 Github Actions，申請 beta 服務使用。

申請印象沒有立即生效，可能需要等數天。

如果申請成功，應該可以發現你任何一個 repo，都會多一個 Actions 的選項：

建立 Repo

在 Github 上建立新的 repository，本文以 my-app 為例。

新增專案

打開你的 IDE 使用官方指令建置：

npx create-react-app my-app

由於本文 React 不是重點，因此安裝過程不再贅述說明。

由於發佈的靜態網頁網址是在：http://{你的帳號}.github.io/my-app

所有 link, script 的檔案相對路經，必須要去設定 react 環境變數 %PUBLIC_URL% ，

讓路徑都在 /my-app 之下。

可參考：create-react-app - Building for Relative Paths

因此請編輯 package.json，新增 homepage，並請依照個人的 github 帳號網址而定，

或是綁定的 cname ，例如：http://robby570.tw/my-app。

[ package.json ]

{
 "homepage": "http://explooosion.github.io/my-app",
}

YML 設定檔

yml 是一種描述資料的一種格式結構，

如果你是網頁開發人員，且具有 CICD、k8s 經驗者，應該不陌生。

請在專案根目錄，建立資料夾 .github，子層再建立資料夾 workflows，

該子層資料夾中，建立檔案：main.yml，如下圖範例。

接著補上描述內容：

[ main.yml ]

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:

  install-and-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]
    steps:
    - uses: actions/checkout@master
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@master
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install and Test
      run: |
        yarn
        yarn test
      env:
        CI: true

  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: cp .env.example .env.local && yarn && yarn build

以下簡述一下設定說明。

詳細請查看：github-pages-deploy-action 或是 Configuring a workflow

name: Build and Deploy

代表本次整體任務的名稱，會顯示於下方紅框處中：

on:

代表處發任務的時機，本次設定為當 master 進行 push 的時候便會觸發。

jobs:

所要進行的工作，本次設定有兩個工作，可任意命名，分別為：install-and-test、build-and-deploy。

install-and-test：該工作主要進行安裝與測試。

build-and-deploy：該工作則是將專案進行建置，並且程式碼 push 至指定的 branch 上。

uses: JamesIves/github-pages-deploy-action@master

由於部署的動作要進行一連串的 git 指令處理，因此偷懶學習一下，

使用人家寫好的腳本 JamesIves/github-pages-deploy-action。

ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

由於使用第三方的腳本指令，需要提供存取權限，因此必須提供令牌。

後面會接著說明如何設定。

BRANCH: gh-pages

github 除了 master 可以作為靜態網站外，另一個選擇就是另開分支，命名為 gh-pages 。

可參考：Configuring a publishing source for GitHub Pages

FOLDER: build

根據 github-pages-deploy-action 設定說明，編譯建置的輸出資料夾位於 build 裡面。

如果你使用 angular 作為開發，那就是 FOLDER: dist 囉！

BUILD_SCRIPT: cp .env.example .env.local && yarn && yarn build

除了 yarn 安裝以及 yarn build 之外，如果你有使用 dotenv，

該指令可以複製 .env.example 成 .env.local，並設定 env 參數。

如果要使用，請記得先在前幾行設定好變數值，例如 REACT_APP_TITLE：

[ main.yml ]

env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        REACT_APP_TITLE: MY APP
        BUILD_SCRIPT: cp .env.example .env.local && yarn && yarn build

[ .env.example ]

REACT_APP_TITLE=

[ public / index.html ]

<html lang="en">
  <head>
    ...
    <title>%REACT_APP_TITLE%</title>
    ...
  </head>

  ...

</html>

如果沒使用，則可以直接把指令設定成：

BUILD_SCRIPT: yarn && yarn build

建立令牌

首先到個人 github 上的 Settings。

點選 Developer settings。

然後選擇 Personal access tokens。

接著點選 Generate new token 建立私人令牌。

在欄位中，Note 是輸入可以識別的名稱，日後可以改，

權限則勾選最上面區塊 repo 就好，會自動勾取其子項目，最後確定產生。

產生後，請確保成功複製 token，因為之後無法再進行複製的動作，必須要重新產生。

接著到你 github 的專案 Settings。

選擇 Secrets。

點選 Add a new secret。

Name 請輸入：ACCESS_TOKEN

Value 請貼上剛剛複製的 token。

如果成功，應該會看到 綠色 鎖頭。

484 OS： 耖尼瑪的版主顏色亂搞我！嘿嘿！

設定版本控制

接著終於可以將你的專案 push 上去了！請根據你的專案設定哦～

git remote add origin https://github.com/explooosion/my-app.git

git add -A

git commit -m "Initial commit"

你可以直接使用 vscode 內建的 git gui 操作。

驗證結果

推送完畢後，你可以到 github 專案 Actions 中查看，是不是順利通過。

如果失敗，預設會發送電子郵件給你。

試著切換分支，可以發現多了 gh-pages。

在 Settings 中，也可以發現 Github Pages，自動選擇 gh-pages 分支，

並且可以看到提示訊息的網址。

因為筆者有設定過 Custom domain，所以網址會不太一樣！

點開網址，就可以看到所發佈的網站囉！

並且如果有設定環境變數，title 也順利被套用上去。

恭喜！

參考文章

• Deploy your projects to Github Pages with GitHub Actions
• Deploy to GitHub Pages
• GitHub Actions now supports CI/CD, free for public repositories

有勘誤之處，不吝指教。ob'_'ov

如果你在撰寫 Rust 的時候，遇到了嗡嗡嗡 ...

本篇不超過一百字，只為了解決一個問題。

— 警語 Warning。

一、作法

有時候我們只是為了 debug 或其他用途而聲明 use ，

但總是卻被警語 warning warning warning ...

本筆記提供兩個常用的關閉方法。

針對匯入 import 的警語 ：

#[allow(unused_imports)]

針對變數 variable 的警語：

#[allow(unused_variables)]

更多方法可參考：

• Module rustc_lint::lint::builtin
• doc.rust-lang.org
• Option to suppress unused variable warnings on unimplemented!() functions.

如果你想一次把「所有」警語 warning 關閉，你可以嘗試這招：

#![allow(warnings)]

我想應該就會很安靜了 ...

如果久了，你怕安靜了 ...

：「我想我真的怕安靜　少了你吵我不開心」

噓

建議不爽過後，還是要把警語開啟哦～

×. 結語

嗡嗡嗡。

有勘誤之處，不吝指教。ob'_'ov