2022-04-08

[實作筆記] 升級現有基於 TypeScript 的 React 17 專案到 React 18

前情提要

升級 React 在官方的文件之中，似乎是一件極為簡單的事，
但是如果你的專案是基於 TypeScript 開發，
在前幾周應該無法順利升級，主要的原因是相對應的 @types 套件並未同時更新，
幸運的是，現在看到文章的你，已經可以順利更新了，請參考以下的步驟。

記錄

安裝 react、react-dom、@types/react、＠types/react-dom

1	npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18

更改 ReactDOM.render 的寫法

原本的寫法

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

後來的寫法

import React from "react";
import ReactDOM from "react-dom/client";

const ele = document.getElementById("root") as Element;
const root = ReactDOM.createRoot(ele);
root.render(<App />);

特別注意要處理 Element 的型別

參考

(fin)

2022-03-18

[踩雷筆記] Brave 瀏覽器與本機開發 http

前情提要

Brave 是一款主打安全、注重隱私的瀏覽器，雖然目前仍相當小眾，
但在開發者中有一定使用者。

https 通訊協定現在已經是一個 Web 服務、網站、api 的基本安全配備，但是對於開發者來說，
在本地開發常常僅使用 http 通訊協定就足以作功能性的驗証。

情境

使用 dotnet core 建立了一個 web api 的服務，預設的啟動站台 end point 為 http://localhost:5000，
而 Brave 作為預設瀏覽器開啟後，會看到 403 的錯誤頁面。

1
2
3

找不到 localhost
網頁找不到此網址的網頁：http://localhost:5000/
HTTP ERROR 404

解決方法

正常的思路，應該是讓本地開發環境建立起 https 的連線，這裡又會有相關的憑証問題要處理，
應該有蠻多不同的作法，改天我再寫一篇相關的介紹。

短解很簡單，換個瀏覽器就可以了，
如果堅持要用 Brave ,可以至設定 > 防護 > 關閉「升級連線至 HTTPS」的開關即可。
順代一提，當我使用 hexo、React 等工具建立靜態網站時不會有這個問題。

參考

Brave

(fin)

2022-03-09

[實作筆記] 靜態網站部署整合 GCP (二) --- Load Balancing & Cloud Storage

前請提要

去年有記錄一篇有關 GCP 部署靜態網站時遇到情境與問題，
不過比較偏像流水帳，不同的部署策略都在同一篇文章，另外有一些問題也得到解決，
除了更新原有文章外，這篇的目的是為了將 Load Balancing 與 Cloud Storage 抽出，
並加以潤飾。

概要

在 Cloud Storage 建立一個 Bucket
在 Network Service 建立一個 Load Balancing
設定 Load Balancing 的 Backend 綁定到 Bucket
作為網站，需要允許所有人讀取 Bucket 的內容

必要條件

GCP 平台的帳戶與足夠的權限，並且已建立專案

在 Cloud Storage 建立一個 Bucket

第一步前往Cloud Storage，
點擊 +CREATE BUCKET，
在 Choose where to store your data 的區塊，
Location type 有三種

multi-region
dual-region
region

這是地理位置與高可用性的相關設定，越後面的設定成本越便宜，但是可用性也越低。
即使如此 google 仍保証了 SLA: 99.95% 的高可用性。

接下來是 Choose a default storage class for your data 的區塊，有

Standard
Nearline
Coldline
Archive

等四種不同的設定，
與檔案的使用頻率有關，對於網站來說建議使用 Standard 。
收費可以參考下表

	Standard	Nearline	Coldline	Archive
Storage(per GB-Month)	$0.026	$0.01	$0.007	$0.004
retrieval(per GB-Month)	Free	$0.01	$0.02	$0.05
Class A Operations(per 1000ops)	$0.005	$0.01	$0.01	$0.05
Class B Operations(per 1000 ops)	$0.0004	$0.001	$0.005	$0.05
SLA	99.95%	99.9%	99.9%	99.9%

接下來是 Choose how to control access to objects 的設定，
不要勾選 Enforce public access prevention on this bucket，
Access control 選擇 Uniform ，這裡的設定是為了避免從 internet 存取 bucket 的資料，
但是我們的目的是放置靜態網站的資料，所以不需設定。

再來是 Choose how to protect object data
這是保護資料的策略，有版本(versioning)與備份(retention)兩種策略，
我們不需要所以選擇 None

