2025年1月6日 星期一

github actions可不可以寫funcion,試試看複合動作

就我知道github actions應該算腳本類的語法吧,在工作上遇到要連線vpn就要落落長一大堆語法,所幸問一下ai,有沒有類似function的用法,還真的有,做一下紀錄

# ./github/actions/vpn/action.yml
# 路径除了vpn其他都必须一样
name: vpn connect
description: 'vpn connect'
# description這裏不能省

inputs:
OVPN_CONFIG:
description: 'ovpn config'
required: true

# actions里面不能有env跟secrets只能透过with传入

runs:
using: "composite"
steps:
- name: Write OpenVPN config
shell: bash # shell这行必填
run: echo "${{ inputs.OVPN_CONFIG }}" > xxx.ovpn

- name: Install OpenVPN
shell: bash
run: sudo apt-get update && sudo apt-get install -y openvpn

- name: Configure OpenVPN
shell: bash
run: |
sudo openvpn --config cywang.ovpn &
sleep 10 # Wait for the VPN to establish connection
ps aux | grep openvpn
ip addr
ip route

這樣就寫好了,接著我們要來示範使用方式

jobs:
  deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
      # 因為要使用到repo裡面的檔案一定要有這行

- name: vpn connect
uses: ./.github/actions/vpn
        # 直接uses就可以使用,要注意路徑要正確
with:
OVPN_CONFIG: ${{ env.OVPN_CONFIG }}

以上就是這次的分享

2024年12月25日 星期三

前端開啟app的方式

如標題,總是會有各式各樣的需求,要請前端要能直接開啟app,直到今天我才知道關鍵字怎麼下,其實就一句話,上網查"[該app] schema url"

例如: 抖音 schema url

目前沒有找到有人整理這部分成套件,只有找到有好心人整理了各大app的schema url

https://github.com/Oct1a/TikTok-Scheme

https://github.com/WengYuehTing/url-scheme-collection

如果需求只是要開啟app那其實可以無視後面的路由,把href導到//即可

例如:location.href = "snssdk1233://"

備註:抖音有好幾種版本,都不一樣,記得確認對象再寫

在這先預祝大家工作順利不用加班,尾牙抽到大紅包,年假可以放14天~

2024年12月19日 星期四

HD鬼故事N+4集

原本以為這個系列會隨著神之工程師的退役而停止更新了,想不到最新一集來的如此之快

年關將近,隨著專案進入最後測試幾段,老闆突發奇想,希望連到正式機,以正式機數據來進行測試,故事就此開始

這想法原則上也沒什麼問題,至於要怎麼倒資料,小編身為前端工程師沒有話語權,就這樣早上九點就被告知後端關閉api,然後.....前端就放假了==

一直到中午被告知匯入資料比預想還要久,可能還要再兩三個小時,一直到三點半資料才倒完。

雖然放了將近一天的假很爽,但該吐槽還是要吐。我就問,既然知道倒資料要停機,專案又這麼趕,那為什麼要拿測試機來倒,開個新的db倒資料,倒完再把db指過去很難嗎==然後到底是怎麼倒需要這麼久,我嚴重懷疑他寫腳本去打另一套系統api,然後在寫入資料庫....算了想到就怕!

另一則故事

在近期這個專案有個聊天室的功能,後端非常有自信的說要做即時聊天必須用websocket,這功能在這專案中算是有一定複雜性的,所以讓主力工程師來負責,然後他跟我說,ws連是連了,但是功能是告訴你有新的訊息,實際的訊息資料,必須打api去要....然後我問是哪位後端負責這功能的,當我聽到姓名後只能說,真不塊是你啊!那是一位我曾經同一個功能要跟他來來回回三四次次,連前端需要code這麼基本的需求都還要我們三催四請,我就問你們都用laravel了,為什麼不直接寫成middleware跟route group就好==哎

另另一則故事

