SekiXu Dev Note

目的 想要嘗試進入開源的世界的我選擇了 Gravitino，我已經簡單碰過 gravitino-playground 了，有最基本的瞭解了，於是嘗試編譯…但是失敗了!! 讓我們來看看我遇到了什麼問題，以及我是怎麼解決的。 步驟 安裝 Java Runtime 編譯 Gravitino 除錯 安裝 Java Runtime 首先我是使用 SDKMan 來安裝 Java 的，透過以下指令就可以正常安裝並且管理 Java Runtime。 # 安裝 sdkman curl -s "https://get.sdkman.io" | bash # 全域安裝 openjdk 17.0.13-ms sdk install java 17.0.13-ms 編譯 Gravitino 透過以下指令就可以執行編譯 Gravitino 的腳本，前面跑了 4~5 分鐘左右都沒有什麼問題。 # command to build gravitino ./gradlew clean build -x test 直到執行到這個 Task 的時候，我遇到了以下問題。 > Task :clients:client-python:miniforgeSetup FAILED 除錯 以下是我嘗試過的解決辦法，但是都失敗了： 換 python 版本 3.8 / 3....

前言 這篇的主題是建立 development 並且確認 development 在各個狀況會如何調度資源，如果需要跳到別的部分的 k8s 筆記，請透過下方連結跳轉~ K8S - 基礎學習筆記目錄 建立 Development apiVersion: apps/v1 # 定義這個物件的類型為 Deployment kind: Deployment # 設定這個 Deployment 的 metadata(唯一識別資訊) metadata: name: py-backend-test-deployment # 設定這個 Deployment 的 spec(規格) spec: # 定義這個 Deployment 要運行的 Pod 的數量 replicas: 2 # 定義這個 Deployment 如何去選擇要管理的 Pod # 對應到 Pod 的 metadata.labels selector: matchLabels: app: py-backend-test # 定義這個 Deployment 要管理的 Pod 的模板 template: # 定義這個 Pod 的 metadata(唯一識別資訊) # 這邊的 metadata....

前言 這篇的主題是建立 pod 並且與你建立的 pod 互動，如果需要跳到別的部分的 k8s 筆記，請透過下方連結跳轉~ K8S - 基礎學習筆記目錄 建立 Pods apiVersion: v1 # 定義這個物件的類型為 Pod kind: Pod # 設定這個 Pod 的 metadata(唯一識別資訊) metadata: name: py-backend-test # 設定這個 Pod 的 spec(規格) spec: # 定義這個 Pod 要運行的容器 containers: # 定義容器的內容，可以把他想像成 docker-compose 的設定 - name: py-backend-test image: sekixu/py-backend-test:latest # 定義容器的資源限制，避免這個容器使用過多資源影響到其他容器 resources: # 定義容器的最大資源限制 limits: memory: "512Mi" cpu: "500m" # 定義容器的最小資源限制 requests: memory: "256Mi" cpu: "250m" ports: # 定義容器要開啟的 Port - containerPort: 8000 指令 # 套用寫好的 yaml 檔建立 pods kubectl apply -f pod....

前言 這個文章將會一步一步帶你把一個簡單的前後端分離的服務部署上本地的 K8S(with Docker CE)，參考教學文章為 guangzhengli/k8s-tutotials，感謝這個作者開了這個相當好懂的 K8S 教學 Repo。 這個文章內所有的步驟，都會透過我自己的 Repo matsuno.seki/eks-cicd-template 來實作一遍，大家也可以自己開一個 Repo，針對想練習的部分實作看看! 章節 在這個文章我會跳過服務建立的部分，大家可以動動腦袋把自己的服務編成 container 推上 docker hub 後一起實作看看，另外在每個步驟後面的括號都是我自己為了更好理解打上去的註解，如果哪邊有錯或是誤解的話可以跟我說~ 建立 pods(set of containers) k8s - Pods 建立 deployment(auto pods management) k8s - development - replicas 建立 service(pods proxy) 建立 ingress controller(service gateway) 參考文件 guangzhengli/k8s-tutotials

前言 原先要為了不同作業系統處理不同編碼，但原本 UTF-8 就應該可以被所有作業系統給讀取，於是研究了一下並把注意事項做成筆記！ UTF-8 vs UTF-8-sig 兩個都是 UTF-8 的編碼，不過 UTF-8-sig(UTF-8 with signature) 是在檔案開頭帶了 \ufeff 的BOM(Byte Order Mark)，定義一個，讓打開他的檔案知道這是個 UTF-8 編碼的檔案。 開啟方式的解決方案 在開啟檔案的時候，直接透過記事本或是 VSCode 其實是可以讀取到正確的內容的，但是在 Excel 中打開會是亂碼，那是因為 Excel 沒有讀到 BOM(Byte Order Mark)，所以沒辦法正確的解碼中文字，那麼就會顯示亂碼了。 使用記事本或是 VSCode 就會用正確的編碼開啟了。 寫入方式的解決方案 剛剛提到前面少了 BOM 讓 Excel 不知道怎麼開，那就在開頭加上 BOM，要在檔案中寫入 BOM 的方法有兩種，一個是使用 UTF-8-sig，另一個就是自己寫 BOM 進去檔案了，這樣就可以讓編輯器知道要用 UTF-8 來解碼這個檔案！ 使用 UTF-8-sig with open(path, 'w', newline='', encoding='utf-8-sig') as csv_file: csv_file.write(data) 寫入 BOM with open(path, 'w', newline='', encoding='utf-8') as csv_file: # 寫入 UTF-8 BOM csv_file....