按下 Create 以建立 Bucket，
接下來為了讓 web 存取我們選擇 more action(3 個點的 Icon ) > Edit Access
New Principals > 選擇 allUsers > Storage Object Viewer.
接下來可以上傳你的靜態網站的資源了，這裡我們多作一個設定，通常我們要指定網站的首頁為何，
約定成俗是 index.html，一樣 more action(3 個點的 Icon ) > edit website configuration
將 Index (main) page suffix 設定為 index.html(記得 bucket 裡要有這個檔)

Load Balancing 相關設定

接下來設定 Load Balancing，
這只需要設定一次，在目前的實作未涉及 VPC、CDN、Path Rules 等相關議題，
實務上需要的話，請再加上去考量。

GCP > Network Service > Load Balancing
Create Load Balancer
Backend configuration > Create A Backend Bucket
- 自已取一個 Backend Bucket name
- Cloud Storage Bucket > Browse > 選取之前所建立的 Bucket
- 不勾選 Enable Cloud CDN，相關的設定與應用程式的應用有關，較為複雜之後再進行處理
Host and path rules > Simple host and path rule
Frontend IP and PORT > Add Frontend IP And Port
- Protocol > HTTP (正常應使用 HTTPS，這次為了求快而未作相關設定)
- Network Service Tier > Premium

可以參考 GCP 的教學與我們實作上的細微差異

Create a bucket. → 手動建立只需要處理一次
Upload and share your site’s files. → CI 執行
Set up a load balancer and SSL certificate. → 手動建立只需要處理一次
Connect your load balancer to your bucket. → 手動建立只需要處理一次
Point your domain to your load balancer using an A record. → 未處理
Test the website.

CI/CD 的相關設定　(已過時)

參考以下部份的 .gitlab-ci.yml 檔
非常簡單，只需要 gsutil rsync -R 將前一個 job 建置的檔案推到 Cloud Storage 即可

deploy-job: # This job runs in the deploy stage.
  stage: deploy # It only runs when *both* jobs in the test stage complete successfully.
  image: google/cloud-sdk
  needs:
    - job: build-job
      artifacts: true
  script:
    # - gcloud auth list # Show the ACTIVE  ACCOUNT *
    - gsutil rsync -R build gs://your_bucket_name
    - echo "Application successfully deployed."

其它（已過時）

這裡仍有一個未知的設定，gsutil 命令會需要權限才能對 Cloud Storage 寫入，
如何讓 Gitlab-Runner 底下的 Container 擁有指定的 GCP 權限呢 ?
試著下 gcloud auth list 會發現確實有一個可工作的 Account 所以一定有相關的設定要處理，
因為沒有實作到，故不作記錄，但未來再有機會不要忘了這一段的工程。

大部份的工作只需要設定一次，未來只需要 CI 將新版的靜態網站上傳到 Cloud Storage 網站就會更新。

參考

(fin)

2022-03-06

[生活筆記] 2022 貓劇感想

第一次看到貓劇是在高中音樂課上，老師所播放了 DVD 的片段，
具體的內容也記不清了——當時的老師常常放影片上課，
比如說用廚具演奏的樂團、貓劇等，——
當初只覺得特別，甚至有點詭異，並沒有什麼感觸。

大學畢業後，等待當兵的時間，不知道在什麼時間點，我再次接觸了貓劇。
這次就陷入狂熱(FEVER)，一開始是在網路上找片段看，後來也買了 DVD，
整個部片應該看了不下 30 次，甚至是可以聽著音樂睡覺。
我最喜歡的是看每隻貓咪的互動與細節。從那個時候開始，我就希望可以前往看貓劇的演出。

我已經不確定當時有沒有確認過停演資訊，但是我知道倫敦是貓的首演場地，
所以我心中一直想去倫敦參觀(更多的部份是阿森納)
而目前知道倫敦已經沒有演出了，順代一提，歌詞有偷婊熱刺的部份 XDD

Grizabella, The Glamour Cat

She haunted many a low resort
Near the grimy road of Tottenham Court

2018 年我開始學習 Lindy Dance 與聽爵士樂，2020 在課堂上認識了一些朋友有在看音樂劇，
聊天過後，再次激起心中的火花。2021 雖然歷經疫情，但是台灣國內的狀況一直相對穩定，
所以開售當天馬上買了票，在朋友的推薦下，大手筆直接買了衛武營 5800 的票，
結果疫情爆發，就拖到了 2022 年。
雖然票價不便宜，但是這次的體驗真的值得。