我想歲末年終大家最期待的就是尾牙了吧,公司也非常大方開放員工帶眷屬一起同樂,只是眷屬的車資不輔助.....我忍了,然後今年特別收到消息,公司大佬要跨就與大家一起同樂,所有員工必須喝酒,然後眷屬坐一桌,員工為了方便敬酒坐一桌.....

後來通話了我才知道,不是車資不輔助,是單人車資輔助有上限400人民幣,小編家做uber到高鐵就要800塊了不豪小,來回1600,高鐵車資1400,就算我搭捷運去餐廳,我一個人車資就不夠請了,最省的方法就是不能喝酒,然後開車載家人去,但是說強迫要喝酒...然後攜帶眷屬不能跟眷屬不能同桌又是哪招....真的不知道要從哪開始吐槽了

以上三篇短篇故事,同樣是做夢夢到,如有雷同,肯定是雷同的啦

2024年12月10日 星期二

vue開發上的小坑,vFor的item不能當vModel

簡而言之我在程式碼裡面這樣寫

UserCard(v-for="data in datas", v-model="data")
UseCard是我自製的component,因為裡面會牽涉到改動,所以不太適合用props的方式傳進去,所以用model的方式來傳,開發上還沒啥問題,不過打包卻會爆出以下錯誤
v-model cannot be used on v-for or v-slot scope variables because they are not writable

上網查了一下,用v-for拆出來的物件,該物件不能放到v-model裡面進行修改,那怎麼辦呢?
很簡單,跟著v-for傳出來的還有index,用它來指向原物件就可以了
UserCard(v-for="(_data, index) in datas", v-model="datas[index]")

沒想到用vue這麼多年還有這麼一個小坑沒採過,記錄一下@@收工下班!

2024年12月9日 星期一

HD鬼故事N+3集

在年初搞出大事件的神級工程師(詳閱鬼故事第N集),據以往跟他配合的工程師爆料,他從來沒在管衝突的,一但有衝突就是直接用自己的程式碼蓋過去。大概就是以下情況

情境一:
大學長要過~~你們這群菜雞瞎逼逼什麼,全部閃開!

情境二:
哪有什麼衝突,小朋友在小打小鬧而已!

這些對已經待上個把月的工程師來說,雖然痛苦,但都習以為常了。你問我老闆為什麼不火他!他把DB刪了都沒事,這種小事對他來說跟搔癢差不多吧!

然而,就在最近來了個“產品”,我是不知道他產什麼品,但他感覺一來就想搞點事,這又是另一個故事了,有機會再談。

總之昨天又發生這件事,熟知版控的朋友一定知道,如果不好好解衝突,上線的功能極有可能會壞掉。想當然爾,有了一個會議,重點這會議沒有找該神級工程師開,而是找功能壞掉,負責的另外兩位工程師,一部分對話訊息如下:

產品:這事挺嚴重的,下次再發生,老闆可能會懲處。

....你跟他們兩個說意思是懲處他們嗎?言下之意是肇事者撞爛了建築,應該要告建商為什麼建造不夠穩固嗎?我都不知道要從何開始吐槽了

正當我們以為事情就這樣告一段落時,當晚我們就收到神級工程師要離職的消息。雖然有些驚訝(畢竟他待了十年)但也擋不住嘴角上揚,正當我們要開香檳時,就看到他無預警地退群了,沒有留下任何交代......

沒有人知道發生了什麼,也不知道未來會如何,更沒有好好交接(幹你到是好好交接啊!)

到底是被罵了鬧脾氣離職,還是產品大大跟他說了些什麼,沒有人知曉,唯一知曉的是,丞相起風了,要變天了!


更新一下

現在每天都聽到後端工程師在喊說需要通靈,需要知道更多資訊,當初神工程師的對話紀錄,叫運營配置的參數,什麼都能拿來作為通靈的素材....哎~

2024年12月8日 星期日

safari踩坑第一集input focus為啥會有一塊空白

你也遇過safari的坑嗎?

希望你可以在這系列找到一點溫暖

問題描述:

safari點擊input出現鍵盤後,底部會多出一塊空白,我用debug模式下去看,這塊不屬於html的空間。應該是瀏覽器問題,但老闆不會管你,bug照開

