PM2 watch 造成的無限迴圈

pm2 的 watch 是用於監聽檔案變動,自動重啟服務的一個功能。我們可以透過在 pm2.config.js 檔案中設定 watch: true 來開啟此功能。這樣一旦進了新 code 就會自動重啟,不用手動 pm2 restart {id} 非常方便。

但也就是因為這麼方便,所以常常會忘了他的存在。

前陣子做了一個透過排程,自動到某處去下載json檔案回來存放,再提供一隻API來吐出篩選過的資料的小工具。在開發環境完成後,一樣就很順手的在正式環境用PM2跑起來。

閱讀全文 PM2 watch 造成的無限迴圈

在dockerfiles中使用aws ecr image

這篇文章主要是筆記如何在本機使用AWS ECR上已存在的image,以及所需要的驗證方式。

首先到AWS ECR選擇你的repo,進入映像列表後選擇一個映像,在內頁複製他的URI,像是:735675645655.dkr.ecr.ap-northeast-1.amazonaws.com/my_project:23f4b2a。打開你的Dockerfile,將FROM後面的映像名稱改成這個URI

閱讀全文 在dockerfiles中使用aws ecr image

自行修正Site Kit AdSense錯誤

我部落格的網址是用子網域,先前裝Site Kit的時候,已經驗證過AdSense。但最近不知道何時開始,卻出現以下的畫面,告訴你要完成設定。但不管怎麼點,卻都會顯示錯誤。

以下是出現錯誤的流程

下圖是點選Site Kit > Setting之後出現的畫面。在已連接的服務中,AdSense的區塊右邊顯示了一顆要你完成設定的按鈕 “Complete setup for AdSense”。

閱讀全文 自行修正Site Kit AdSense錯誤

瀏覽器bfcache

bfcache是“back/foward cache”的縮寫。當頁面「符合某些條件」的時候,當使用者按了瀏覽器的上下頁,瀏覽器可以快速回復剛剛瀏覽的頁面。且因為bfcache做cache的方式是對整個頁面做快照(包含了Javascript Heap(用來儲存變數、函式的地方)),因此會包含剛剛所做的改變,例如變更過的DOM內容、Javascript的執行結果等等。同時,因為不需要再次載入資源,所以速度超快。

因為Javascript也被緩存的關係,假設我們是用vue.js開發前端頁面,當離開頁面後再返回時,就勢必不會重新觸發fetch, data, asyncData, mounted, created…等等的Methods與Lifecycle Hooks。

閱讀全文 瀏覽器bfcache

用瀏覽器console批次移除Jenkins建置紀錄

某天公司Jenkins的容量爆了,而那天有權限進那台機器的同事剛好請假。唯一能做的只能從前端一筆一筆刪掉。但這樣刪,不知道要刪到民國幾年。於是看看他刪除是怎麼打的,然後用一個回圈批次把一個branch中的所有舊建置都刪掉。

沒權限進主機以外,懶得進主機,也可以用這個方式來刪除。原始碼如下:

閱讀全文 用瀏覽器console批次移除Jenkins建置紀錄

Line Bot 串接 OpenAI API

最近很紅的ChatGPT,如果也能在Line上面使用的話,是不是感覺更方便呢?我們就來串接ChatGPT的開發公司OpenAI提供的API到Line Bot上吧!

這個範例會用Express起一個web server,建立一個method POST且path為/webhook的route作為line的webhook,用來接收line傳來的events

首先你需要先到 Line developers console 點選「Create a new channel」建立一個新的Channel,類型選擇「Messaging API」。填寫完成送出後進入Channel設定頁,複製最下方的「Channel secret」。回到上方選擇「Messaging API」頁籤,複製最下方的「Channel access token」。

用NPM安裝 openai, @line/bot-sdk, express,並在檔案中 require

閱讀全文 Line Bot 串接 OpenAI API

Ubuntu ssh 安全性設定

起一台新的機器後,為了確保機器基本上有一定的安全性,我們可以在ssh登入這個環節加入一些門檻,增加登入的難度。

預計要做的設定有:更改ssh port號 -> 更改登入帳號 -> 關閉root登入 -> 關閉密碼登入

更改ssh port號

就像改門牌地址一樣,當對方不知道門牌地址時,就要一個一個門鈴去按按看,才知道要找的人住在哪間。當不知到ssh port號,要暴力登入時,就必須要一個一個port去試。

閱讀全文 Ubuntu ssh 安全性設定

跨網域請求時什麼情況下會發送preflight request

當我們跨網域呼叫API時,瀏覽器會自動先發送一個method是OPTIONS的Preflight request,向後端確認是否允許跨網域請求,若可以才會繼續原本請求的request。但有時候明明就是跨網域請求,卻沒發送OPTIONS,到底為什麼呢?

問題就在於我們的請求必須是「非簡單請求」,才會讓瀏覽器發送 Preflight Request。那什麼是「非簡單請求」呢?定義為「只要滿足下列任一條件」就是「非簡單請求」:

閱讀全文 跨網域請求時什麼情況下會發送preflight request

SCSS calc variable error

