# 前言 在 2022/12/31 的日子
剛好是跨年年假
也突然發現自己開始工作的時間已經 10 年了
沒想到已經 10 年了 XD
還記得當初只是個三流國立大學還是非本科系甚至沒讀研究所就出來找工作的菜雞
到如今也是個工程師了?
在這工作第一個 10 年的時間也好好回憶一下當初的路徑
以便對下一個 10 年做準備
# 這 10 年的路徑 講真的在 2007 年到 2011 年個人覺得算是台灣網路產業繼 Kimo, PChome, yam 等入口網站崛起後開始爆發的時代, 也是手機開始朝所謂的智慧型行動裝置邁進的時代
剛好也是我還在讀大學的時候, 所以當時在學校時就常常在網路上看到這些資訊, 當時遠在美國也是矽谷開始發展起來的時候, 台灣相對較後面才開始有許多所謂的新創公司開始出現
因為以前就對資訊產業有興趣, 但是因為不會讀書, 所以就只好靠填志願分發學校
當時直接條列的順序是國立大學->資訊科系->機械->土木
然後分數實在太爛
所以最後落在國立臺灣海洋大學的河海工程系 XD
不過雖然大學都在打電動看動畫和睡覺中度過
但還是有選修資訊相關和自己開始嘗試寫程式
最後到大三才知道原來有前端工程師的職業, 而且相對其他資訊類的工作沒有要求那麼高
而且以前就喜歡搞一些 UI 互動的東西
所以就決定了職業走向
## 2012 ~ 2015 miiiCasa 雲永科技 到了 2012 年替代役要退伍了就開始找工作, 還不錯的是當時也有些新創的公司可以投履歷
直到投到了一家名為 miiiCasa(雲永科技) 的公司, 在當時也算是新創公司(從 D-link 內部新創, 之後獨立出來的), 裡面的面試官(Awoo) 非常熱情
...
直接上設定
server { listen 80; listen [::]:80; server_name api.example.com, example.com; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; set $proxy http://0.0.0.0:3000; if ($host ~ api.example.com) { set $proxy http://0.0.0.0:8000; } proxy_pass $proxy; } }
...
# 前言 基於公司之前的架構設計
使用 GCP 重現一個簡化版的部署架構
基本是使用 artifact registry 和 compute engine
GCP 官方也有 artifact registry + compute engine 的部署設計
但是因為是 side project, 不想搞得太複雜, 所以沒有採用官方的方式(官方的方式再搭配其他的服務比較建議用在正式專案上面, 會是比較有彈性且可以進行高承載的設計, 不過主要還是看預算和承載量的考量)
# 架構 side project 是一個單純的 web service
目前也不考慮高流量的問題
前後端分離, 主要會有前端的服務和 api 的服務
## google cloud Compute Engine(1 instance) Cloud SQL(1 sql, 沒有開 HA, 需要注意的是有開 HA, sql 費用會是兩倍計算) Artifact Registry ## code Vue(nuxt SSR) CodeIgniter 4(當作 API server) 因為會有前端和後端的部分, 會有兩個 service
node PHP 所以最簡單的方式就是兩個分開開發
...
# 介紹 PM2 是一個可以方便處理 node process 的工具
大多用於線上環境
這邊主要紀錄 PM2 的一些用法與指令
# 基本使用 可以參考官方文件 PM2 Process Management Quick Start
安裝
npm install pm2 -g 啟動
pm2 start <要啟動的 js> 通常建議啟動時的指令搭配以下參數(更多參數請詳閱文件)
# Specify an app name --name <app_name> # Watch and Restart app when files change --watch # Set memory threshold for app reload --max-memory-restart <200MB> # Specify log file --log <log_path> # 重新載入 pm2 reload <要重啟的 app> 大多用於程式部署更新後, 有較好的體驗(和 restart 相比)
...
# 前言 因為公司有使用部分的 firebase 服務
那就順便用一下前一陣子推出的 app check 的服務(雖然我覺得這服務還沒到完善的地步)
這服務主要是要協助驗證來自 client 的請求是否合法
不只單純是 firebase 的服務可以用
一般 API 也可以使用
# 使用 目前 SDK 只支持 Node.js
Verify App Check tokens from a custom backend
因為原本的後端不是 Node 的環境
所以使用 Node.js 建立起一個 middleware 以便讓原有的 API server 來串接
# 流程 # 所需作業 app 需要使用相關對應的 SDK
在 firebase console 把 app check 選單中建立的 app 做註冊
因為是改為單獨建立 Node.js 的服務
所以會針對文件範例做調整
const http = require('http'); const url = require('url'); var admin = require('firebase-admin'); var serviceAccount = require(__dirname + '/serviceAccountKey.
...
Sometimes a dynamic link is accidentally archived.
But doesn’t have any option show archived dynamic link list.
BTW
You have a way to unarchived this dynamic link.
# Use POST API update this dynamic link Find your filebase console auth data You can edit dynamic link data and then catch request when save it.
Find this request https://firebasedurablelinks-pa.clients6.google.com/v1/updateDurableLink?alt=json&key=<YOUR KEY> and copy header
Build POST data curl --location --request POST 'https://firebasedurablelinks-pa.clients6.google.com/v1/updateDurableLink?alt=json&key=<YOUR KEY>' \ --header 'Authorization: <YOUR Authorization>' \ --header 'Origin: https://console.
...
最近因為需求要接手 Windows Server 進行維護與開發
因為只有在很久以前幫別人處理 IIS Server 一點經驗
時間也非常久了
所以筆記一下這次的處理過程
這次處理的 server 版本是 Windows Server 2019
# SSH on GCP Compute Engine 如果是建置在 Google Cloud 的 Compute Engine 上的話
就參考文件 Getting started with OpenSSH on Windows Compute Engine instances 就可以了
# 前置作業 之前似乎是採用 remote desktop 的方式
這對習慣命令列操作的人來說會有點不習慣
而且交接程式碼和檔案都放在那台機器上
所以為了之後方便操作, 首先就要安裝 OpenSSH
## 安裝 OpenSSH server 因為 SSH 會有 server 和 client 的部分
因為是需要連進去 Windows Server
所以只需要處理 OpenSSH server 的部分
Refer - 安裝 OpenSSH
...
# Intro 在 JavaScript 中的日期時間是個當初沒有定義出良好設計的東西
這裡先舉幾個常見的問題
日期格式問題 日期呈現的語系問題 時區問題 12 小時 24 小時問題 … 以原生的 API 在處理日期時間大多得自己額外做許多事情或是套用一些第三方 libary 來協助達成目的
# 時區問題 這次主要是討論關於時區的問題
在早期只能用 getTimezoneOffset() 的方法搭配時區表去換算各地時區
現在倒是可以使用 Intl.DateTimeFormat
refer - Date.prototype.getTimezoneOffset()
refer - Intl.DateTimeFormat
其實上述的問題, 在使用 Intl.DateTimeFormat 基本上都可以解決掉
詳細方式可以參以下文件
refer - Intl.DateTimeFormat() constructor
在時區中又有一個常常被忽視的的問題就是夏令時間(daylight savings time) 這個在夏季時就得把時間提前一小時的問題
如果自己處理時區就得記得處理這問題
使用 Intl.DateTimeFormat 的話系統已經自動處理了
# Intl.DateTimeFormat 這邊簡單介紹一下 Intl.DateTimeFormat 的一些用法與注意事項
new Intl.DateTimeFormat(navigator.language, { timeZone: 'America/Los_Angeles', dateStyle: 'full', timeStyle: 'full' }).format(new Date()) 這個範例就表示了當前洛杉磯的時間
第一個參數是語系, 採用 BCP 47 標準, 基本上建議使用 navigator.
...
# 前言 距離上次使用 YouTube Player API 已經是 2014 年的事了
不知不覺也過了超久了
剛好最近公司有相關的需求需要在 App 中能夠播放 YouTube 的影片
原本想說 App 應該和我沒關係了
所以這次準備躺平(誤
結果還是被牽扯進來了…
# 2022 年當前如何使用 YouTube player SDK 沒想到不看還好, 一看就準備 GG
一開始把文件丟給 Android 和 iOS
Android 那邊說無法用
我當下????
文件都寫得好好的, 為何說無法用
和 Android 一起討論了一下, 才確認了一件事
原來 Android 為了統一 libary, 在 2018 年開始推行 Androidx 要取代 android.support
最大的改變是 namespace 的變動, 雖然官方有工具可以對第三方 lib 做轉換, 但也會是一個大換血, 而且對比較老舊的套件還會需要處理 activity 和 fragment 的處理, 因為現今大多的 Android 都以 fragment 實作 UI 了
...
最近添加了一個小功能要來測試成效
就是因為 PM 有看到一些服務的連結在 iOS Messages 上呈現並非常見的圖片而是影片
PM 說好像是 iOS 15 以上支援(我自己是沒找到相關的資料證明這件事)
不過應該沒支援的話就呈現圖片
查了一下文件, 其實也不難
基本上就是定義 open graph
多定義
<meta property="og:video" content="http://www.example.com/sample.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="1280" /> <meta property="og:video:height" content="720" /> 這邊有個要注意的點是
原來是產出 1:1 的影片, 但發現會上下截掉
所以最後採用 16:9 的比例
# demo Your browser does not support the video tag. Refer - Best Practices for Link Previews in Messages
...