好的初體驗，第一次看音樂劇就是史上有名的劇，位置在前排中間的位置;
先說說硬體設施，前排是看不到字幕的，不過貓不是一部需要字幕的戲劇，
特別是我以前看過無數次的前提下，除了 Growltiger 的部份沒有看過外，
其它的部份我都相當的熟悉，加上文本本身是詩集的原因，所以其實並不需要太過依賴字幕，
如果英聽夠好的話更是不需要。

第一排的好處是可以看到細節，這點非常適合貓劇，比起劇情與主要出場貓咪的表演來說，
更重要的是散落在背景的貓咪表情、肢體其實正在無時無刻演出，有時他們的互動會讓我誤以為是演員在聊天，
但是隨著演員的動作，才會發現即時聚光燈不在他們身上，他們也仍然在演出，只要在舞台上就是戲的一部份。
而這個距離也可以看到布景的細節
聲音部份是真的可以聽到人聲，不是透過音響的聲音，可以感覺到人聲的媚力，
這次我的位置聽 Cassandra 聲音真得超清楚(聽說麥克風是藏在他們的頭上，
但是他們會互相撥頭時也不會有聲音，所以收音對我來說還是個迷)

會被演員當 Target Point Out ，被點到時真得很有觸電感
終場 Rum Tum Tugger 會超近

但是也是有缺點的部份，首先是視覺的角度較低，在

衛武營第一排有時會被燈箱(或是風扇、提詞機)或貓檔住
當貓咪圍成圈的時候也會被檔住
側面進場的貓咪要轉頭才知道，沒有機會互動

下次看建議的位子是可以平/俯視舞台的地方，靠走道有機會互動

這次補上更多細節是 DVD 沒有的

三大母貓的舞蹈很多也很好看(dvd 看不到完整的)
- Demeter >> Munkustrap
- Bombalurina >> Rum Tum Tugger
- Jellylorum >> Gus(Growltiger >> Griddlebone)
JennyAnyDots 有一大段的 TAP 表演（有點像火焰之舞）在 DVD 是刪減版
群舞時有很多三層次的編排在 DVD 看不出來，太近也會看不清楚
Mungojerrie And Rumpelteazer 的排舞有點像馬戲團的表演，不太確定舞蹈風格
Growltiger >> Griddlebone 的表演像義大利歌劇
Tantomile & Coricopat 通常會率先作出反應
Victoria 在 Old Deuteronomy 歌詞中 Victoria’s accession 被提到時會被 Munkustrap Cue 一下這點很可愛
- 常在 C 位
- solo 的部份我覺得更像體操或芭蕾
- 舞會 spotlight 的部份搭配的是 Plato/George/Admetus(名字不一定)
Jemima 才是第一個用唱歌的方式回應 Grizabella 的小貓，一直記錯成 Victoria (Victoria 是用肢體接觸)，初演是 Sarah Brightman 飾演的角色，這次有一段用中文演唱(但是我其實希望他能唱原文就好…中文讓人出戲)
Mistoffelees 是芭蕾的表演，特別是連續轉圈(The Conjuring Turn)
我以為演員會讓我認不出來，但是化裝真的很厲害，就像是有臉譜一樣，跟 DVD 版本沒有什麼差別
Grizabella 被趕走的時候讓我想到取消文化與 Lindy Dancer Max 的事件
2019 電影版是邪典加悲劇，我反而希望可以買到 DVD 版本的數位檔
2022 年在台灣有幫 Old Deuteronomy 脫口罩(好像是 Alonzo), 有一種現實的可愛無奈

參考

-https://leticiaschic.com/cats-musical-actor-part1/

(fin)

2022-02-15

[實作筆記] SonarCloud with .NET 6.0.x

前情提要

承上篇,在升級了 .NET 6.0.x 後發現,
SonarCloud 的測試含概率不知何時變成 0 ,
相對應的 Code Smell 也沒有作檢查, 加上原本的 github/workflow 並沒特別分門別類,
所以真正的錯誤原因已經不可考, 修復 SonarCloud 的過程中特別撰文記錄.

實作

第一件事是在升級 .NET 6.0 後, 試著在本地環境上執行檢查並上傳到 SonarCloud.

前置條件

使用的電腦為 MacBook Pro (M1 晶片)
安裝 .NET 6.0.x 以後的版本
安裝 Java 11
安裝 dotnet-sonarscanner
註冊 sonarcloud.io 並建立專案

本機的執行步驟

dotnet sonarscanner begin

dotnet sonarscanner begin \
/o:"marsen-github" \
/k:"Marsen.NetCore.Dojo" \
/n:"Marsen.NetCore.Dojo" \
/d:sonar.host.url="https://sonarcloud.io" \
/d:sonar.cs.opencover.reportsPaths="./test/_/TestResults/_/coverage.opencover.xml" \
/d:sonar.login="****"