前言 這篇是 useEffect，在這個 Hook 寫完之後就會直接進入實戰了，話不多說，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 的用途是當你需要與 React 外部的東西互動時，將這些外部互動包成一組 “Effect”，用來將切開元件與外部系統的互動，並且避免不穩定的多次渲染。 useEffect(setup, dependencies?) 我們可以看到他的初始化分成兩個部分: 傳入 setup: 傳入一個 function，與外部系統互動的細節，包含當系統結束時的後處理，為一組完整的 Effect。 dependencies: 可忽略，當需要時傳入一組 Array，做為這組 Effect 的依賴，當依賴的值改變時，就會觸發後處理，並且重新初始化，互動 / 連結外部系統。 範例 以下是使用 useEffect 的範例。 import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { // Effect setup function const connection = createConnection(serverUrl, roomId); connection.connect(); // 後處理 function return () => { connection....

前言 這篇是 useRef，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 的用途是避免元件中不需要重新 render 的部分被重新 render。 const ref = useRef(initialValue) 我們可以看到他的初始化分成兩個部分: 傳入 initialValue: 初始值，會傳入 useRef 的 current 給元件使用。 傳出 ref: useRef 會回傳只有一個屬性(current)的物件，current 的預設值就是我們剛剛傳入的 initialValue。 ref 就是一個單純的 javascript 的物件，這個變數並不會被 React 單向資料流所監看，所以也不會因為這個物件內中的變動而觸發 re-render。 使用：要使用 ref 就直接讀取 / 修改 ref.current 就可以了，不需要像 useState 那樣使用 get / set 的模式。 範例 以下是使用 useRef 的範例。 import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const handleStartClick = () => { const intervalId = setInterval(()=>{ // ....

前言 痾…不小心跳過了整整 4 個 Hooks…幹 這篇是 useContext，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 比較特別，是用來定義全域變數用的，像是網頁的暗黑/白色主題切換需要讀取一個統一的變數，就會使用到這個 Hook，在父元件中注入後就可以在子元件中取得 Context 的值。 const SomeContext = createContext(initValue); 我們可以看到他的初始化分成兩個部分: 傳入 initValue: 傳入初始值，用來建立全域變數。 傳出 SomeContext: 用來將值注入元件的本體。 範例 以下是使用 useContext 的範例。 import { createContext, useContext, useState } from 'react'; // initialization const ThemeContext = createContext('light'); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> // inject on parent component <ThemeContext.Provider value={theme}> <Form /> </ThemeContext.Provider> <Button onClick={() => { setTheme(theme === 'dark' ?...

前言 今天嘗試用了 GitHub Actions 把我的部署過程自動化，由於這個專案 pay 太少了只是單次活動使用的靜態網頁，不需要測試，所以這次會專注在部署上。 步驟 建立 access token 建立 workflow 建立 secret 保管機敏資料 優化探討 建立 access token 為了方便你建立 token，我直接把連結幫你點好放在下面了，不用謝 😊 https://github.com/settings/tokens?type=beta 點進去右上角的 Generate new token，然後填妥 Token name, 過期時間，並且選擇要可以操作哪些 repository，為了安全性請盡量不要使用 All repositories 的選項，再到下面的 Repository permissions 中找到 Contents，將 No access 改成 Read and write，這樣就可以透過 token 直接 clone private repository 而不需登入。 建立完成之後會回到前一頁，我們就可以看到 token 是什麼了，直接複製起來留著後面使用。 建立 Secret 管理機敏資料 請直接參考下面的 code，在專案根目錄建立 .github/workflows/deploy.yaml # work flow 的名字 name: deploy to dev server # 表示在 master 這個分支被推送 commit 的時候 # 會執行這個 workflow on: push: branches: - master jobs: # 定義我們的 job # job 會包含好幾個 step deploy: # 定義這個 job 要跑在使用 ubuntu 的 runner 上 runs-on: ubuntu-latest # 開始寫這個 job 的操作步驟 steps: # 這個 step 用到了 appleboy 大大寫的 ssh-action@v1....

前言 最近想認真學 CI / CD 相關技術，所以想先從 GitHub action 和 terraform 開始，而按照開發流程來說，先建立一台開發 / 實驗用的 Server 一定是 Hello world 一般的開始了，這篇文章會按照 terraform 建立一台開發用的 EC2 server。 https://developer.hashicorp.com/terraform/tutorials/aws-get-started 步驟 在這次的步驟中我假設你已經有了 AWS 的基礎知識，並且安裝好了 terraform，我們就可以按照以下幾個步驟進行實作。 Terraform 步驟 main.tf 內容解釋 建立 Server 實際連線測試 Terraform 步驟 一個基本的 Terraform 使用流程，會有以下幾個步驟。 init 安裝各種插件，像是 Provider(註1)。 validate 事先驗證語法是否正確，但不保證 runtime 不會有 error。 plan 檢視即將建立怎麼樣的資源。 apply 實際在該服務上建立資源。 show 觀察已建立的資源的資訊，以 EC2 為例，我們就可以看到我們建立的 Instance 的 IP, Image 及區域等等資訊。 change 更改已建立的資源的內容。 destroy 將建立起的資源刪除掉。 註1: Terraform 中用來與對應的服務(像 AWS)溝通的插件 main.tf 內容 以下是我們的 main....