我是參考這篇文章下去做的,也是唯一找到比較符合我狀況的問題,不過他遇到的坑不是因為input產生的,應該是因為滑動導致工具列縮小所產生的空白,看起來應該是不同的坑。因為我使用他的程式碼,只是額外在content後面加上input,然後打開safari一樣爆…(如圖)

有興趣的朋友可以參考這隻程式碼

https://codepen.io/lu7766lu7766/pen/RNbrBeO


因為這屬於瀏覽器問題,上網找也找不到什麼有效解法,只能使用設計避免它看起來這麼明顯像bug,例如把input的底色與背景底色相同,或是用彈窗來做搜索,或是將搜索單除出一頁並且放在上方,最終找到一個程式的硬解

參考這個網址,在input focus時把window scroll鎖起來,唯一小問題是在safari中,addEventListener第三個參數必須設定為{ passive: false},不然會預設為true,然後它就會繼續不屌你e.preventDefault()繼續快樂的出現空白

程式碼

const preventDefault = (e: Event) => {
e.preventDefault()
}
const onFocus = () => {
window.addEventListener("touchmove", preventDefault, { passive: false }) // mobile
}
const onBlur = () => {
window.removeEventListener("touchmove", preventDefault)
}

結語:

希望過兩天老闆不會說為什麼輸入時都不能滑動視窗....

之後可以試著寫成超出window.scrollY不給滑動.....之後再說


更新

發現只要不要滑到最低,出現鍵盤就不會出現最下面那片空白,那解法可能就是滑到最低會自動回彈1px,實際我還沒寫,有興趣的小夥伴可以寫一下試試

2024年11月15日 星期五

github actions使用進化,使用runner來佈版吧

我就覺得奇怪,最早喬納斯推薦我這套,我就在質疑,一開始跑jenkins是跑在server端,這樣才能對機器進行操作,github跑在遠端是要怎麼進行佈版啦。

一開始也沒什麼概念,於是我突發奇想,使用ssh連線,使用sftp上傳檔案,或是使用nodejs腳本

一直到最近遇到windows open ssh不穩的問題,如果短時間遇到一個帳號同時登入,ssh就會掛掉的狀況,我只好另求出路

原本想說要使用drone來作為cicd工具,看到要透過docker啟動兩個服務,一個是server一個是runner,我對這個也沒有很了解所以看過就算了,但server我有點不太想亂裝東西,所以還是放後面吧

在多方查找之下才發現,actions有各式各樣的套件可以與不同的服務進行部署,azure, aws之類的,我想想會不會有iis的pipeline可以使用,結果是有的,但使用上好像會失敗,有興趣的大大可以自己玩一下

再來我逛到保哥的網誌,裡面有用到一個可以上傳跟下載的套件(actions/upload-artifact,actions/download-artifact),接著再看到這篇提問,裡面幾個關鍵字,needs: build,run-on: self_hosted,needs我看得懂,就是可以把任務串連起來(沒串連之前測試都是併發)那self_hosted難道是可以跑在本機上?接著我就開始研究這些關鍵字

原來有github有個服務叫github runner,可以在伺服器跑起來,這樣run-on: self_hosted就可以在之後step寫要做的動作了,這招妙啊!原來runner就是監聽器的服務啊~(drone也有)

要在伺服器把github runner跑起來,可以參考這篇教學,可以選擇伺服器的作業系統進行安裝與啟用,基本上從第一行執行到最後一行就可以完成了

這邊記錄下我遇到的兩個問題

第一行下載zip包,遇到ssltls安全問題,可以把網址複製到chrome上直接下載

最後一個./run.cmd,這行跑起來沒問題,服務也持續啟動,但問題是到時腳本跑在機器上會在github-runner資料夾下面創run.cmd資料夾,到時會有檔名衝突問題,所以當啟動完就要把檔名改掉,這超不合理的啊,我也不知對什麼會這樣,可能是我設定哪裡出問題了。

圖中我把run.cmd改成run_service.cmd了,另外成功的跑了一些程序