參數說明
/o: Organization Key
/k: Project Key
/n: Project Name
/d:sonar.host.url: sonar server url
/d:sonar.cs.opencover.reportsPaths: OpenCover coverage report
/d:sonar.login: 登入 sonar server 的 token

dotnet build
1
dotnet build Marsen.NetCore.Dojo.sln

dotnet test

1
2
3

dotnet test Marsen.NetCore.Dojo.sln \
--logger trx --collect:"XPlat Code Coverage" \
-- DataCollectionRunSettings.DataCollectors.DataCollector.Configuration.Format=opencover

dotnet sonarscanner end

1	dotnet-sonarscanner end /d:sonar.login="****"

Github Workflow 的設定

目前並沒有官方的解決方案 ,
我們使用 SonarScanner for .NET 來執行 workflow ,
這個專案十分簡潔，可以快速看一下內容，了解到怎麼實作一個 workflow ,
因為非官方解決方案，所以我 fork 這個方案避免意外發生.

而在 workflow 中設定的也是使用 fork 的方案
設定參考如下

- name: SonarCloud Scan
  uses: marsen/[email protected]
  with:
    # The key of the SonarQube project
    sonarProjectKey: Marsen.NetCore.Dojo
    # The name of the SonarQube project
    sonarProjectName: Marsen.NetCore.Dojo
    # The name of the SonarQube Organization
    sonarOrganization: marsen-github
    # Optional extra command arguments the the SonarScanner 'begin' command
    sonarBeginArguments: /d:sonar.cs.opencover.reportsPaths="./test/*/TestResults/*/coverage.opencover.xml"
    # Optional. Set to 1 or true to not run 'dotnet test' command
    # dotnetDisableTests: true
    dotnetTestArguments: Marsen.NetCore.Dojo.Integration.Test.sln --logger trx -p:CoverletOutputFormat="opencover" --collect:"XPlat Code Coverage" -- DataCollectionRunSettings.DataCollectors.DataCollector.Configuration.Format=opencover
    dotnetBuildArguments: Marsen.NetCore.Dojo.sln

其它

注意到 opencover 的開發者已經不再維護(2021 年 6 月)，並建議使用 AltCover.
但是 sonarcloud 並未支援 altcover 的報表, 這裡有相關的 issue 追蹤中.

參考

(fin)

2022-02-03

[實作筆記] Stryker 升級與 CI 調整

前情提要

最近換了工作，一頭栽進了前端的領域，
生活又開始忙錄了起來，過年檢視了一下自已的 Side Project ，
意外發生 CI 竟然壞了一陣子，
這是我使用的變異測試工具 Stryker 從原本的 0.17 升級到了 1.3.1 版本
這是一個蠻大幅度的升版，所以設定上相當的不一樣。

我的 OS 是 macOS Monterey 12.1
安裝了 .NET 6.0

Local 環境

首先全域安裝 dotnet-stryker

dotnet tool install -g dotnet-stryker

接下安裝 tool-manifest

dotnet new tool-manifest

這時在你專案底下應該會建立一個 .config 資料夾，
內含 dotnet-tools.json 檔，內容如下

{
  "version": 1,
  "isRoot": true,
  "tools": {
    "dotnet-stryker": {
      "version": "1.3.1",
      "commands": ["dotnet-stryker"]
    }
  }
}

下一步，在專案資料下執行以下命令

dotnet tool install dotnet-stryker

建立 stryker-config.json 檔案
最後設定你的 config 檔 stryker-config.json

{
  "stryker-config": {
    "project": "Marsen.NetCore.Dojo.csproj",
    "test-projects": [
      "./test/Marsen.NetCore.Dojo.Tests/Marsen.NetCore.Dojo.Tests.csproj",
      "./test/Marsen.NetCore.Dojo.Integration.Tests/Marsen.NetCore.Dojo.Integration.Tests.csproj"
    ],
    "reporters": ["progress", "json", "dashboard"],
    "project-info": {
      "name": "github.com/marsen/Marsen.NetCore.Dojo",
      "version": "main"
    }
  }
}

與之前最大的不同是，大部份的參數你都可以設定在 stryker-config 之中，
而不用在執行命令中傳入，不僅可以為其提供版本控制，更能有序的組織你的設定檔，
使其更好閱讀。
如果你的 reporters 中有設定 dashboard 需要額外加上 --dashboard-api-key
ex:

dotnet stryker –dashboard-api-key=$STRYKER_DASHBOARD_API_KEY