今天遇到了一個詭異的問題。想用css variable來計算transform-origin的z軸,因此在scss中輸入:

transform-origin: 50% 50% calc(var(--board-width * -0.5));

當在dev模式中,一切沒問題,但production build時,就會噴Syntax Error。但更奇怪的是,其他地方一樣也有用到 calc(var()) 這樣的寫法,卻沒有錯。應該是dart-sass (v1.52.2)的bug吧。

最後把 calc(var(–board-width * -0.5)); 在包成一個variable,竟然就可以了。

--depth: calc(var(--board-width * -0.5));
transform-origin: 50% 50% var(--depth);

CURL筆記

加上Header

當我們在使用API時,應該都會需要我們透過header傳送token,或是指定所需要的格式(例如:json, xml),亦或是所需要的語系⋯⋯等等。我們可以透過 -H “Key: Value” 這樣的指令格式來輸入想要的Header。

curl -H "Authorization: Bearer mytoken...." -X GET https://xxx.xxx.xxx

加上多個Header

要加入多筆Header時也很簡單,只要再加一個 -H {header內容} 即可:

curl -H "Authorization: Bearer mytoken...." -H "Content-Type: application/json" -X GET https://xxx.xxx.xxx
閱讀全文 CURL筆記

跟硬碟使用量以及記憶體使用狀態有關的linux command line指令

前陣子因為用了六年多的DigitalOcean主機顯示硬碟容量不足,因此開始清理裡面的垃圾。清理完畢後發現MySql竟然記憶體飆高到40%,重啟服務、更新版本能試的方法試過一輪還是一樣。最後才發現原來自己誤刪了swap(類似Window的虛擬記憶體)。以下是當時在檢查問題點時常用到的command,我把他整理起來,免得之後要用又忘掉。注意:有些在mac上可用,有些不行。且有些雖然可用,但options可能會有點出入。

閱讀全文 跟硬碟使用量以及記憶體使用狀態有關的linux command line指令

JS浮點運算問題

Javascript在小數點的運算上,常常會出現無限小數的情況,這是因為Javascript依照IEEE754浮點數運算標準,因此在做運算時,會先把十進制轉成二進制,然而小數點在轉換到二進制時,會出現無限小數,例如:

// 將十進制的 0.1 轉為二進制
Number(0.1).toString(2) // '0.0001100110011001100110011001100110011001100110011001101'

因此在做 0.1 + 0.2 這樣的運算時,才會產生 0.30000000000000004 這樣的結果。遇到這個情況時,我們可以用 toFixed() 來解決。 number.toFixed(n) 會回傳一個 n 位內小數點的「五捨六入」的「字串」,n可為0-20,預設值為0,例如:

0.12366.toFixed(4) // '0.1237'
(0.1 + 0.3).toFixed(4) // '0.4000'

然後,因為輸出的是字串,我們可以再以 parseFloat() 轉回數字。例如:

parseFloat(0.12366.toFixed(4)) // 0.1237
parseFloat((0.1 + 0.3).toFixed(4)) // 0.4

用蘋果捷徑更新貓咪體重到Google試算表

以往在記錄家裡的貓咪體重時,都是打開Google試算表,切換到要記錄的貓咪的工作表,然後拉到整張表的最下面輸入當天日期跟體重。雖然步驟有點多,但因為不是經常性的在記錄,感覺上也沒那麼麻煩。不過自從家裡有腎貓,需要每天監控體重時,這個操作步驟實在有點繁雜。

今天要介紹一個我已經使用很久的方法——用蘋果的捷徑功能,搭配Google文件的Apps Script來記錄到Google試算表。

優點

好處是「不需安裝任何APP、完全免費、不怕個資外流」且蘋果捷徑在iPhone或MacOS上都可以執行,也很方便共享,不論手邊的裝置是什麼,都可以立刻執行。

Google文件的Apps Script就像是每一份Google文件的API。你可以自行編寫API的內容,就像寫JavaScript一樣,讓此API能根據你的程式碼來工作。

開工拉

首先先開一個新的Google試算表,因為我們要做的是可以支援多貓家庭的情況,所以我們先建立好每一隻貓名字的工作表

點選Menu上的擴充功能,選取Apps Script

閱讀全文 用蘋果捷徑更新貓咪體重到Google試算表

datetime-local Input 秒數問題

當使用datetime-local的input時,直接帶入「包含秒數」的value,例如:2022-12-23 11:49:22,表單可以送出,且資料包含秒數。但當value是透過JavaScript帶入,送出時就會發現表單顯示「請輸入有效值」的錯誤提示:

左側為html直接帶入value,右側為JavaScript帶入value

Chrome與Firefox皆為如此,在Safari中連左側透過html帶入value的也會出現提示。

到底為什麼沒辦法輸入秒呢?查了一下才知道原來是跟控制增減值的step參數有關。datetime-local的step最小單位是秒,而預設值是60,也就是預設會以一分鐘作為最小可調整的時間的意思。

因此,要解決這個問題,我們只要新增step參數,並設為1就可以囉!

<input type="datetime-local" step="1">