接著就可以開始撰寫腳本了

name: 81-dev

on:
push:
branches:
- "dev"

env:
PROJECT_NAME: "81 dev"
PROJECT_FOLDER: "81c"
TELEGRAM_TOKEN: "tg_token"
TELEGRAM_CHAT_ID: "chat_id"

jobs:
build:
runs-on: ubuntu-latest # runs-on字段指定运行所需要的虚拟机环境。注意:这个是必填字段
steps:
- uses: actions/checkout@v3
- name: Setup Node 14
uses: actions/setup-node@v3.5.1
with:
node-version: "14"
cache: "npm"

- name: Install yarn
run: |
npm i -g yarn

- name: build
run: |
yarn
yarn build

- name: Upload a Build Artifact
uses: actions/upload-artifact@v4
with:
name: application
path: dist/**/*
deploy:
needs: build
runs-on: self-hosted

steps:
- name: remove old files
run: |
Remove-Item -Path D:\wwwroot\${{ env.PROJECT_FOLDER }}\static\* -Recurse -Force
Remove-Item -Path D:\wwwroot\${{ env.PROJECT_FOLDER }}\index.html -Force

- name: Download new binaries over the top of the app
uses: actions/download-artifact@v4
with:
name: application
path: D:\wwwroot\${{ env.PROJECT_FOLDER }}

notify:
needs: deploy
runs-on: ubuntu-latest
steps:
- name: telegram notify
run: |
curl -d '{"method": "sendMessage", "chat_id": "${{ env.TELEGRAM_CHAT_ID }}", "text": "${{ env.PROJECT_NAME }} deployed."}' -H "Content-Type: application/json" -X POST https://api.telegram.org/bot${{ env.TELEGRAM_TOKEN }}/



小結
這專案打包下來2.6mb,這樣扣除build跟上傳時間,僅算下載及佈版,時間都落在30秒內,算是非常快速跟滿意。
最終還是有個小問題,如果是在organization創建的runner那這self_hosted都會指向同一台,沒辦法多台或命名嗎?這之後再來研究吧


補充

上線問claude他這樣回答我

self-hosted runner 可以自訂命名和設定群組:

  1. 在 GitHub Actions 工作流程中指定特定的 runner:
  1. 設定 runner 時的命名和標籤:
# 基本設定命令格式 ./config.cmd --url https://github.com/{YOUR_USERNAME}/{YOUR_REPO} --token {YOUR_TOKEN} --name "MY-IIS-RUNNER" --labels prod-iis,windows,vue # 例如: ./config.cmd --url https://github.com/your-name/your-repo --token abcd1234 --name "PROD-IIS-01" --labels prod-iis,windows,vue

參數說明:

  • --name: runner 的名稱
  • --labels: runner 的標籤,可以設定多個,用逗號分隔
  • --work: 指定工作目錄 (預設是 _work)
  • --group: 指定 runner 群組
  1. 如果要修改現有的 runner:
# 1. 先移除現有的 runner 設定 ./config.cmd remove # 2. 重新設定 ./config.cmd --url https://github.com/{YOUR_USERNAME}/{YOUR_REPO} --token {YOUR_TOKEN} --name "NEW-NAME" --labels new-label-1,new-label-2
  1. 設定多環境範例:
# 正式環境 runner ./config.cmd --name "PROD-IIS-01" --labels prod-iis,windows,vue # 測試環境 runner ./config.cmd --name "TEST-IIS-01" --labels test-iis,windows,vue # 開發環境 runner ./config.cmd --name "DEV-IIS-01" --labels dev-iis,windows,vue

然後在工作流程中可以這樣使用:

jobs: deploy-prod: runs-on: [self-hosted, prod-iis] if: github.ref == 'refs/heads/main' # ... deploy-test: runs-on: [self-hosted, test-iis] if: github.ref == 'refs/heads/develop' # ... deploy-dev: runs-on: [self-hosted, dev-iis] if: github.ref == 'refs/heads/feature/*' # ...

有機會再來試吧