參考

(fin)

2022-01-27

[實作筆記] React Practice (一) Firebase 與 React Login

前情提要

本文不會介紹 Firebase 與 React.
依照這篇文章完成後，你會

透過 CRA 建立一個專案
透過 MUI 建立符合 Material Design 的登入畫面
建立 Firsbase 專案並且透過 Firsbase 完成登入登出的功能
建立登入後才能瀏覽的頁面，並且實作登入／登出功能，登出後將無法瀏覽

Firebase 設定

建立 Firebase 專案

這裡的操作非常簡單，可以直接參考下面的影片。

詳細的步驟如下

進入 firebase console
選擇建立專案(Add Project)，並且為你的專案取一個名字
進入剛剛建立的專案後，選擇建立應用程式(Add App)，
在這裡我們選擇 Web 類型的應用程式
建立完成後我們會得到一個範例檔如下, 部份機敏資料先上遮罩

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "A****************",
  authDomain: "******.firebaseapp.com",
  projectId: "******",
  storageBucket: "******.appspot.com",
  messagingSenderId: "******",
  appId: "1:******:web:******",
  measurementId: "G-*********",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

抽出環境變數

在 React 當中的機敏資料,建議的作法是使用環境變數,
我們可以建立一個.env.local提供給開發測試用,
而 Production 環境請直接設定在環境變數中, 相關資料不會進版控.
以下幾點注意事項

必需使用 REACT_APP_* 開頭才可讓 REACT APP 使用 ex:REACT_APP_APIKEY
一般的建議是全大寫
環境變數的更新不適用 Hot Reload，請重啟環境

啟用 Firebase 認証(Authentication)

首先要建立 Sign-in method > 原生供應商 > 電子郵件/密碼
建立第一個使用者 Users > Add User

React

Create React Application

我們透過 TypeScript 建立 React 專案

1	npx create-react-app my-app --template typescript

我們可以試著啟動專案看一下，

cd my-app

npm i

npm start

安裝相關的套件

emotion 相關

1	npm i @emotion/react @emotion/styled

material 相關

1	npm i @mui/material @mui/icons-material

firebase 相關

1	npm i firebase react-firebase-hooks

react-router-dom 相關

1	npm i react-router-dom@6

建立登入頁面

登入頁面與路由

在 src 中建立 pages 資料夾，
之後我們再建立 Login.tsx 檔案如下

import React from "react";

export const Login = () => {
  return <>Login Page</>;
};

接下來我們要透過 react-router-dom 來建立路由
開啟 index.tsx 如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

修改如下

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Login } from "./pages/Login";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="" element={<App />} />
        <Route path="login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

重新啟動專案，在瀏覽器輸入不同的網址將會看到不同的畫面，如此我們完成了頁面的路由。

快速建立符合 MUI 的登入頁面

我們可以透過 MUI 提供的 Template 來建立 Login 頁面
實作細節如下:

參考 Source Code 建立 src/components/SigninSide 組件
修改 src/pages/Login.tsx 如下:

import SignInSide from "../components/SignInSide";

export const Login = () => {
  return <SignInSide />;
};

重新瀏覽登入畫面，就可以看到一個美觀的登入頁 .

實作登入功能

首先請花點時間看一下 Firebase 帳號密碼登入的文件。
接下來我們將依照文件的解釋修改我們的 SigninSide 組件。
打開 SigninSide 組件，找到handleSubmit 函數如下：

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  // eslint-disable-next-line no-console
  console.log({
    email: data.get("email"),
    password: data.get("password"),
  });
};

修改如下

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { app } from "../firebase-config";
....
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  const auth = getAuth(app);
  signInWithEmailAndPassword(
    auth,
    data.get("email")!.toString(),
    data.get("password")!.toString()
  )
    .then((userCredential) => {
      // Signed in
      const user = userCredential.user;
      console.log("user", userCredential.user);
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log("error", error);
    });
};

題外話，data.get(“email”)!.toString()
當中的 !. 運算子可以參考 TypeScript Non-null assertion operator 的說明

用之前在 firebase 建立的帳密登入，登入成功的話可以在 Console 看到類似以下的資訊

1 2	UserImpl {providerId: 'firebase', emailVerified: false, isAnonymous: false, tenantId: null, providerData: Array(1), …}

實作登入後進頁面的跳轉

這裡要使用 react-dom-router 提供的 hook useNavigate,
注意 React Hook 的使用限制

CRA 建立專案時同時會幫我們安裝檢查用的 Lint 所以不用太擔心。
同時我們把 getAuth(app) 也提取到 SignInSide Component 之外

