The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何透過 CI 自動將靜態網頁發佈到免費的 Cloudflare Pages 服務

我這幾天花了點時間發佈 dev.angular.tw 新版 Angular 正體中文官網,大幅改善了原本的翻譯品質,而且新版網站非常美觀,甚至可以透過 StackBlitz 獨家的 WebContainers 技術,線上編輯 Angular 的範例程式碼,並且即時預覽結果。重點是,我這次將網站部署到 Cloudflare Pages 靜態網頁部署服務,這個服務不僅免費,還能提供全球 CDN 加速,讓網站的載入速度更快。這篇文章我打算用最短的篇幅,記錄一下整個網站發佈的過程。

... 繼續閱讀 ...

如何在 Docker 執行 Playwright 自動化測試腳本

上周微軟的 Playwright 團隊推出了 v1.48 版本,我的 實戰 E2E 測試:使用 Playwright 測試框架 課程有位學員在我們的 Discord 課程專屬頻道中反應,說他沒辦法成功執行 Playwright 腳本,請我幫忙看看。因為要執行學員的程式,而我通常不喜歡在本機執行程式 (安全考量),所以我就藉此玩了一下 Playwright 新版的 Docker 容器,順手寫了份筆記給大家參考。

... 繼續閱讀 ...

如何透過 LINQPad 撰寫自動化作業並搭配 CI 自動執行

我現在大多數自動化的小工具都是使用 LINQPad 來撰寫,執行速度快且管理方便,但是在 CI/CD 環境中,LINQPad 並不是一個常見的工具,還好 LINQPad 有提供 LPRun 工具,可以直接把現成的 *.linq 檔案直接拿來當成腳本執行,因此拿來 CI 的環境用是非常方便的,完全可以當作 C# 腳本來使用。這篇文章我就來介紹一下 LPRun 使用的方式。

... 繼續閱讀 ...

如何正確設定 Azure Artifacts 的 npm 套件來源 (Feeds)

如果你在 Azure Artifacts 建立一個 npm Registry 讓前端團隊存取私有的 npm 套件,最先需要克服的問題就是要如何通過身分認證,但這部分的設定在 Windows 與在 Linux/macOS 設定步驟是不一樣的,這篇文章將說明如何正確的在 Windows 與 Linux/macOS 進行設定。

... 繼續閱讀 ...

快速上手 GitLab EE on Docker 安裝:以 Ubuntu 22.04 LTS 為例

今天我體驗了 GitLab EE on Docker 的安裝程序,我覺得文件寫的相當不錯,安裝的過程也頗為順利,只是在 Ubuntu 22.04 LTS 還是踩到了一些地雷,有些注意事項在官方文件上並沒有詳細提及,這篇文章我就帶大家來體驗一下完整的安裝設定流程。

... 繼續閱讀 ...

前後端專案在設定 CI 時應注意版本相依問題

昨天有個五年前的專案,由於正式環境出了一點狀況想要重新部署,但卻發現 CI 已經無法正常執行,不是版本不對就是套件異常,弄了好幾個小時才搞定。這篇文章我想分享一下這次處理的經驗與心得分享。

... 繼續閱讀 ...

快速上手 GitLab 安裝與首次使用設定:以 Ubuntu 22.04 LTS 為例

今天我嘗試把 GitLab 安裝到我的 Ubuntu 22.04 LTS 作業系統中,過程頗為順利,安裝體驗還不錯,我也特別記錄下完整的安裝設定過程,並透過這篇文章分享。

... 繼續閱讀 ...

如何讓 Node.js 應用程式在 GitHub Action 大幅提昇 CI/CD 執行效率

我手邊有個 Next.js 的應用程式,在設定 GitHub Action 的 CI/CD 自動部署到 Azure Web App 的過程,在 CI 的 actions/upload-artifact@v2 這個步驟花費了超級大量的時間上傳 node_modules 資料夾中的檔案,實在是太沒效率了。因此我改在上傳前壓縮整個目錄,結果整體 CI/CD 的時間直接從 26m 34s 降到 8m 58s 之多,部署效率大幅提升。今天這篇文章我就來說說我的寫法。

... 繼續閱讀 ...

PowerShell 的 Get-ChildItem 需注意 -Include, -Path 與 Reparse Points 地雷

我一直覺得 Windows PowerShell 是一個讓人又愛又恨的命令列執行環境,其強型別的優點確實是好的讓人無法拒絕,但其執行環境的複雜度、版本相容性與各種 Cmdlet 的奇葩設計,每次遇到也都是讓人心幹神疑心曠神怡,不免嘖嘖稱奇。今天我就來分享一個昨天寫文章時遇到的神奇狀況,也就是我們常用的 Get-ChildItem cmdlet 需注意 -Path-Include-Recurse 的各種用法組合,以及一個 Reparse Points 的問題。

... 繼續閱讀 ...