////getAuth 可以不用寫在 handleSubmit 中
const auth = getAuth(app);

export default function SignInSide() {
  ////遵循 React Hook 的規則在最上層呼叫 Hook
  const navigate = useNavigate();//取得 navigate
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    signInWithEmailAndPassword(
      auth,
      data.get("email")!.toString(),
      data.get("password")!.toString()
    )
      .then((userCredential) => {
        // Signed in
        // console.log("user", userCredential.user);
        navigate("/");// navigate 到首頁

實作登出的功能

調整 App.tsx 如下，移除不相關的程式，建立一個 Button 並準備好 onClick 事件

import { Button } from "@mui/material";
import "./App.css";
function App() {
  return (
    <div className="App">
      <Button variant="outlined" onClick={() => {}}>
        LOGOUT
      </Button>
    </div>
  );
}

export default App;

路由設定，只有登入者才能看的頁面

透過 getAuth().currentUser 取得目前的登入者資料, 如果沒有登入者轉導到 Login 頁面,

import { getAuth } from "firebase/auth";
....
<React.StrictMode>
  <BrowserRouter>
    <Routes>
      <Route
      path=""
      element={getAuth().currentUser ? <App /> : <Navigate to="/login" /> }
      />
      <Route path="login" element={<Login />} />
    </Routes>
  </BrowserRouter>
</React.StrictMode>

不過這樣的作法會有問題，
getAuth().currentUser 是非同步取得的資訊，
所以你很有可能都會拿到 null 值，
在官方的建議作法是透過 onAuthStateChanged 註冊 Observer, index.tsx 會類似下面這樣

const auth = getAuth();

onAuthStateChanged(auth, (user) => {
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="" element={user ? <App /> : <Navigate to="login" />} />
          <Route path="login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
  );

  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  reportWebVitals();
});

Todo

Firebase Email link(passwordless sign-in)
Firebase Host Project
PageNotFound
管理 Routes
more…

(つづく)

2022-01-13

[學習筆記] JavaScript function 幾種不同的寫法

回傳純值的函數

//return value
function foo1(a, b) {
  return a + b;
}
// arrow function
let foo2 = (a, b) => {
  return a + b;
};
// skip { } and return
let foo3 = (a, b) => a + b;

console.log("foo1(1,2) is", foo1(1, 2));
console.log("foo2(1,2) is", foo2(1, 2));
console.log("foo3(1,2) is", foo3(1, 2));

回傳物件的函數

//return object

function foo4(a, b) {
  return { sum: a + b };
}
// arrow function
let foo5 = (a, b) => {
  return { sum: a + b };
};
// add () so you can skip { } and return
let foo6 = (a, b) => ({ sum: a + b });

console.log("foo4(1,2) is", foo4(1, 2));
console.log("foo5(1,2) is", foo5(1, 2));
console.log("foo6(1,2) is", foo6(1, 2));

科里(Curry)化函數

//return function, execute foo7(1,2)()
let foo7 = (a, b) => () => a + b;
console.log("foo7(1,2) is", foo7(1, 2)());
//curry
let foo8 = (a) => (b) => a + b;
console.log("foo8(1,2) is", foo8(1)(2));

(fin)

2022-01-13

[心得筆記] 學習圈有多厚?

前情提要

這是 2021 年 3 月的一些隨筆, 不知何故沒有整理上傳 Blog，
剛好最近翻到，作一次反芻並且記錄。

隨筆 1、學習圈有多厚?

常常聽到舒適圈、學習圈、恐慌圈, 再搭配上下圖

這個圖，我覺得比例不對，
所謂的 Growth Zone 應該只有簿簿的一層，
大多數的時候我們只能延著這層膜多踏出一步是一步。

舒適圈、學習膜、恐慌圈

偶有突破，才能擴大 Comfort Zone

我覺得下圖比較適合，你要找到正確的方向突破
才能從 Comfort Zone 連結到 Success

作個有梗的人

那個縫縫才是你成長區(膜)

作個有梗的人

突破是困難的，一但突破了，紅色的部份就會自動補上，這就是它神奇的地方

作個有梗的人

隨筆 2、福原愛事件

甘我屁事? 除非我想當 KOL 用來蹭流量，或是一般大眾需要談資
如果已離婚，她的自由
如果未離婚，感情淡了，感情本來就存在灰色地帶
如果未離婚，感情好，那就是假新聞

2022 王力宏事件

恰巧 2022 也有類似的事件

甘我屁事 ?
渣男是否違法 ? 法律是道德的底限 ?
- 群眾觀感是否約束力，或只是群眾暴力 ?
- 文革式審判
有錢中國賺，出事回台灣(羅志祥)
一個人的作品與其道德是否有關 ?
- 好的事就是是會改變的，而且不一定會變好
- 昨是今非(時空背景不同)

隨筆 3、錢、價格、價值

最重要的是價值，價格只是落後指標，
你應該持有資產(農田、房子、工廠、生意、股票)，
錢只是流通的工具，只有被消費掉的時候會產生價值。

置裝:10000
孝親:104000
生活:120000
娛樂:40000
教育:60000
=> 年度儲蓄目標: 334,000+額外家庭開支(房貸、網路、電話、水電費、第四台、瓦斯)
緊急預備金:180000

邊際效應具體感受

月費 600 元的運動中心，假設每次去 3 小時，
只去一次的話，那一次就價值 600 元，
當次數變多的時候，每次的時間成本不變，現金成本卻是下降的，
運動中心能帶給我的價值，具體量化的話有

運動次數
運動時數
運動頻率*

背後的抽象目的可能包含:

健康
社交

這些「目的」與「價值」就是所謂的「效應」，
並不是越多越好，而是取得平衡*(參考系統思考)
比如說，運動過量反而會受傷變得不健康。

下表顯示，當我第一次去運動中心時，
性價比是最高的，單次的價格是 600 元，
隨著次數的提昇，單次的價格是持續下降的，
理論上每天一次的話，單次價格會下降到 20 元/次

«表一»

次數	均價	時數
1	600	3
2	300	6
3	200	9
4	150	12
5	120	15
6	100	18
…	…
10	60	30
20	30	60
30	20	90

但價值就不是這樣衡量的，
一開始的價值遞增的，但是當超過了某個奇點，
價值就會開始遞減。

那麼錢呢?
其實錢只是一個交流價值用的媒介，
以物易物本身是價值的交換，
但是會耗消很大的時間，才能找到等價的物品，
比如一頭牛可以換多少的白米呢?
更不用說是情感需求等抽象層面的東西。

所以當有了代幣、指示物(Token)、貨幣將抽象的價值具象化，
(背後要有強而有力的組織支持，如:國家，強而有力的信用才能維持貨幣價值)，
不同的國家有不同的貨幣，錢則是這些貨幣的代稱。

Cat

所以真正有價值的東西並不是錢，錢只有在需要交易之時才有用，
真正有價值的是一首好聽的歌，(太好聽了，怎麼才能反覆聽呢?)
一顆蘋果、一段關係…
一直持續對社會有益的組織
ex:

讓人生活有意義(專家、奴隸)，
提供讓人更便利生活、
提供食物、衣服、交通、娛樂、
提供五大需求所需事務、
建立關係

隨筆 4、左右

我很左，但是極致的左是不夠務實的，
我要務實，為了實現某些左邊的理想，
我要右，極致的右才能帶來極致的左，
這樣我還左嗎?

2202 反思

就像跳舞或走路一樣，單足難行千里，
我們總要左右才能前行。
重要的是平衡與推動力。

參考

https://www.books.com.tw/products/0010653417
https://pttcareers.com/Soft_Job/1WQm1aXz

(fin)

2021-12-22

[實作筆記] 靜態網站部署整合 GCP (一) --- Artifacts Registry & Cloud Run

目的

有機會在 GCP 上實作了兩種不同方式的靜態網站部署，
一種是透過 Artifacts Registry 與 Cloud Run，
另一種是透過 Google Cloud Storage 與 Load Balancing
特別記錄一下。

Build Web

build 建置網站， EX: flutter build web、npm rub build …

flutter 建置的 web 靜態檔位置在 build/web
react-scripts build 靜態檔位置在 build 底下

問題與解決方式

react build 不同環境的靜態檔

開發上會有不同環境需
預設執行 react-scripts build 會建置出 production 的靜態檔，
故需要透過套件 env-cmd 來幫我們建立不同的靜態檔，
請參考以下的 package.json > scripts

1 2	"build": "react-scripts build"， "build:dev": "env-cmd -f .env.development react-scripts build"，

ERR_OSSL_EVP_UNSUPPORTED

截至 2021 年 12，nodejs LTS 版本為 v16.13.1
Latest Features 為 v17.3.0
如果 nodejs 的版本在 v17.*.* 以上
執行 react-scripts build 會發生以下錯誤

Error: error:0308010C:digital envelope routines::unsupported
… …
…
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]，
library: 'digital envelope routines'，
reason: 'unsupported'，
code: 'ERR_OSSL_EVP_UNSUPPORTED'

解決方法，執行以下語法

export NODE_OPTIONS=–openssl-legacy-provider

或是將 node version 換回 v16.*.* 的版本

nvm use v16.13.1

Build Image

如果選擇 Artifacts Registry 與 Cloud Run 的 solution
必須撰寫 Dockerfile 來建立 Docker Images

問題 [Dart] no active package dhttpd

dhttpd 是 Dart 的靜態網站解決方案，
不過在部署到 Cloud Run 時會發生錯誤，
更多資訊請參考 stackoverflow 的提問與 issueTracker 的後續

20220308 已有解決方案，更新

加上 dart global activate 指令，這會在執行前啟用 dhttpd 的服務，
RUN 是建立鏡像檔的語法， CMD 才是 docker image 啟動時會執行的語法，
所以應該將 activate 指令放在啟動

FROM docker.io/dart

WORKDIR /flutter

ENV PATH $PATH:$HOME/.pub-cache/bin

COPY build/web ./
COPY start.sh ./
EXPOSE 8082

CMD dart pub global activate dhttpd && dart pub global run dhttpd --port=8082 --host=0.0.0.0

參考聯結

~~暫解是使用其它的靜態網站服務或套件，~~
~~EX: NGINX 、 npm 的 serve 套件，~~
~~或是其它你熟悉的靜態網站服務。~~
~~請參考以下 Dockerfile~~

# pull official base image
FROM node

# set working directory
WORKDIR /flutter

# install app dependencies
RUN npm i -g serve

# add `/app/node_modules/.bin` to $PATH
ENV PATH $PATH:$HOME/.pub-cache/bin

# add app
COPY build/web ./

EXPOSE 8080

# start app and run at 0.0.0.0
CMD serve -p 8080

Artifacts Registry & Cloud Run

登入私有的 Container Registry
透過 CI 建置 image
加上版本的 Tag
推上 Container Registry

參考部份的 .gitlab-ci.yml

script:
  - echo "Compiling the image..."
  - echo -n $GCR_KEY | docker login -u _json_key_base64 --password-stdin https://asia-east1-docker.pkg.dev
  - docker build -t $CI_PROJECT_NAME . --no-cache
  - docker tag "$CI_PROJECT_NAME" "asia-east1-docker.pkg.dev/company_registry/docker/$CI_PROJECT_NAME:$ver"
  - docker push "asia-east1-docker.pkg.dev/company_registry/docker/$CI_PROJECT_NAME:$ver"
  - echo "Compile image complete."

接下手動設定 Cloud Run(這部份應該也可以自動化，未實作故無記錄)

Create Service
Container > General > Container Image URL > SELECT > ARTIFACT REGISTRY > 選取上面部署上去的 images
Container Port 8080
DEPLOY

缺點是每次 CI 跑完 Image 推上 Artifact 後，仍要手動到 Cloud Run 執行 Deploy。
這個步驟應該放在 CI Server 上（即使是需要手動觸發也是），才不會有斷點。

(fin)

前情提要

記錄

參考

前情提要

情境

解決方法

參考

前請提要

概要

必要條件

在 Cloud Storage 建立一個 Bucket

Load Balancing 相關設定

CI/CD 的相關設定 (已過時)

其它（已過時）

參考

參考

前情提要

實作

前置條件

本機的執行步驟

Github Workflow 的設定

其它

參考

前情提要

Local 環境

參考

前情提要

Firebase 設定

建立 Firebase 專案

抽出環境變數

啟用 Firebase 認証(Authentication)

React

Create React Application

安裝相關的套件

emotion 相關

material 相關

firebase 相關

react-router-dom 相關

建立登入頁面

登入頁面與路由

快速建立符合 MUI 的登入頁面

實作登入功能

實作登入後進頁面的跳轉

實作登出的功能

路由設定，只有登入者才能看的頁面

Todo

回傳純值的函數

回傳物件的函數

科里(Curry)化函數

前情提要

隨筆 1、學習圈有多厚?

隨筆 2、福原愛事件

2022 王力宏事件

隨筆 3、錢、價格、價值

邊際效應具體感受

«表一»

隨筆 4、左右

2202 反思

參考

目的

Build Web

問題與解決方式

react build 不同環境的靜態檔

ERR_OSSL_EVP_UNSUPPORTED

Build Image

問題 [Dart] no active package dhttpd

20220308 已有解決方案，更新

Artifacts Registry & Cloud Run

CI/CD 的相關設定　(已過時)