Lawrence Blog

使用 APT 進行安裝 Nginx 更新 Ubuntu 系統的 apt 版本。 sudo apt update 查詢 nginx  官網提供可安裝的版本。 apt-cache madison nginx 安裝指定的版本，系統應該會詢問是否進續安裝，請輸入 y，並按照指示進行後續的動作，預設安裝完畢後，服務應該就已經啟動了。 sudo apt install nginx=1.18.0-6ubuntu14.4 確認 nginx 服務是否有在運行，若看到底下的畫面代表已啟動成功。 systemctl status nginx

當我們建立服務型網站時，通常希望能夠獲得來訪者的相關資訊，一種常見的土炮方法是在網頁上自行開發程式以取得使用者的相關資訊，但我們所能取得的資訊有限，很多數據可能需要後續處理，例如使用者的國家別，甚至可能沒辦法取得，因此分析起來可能相對不夠完整，身為開發者應該都知道不要重複造輪子，而且現有的分析工具眾多，基於站在巨人的肩膀上的原則，當然很自然的選擇 Google 提供的服務。 Google Analytics(GA) 是由 Google 提供的網站流量統計服務，只要在想要監控的網頁加入 GA 提供的一小段 JavaScript 代碼，每當用戶訪問該頁面時，就會將相關資訊如使用者所在國家、進入該頁面的關鍵字等傳送至 GA 伺服器，並整合成易讀的報表供網站擁有者查看。 另外，GA4 還提供了多種預設的分析報表，並且還可以自訂不同的分析維度，下圖展示了登入後可見的其中一個數據畫面，網路上有許多專家分享如何使用 GA4，這裡就不再贅述，建議自行查找相關資料以了解如何使用 GA4。

前言 在 2016 年時，曾經寫過一篇關於 SEO 優化的文章  [SEO優化] Microdata類別(itemtype)實作  ，時隔多年，現在有越來越多的網站都已經改成前後端分離，前端採購 SPA 的框架，筆者自己寫的 寶貝評論+ 也不例外。 什麼是 SPA (Single-Page Application) 單頁式應用程式 ?  維基百科的說明是，它是一種網路應用程式或網站的模型，它透過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。 簡單來說， 當你從伺服器下載網頁到瀏覽器時，一開始該網頁並不包含實際內容，而是在下載完成後，動態抓取並呈現你所看到的內容 。常見的 SPA 前端開發框架包括 Angular、Vue 和 React。

ISO 27001 這一系列的文章，是在記錄被弱點掃描報告列出的問題修正。 受影響的條款 12.5.1 Installation of soft ware on operational systems Content Security Policy (CSP) not implemented Permissions-Policy header not implemented HTTP Strict Transport Security (HSTS) not implemented 檢測網站設定 下圖是尚未改善前，使用 Security Headers 網站 來進行檢測的結果。

ISO 27001 這一系列的文章，是在記錄被弱點掃描報告列出的問題修正。 受影響的條款 IIS 配置設定中包含了一些敏感的訊息，容易引起不必要的的攻擊，建議移除不必要的 Response Header ，範例使用 IIS 10 的版本。 8.2.3 Handling of assets 9.4.1 Information access restriction 12.4.2 Protection of log information 12.4.3 Administrator and operator logs 18.1.3 Protection of records 18.1.4 Privacy and protection of personallyidentifiable information

ISO 27001 這一系列的文章，是在記錄被弱點掃描報告列出的問題修正。 受影響的條款 12.5.1 Installation of soft ware on operational systems。  Cookies with missing, inconsistent or contradictory properties Cookies without HttpOnly flag set Cookies without Secure flag set

ISO 27001 這一系列的文章，是在記錄被弱點掃描報告列出的問題修正。 受影響的條款  12.5.1 Installation of soft ware on operational systems TLS 1.0 enabled TLS 1.1 enabled SSL Sweet32 attack TLS/SSL Weak Cipher Suites TLS/SSL certificate about to expire TLS/SSL (EC)DHE Key Reuse HTTP Strict Transport Security (HSTS) not implemented

前言 Azure DevOps Service 是微軟提供的一個集成式服務，用於規劃、協作、建置和部署軟體，它提供了一整套功能，包括版本控制、工作項追蹤、持續整合(CI)、持續部署(CD)、測試自動化、部署管道等等工具。 但若你要使用 Azure Pipelines 建置程式碼或部署程式，則需要至少一個代理程式，微軟提供的 Azure Agent 提供一個每個月可執行1,800 分鐘數的 CI/CD 免費版本，對於個人開發者來說，基本上已經綽綽有餘了，可以說是很佛心的服務，至少對我這樣的重度使用者來說，這個配額也足夠使用，除非你持續大量提交程式碼，才可能超過這個限制。 由於公司政策的限制，我的公司決定使用地端版的 Azure DevOps Server，但這意味著我需要建立自己的持續整合 (CI) 建置環境，一開始因為是使用微軟的服務，因此很自然的選擇了微軟的作業系統當作 Agent Server。 然而，每次前端環境的建置至少需要 15 分鐘以上，其中大部分時間都花在執行 npm install 上。直到有一天，我讀到保哥分享的文章，發現使用 Ubuntu 的 Agent 環境可以極大地加速建置時間，我花了點時間在雲端環境進行了測試，結果令驚為天人，於是我只好默默的將公司地端的 Agent 也改為 Ubuntu 版本來提高建置效率，這篇文章我要記錄一下設定環境的過程。

本文要記錄如何使用維護計畫精靈來設定備份策略，涵蓋了資料庫備份、Log 備份以及 Log 清除三個重要部分，並以 MSSQL 2019 為例，但請注意，SQL Server Express 版本並不支援此功能，若你使用的是 Express 版本，本篇內容並不適用。 新增維護計畫 首先新增維護計畫(如下圖)，並輸入維護計畫名稱。 設定執行時間 若需要定期執行排程，可點選下圖行事曆的 icon 來設定執行時間。

MSSQL 全文檢索是 SQL Server 的一個功能，相較於傳統的 SQL 查詢，全文檢索更適用於對文本內容進行 關鍵字搜索 和相關性匹配，這邊文章是我要紀錄如何安裝及使用，本文介紹以 MSSQL 2019 為例，在開始前，請先完成 資料庫引擎服務 和 搜尋的全文檢索和語意擷取 的功能。 建立全文檢索目錄 全文檢索目錄是個虛擬物件，它是用來當做全文檢索索引的容器，同時不屬於任何檔案群組，可使用介面或者語法來進行新增。 -- 新增全文檢索共用目錄 CREATE FULLTEXT CATALOG DefaultFullTextDoc WITH ACCENT_SENSITIVITY = ON GO

IIS ARR(Application Request Routing)，是微軟 Internet Information Services(IIS)提供的一個擴充功能，它的主要功能是提供負載平衡和反向代理服務。 何謂負載平衡(Load Balancing)？它是一種分配請求或工作負載到多個伺服器或資源上的技術，通常位於客戶端和伺服器之間，接收來自客戶端的請求，然後根據特定的算法（如輪詢、最小連接數、最少負載等）將這些請求分發到多個伺服器上，這樣可以確保每個伺服器都能夠平均處理請求，從而避免單個伺服器負載過重，提高整個系統的性能和可靠性。 何謂反向代理(Reverse Proxy)？主要的目的是接收來自客戶端的請求，然後將這些請求轉發到內部伺服器或者後端伺服器上，並將伺服器的響應返回給客戶端，這樣客戶端看到的是反向代理伺服器的地址，而不是後端伺服器的地址。這樣可以幫助隱藏內部伺服器的資訊，增加安全性。 常見的類似服務有 Nginx、Traffic，下文為安裝 ARR 服務的相關說明。

單一登入(Single Sign-On，簡稱SSO)是一種身份驗證技術，它允許使用者在訪問多個應用程式或系統時只需通過一次身份驗證就能夠登入，也就是說使用者只需要輸入一次他們的帳號和密碼，就能夠輕鬆地存取各種應用程式，而無需反覆輸入驗證資訊。 本文的目的就是在於記錄如何實現在 .Net Core 站台中，直接驗證使用者當前登入的 Windows 電腦帳號的相關設定及程式碼，相關說明如下

RabbitMQ 是一個開放原始碼的訊息代理服務，它的主要功能是協助不同應用程式之間進行訊息的傳遞與處理，就像是一個郵局一樣，它讓發送者(寄件人)可以把訊息放進佇列(信箱)，然後接收者(收件人)可以從信箱中取出訊息並進行處理。 以下是 RabbitMQ 的一些特點： 訊息佇列 : 讓你可以建立多個佇列(信箱)，讓應用程式之間可以互相傳遞訊息，這些訊息可以是任何形式的資料。 可靠性 : 提供持久性訊息和交易支援，就像是郵局會保存信件一樣，即使在系統出現問題時，訊息也不會遺失，並且確保訊息被成功傳遞。 彈性與擴充性 : 支援多種訊息模式，可以依照需要設計點對點傳遞、廣播（發佈/訂閱）或者工作隊列模式，另外，它也可以在單一伺服器或者建立集群，以提高系統的擴充性和可靠性。 管理與監控 : 提供一個管理介面，讓使用者可以輕鬆地監控各佇列、訊息狀態，並且進行設定管理。 下圖是登入管理介面後的示意圖

Redis（Remote Dictionary Server）是一個開源的記憶體數據庫，它以鍵值對的形式存儲數據(Key/Value)，並且支援各種數據結構，包括字符串、哈希、列表、集合、有序集合等，常被用作快速、高效的快取（Cache）工具，以下是它幾個重要的特性。 快速 : 基於記憶體的數據庫，因此讀寫操作非常快速，特別適合用於需要高性能的應用程式。 多功能 : 支援各種數據結構，也可以支援非結構化的數據，因此滿足不同應用場景的需求。 持久性 : 支持將數據持久化到磁盤，這樣即使發生故障重啟後也不會遺失資料。 分布式 : 提供了集群模式，可以將數據分佈在多台機器上，從而實現更高的性能和可擴展性。 在我的專案中，主要拿來當做 Cache Server，服務本身是沒有提供 GUI 的管理工具，因此你可以透過一些開源的工具來查看服務基本資訊、儲存的數據內容等等，如 Another Redis DesktopManager(下圖)。

因為要開發 facebook oauth 登入，但 facebook 登入目前已經不支援 http 站台的串接，不過有找到更好的方式【 ngrok 外部網路連開發環境神器 】， 本篇文章僅留存紀錄(產生本地端開發用憑證) 。 方法一、直接建立自簽憑證

在之前的幾篇文章中，主要紀錄了與外部 IO 裝置無關的介紹，今天是時候要深入玩玩一些與外部 IO 裝置相關的應用了，你問我什麼是 IO ? IO 就是 Input/Output 的縮寫，也就是跟機器外部交流資訊的東西，就像是跟外界打招呼和傾聽外界的回應一樣。 以下是幾個我將要紀錄的 IO 應用 LED 紅外線控制LED燈 風扇模組 L9110 人體紅外線感應模組 HC-SR501 聲音模組 Keyestudio KS0035 好啦，在開始實際操作之前，得先來個腦補一下 IO 的接角的連接方式，也就是 Microbit 的腳位說明。以下內容是摘錄自【 認識microbit接腳 】和【 Input/Output Pins 】這兩個網站哦，因為我怕我自己會忘記，所以特地記錄下來。

上一篇 文章中介紹了微軟 MakeCode 開發網站的功能介面說明，該網站的操作介面其實還蠻直覺的，相信大家應該不需要這篇文章的介紹，就可以直接用積木堆出屬於自己的程式了，但筆者這裡還是按照操作步驟來記錄一下怎麼用積木來寫程式。 先講一下要設計的功能說明 開機的時候會先顯示一個愛心的圖示。 點選按鈕 A 顯示另外一個圖示。 點選 B 的時候清空畫面。 PS. 本文只是展示程式設計的操作流程，單純的使用模擬器觀看設計結果，因為不牽扯硬體，若是手邊沒有 Micro:bit 但想要體驗也是可以的喔。

看過  上一篇  文章，應該已經知道了什麼是 Micro:bit，接著介紹如何開始寫程式，在以前要控制一塊開發板，首先必須要先寫程式(要先學會程式語言，一般來說是 C / C++ 語言)，然後將寫好的程式燒到控制晶片中，當然 Micro:bit 的流程也不例外，但畢竟是要推廣到中小學生的開發板，因此在開發流程上進行了兩個跟以往很不同的優化。 積木方塊程式設計 Micro:bit 提供了 JavaScript、Python、Block Editor 等幾種編輯方式，若是 主要目的是要訓練孩子的邏輯能力 而不是編碼的能力，可以選擇使用圖形化積木方塊拖拉的方式來引導，此階段可以完全不需要撰寫程式碼。   USB 取代晶片燒錄器 有別於以前的韌體開發，Micro:bit 提供了 USB 的接口，並且支援了 Windows、Mac OS、Chrome OS、Linux 等主流系統。 透過 USB 和電腦連接 ，學生可以輕易地將自己設計好的程式， 更新到晶片 當中，讓教學者和孩子都可以專注於邏輯的訓練，不需要再額外的處理燒錄程式的產生的一堆硬體連接等相關問題，也讓入門的門檻可以大幅地降低(除非連電腦連接 USB 都不會)。

朋友任職的公司先前請我幫忙開發一個小程式，把文字稿轉成 MP3 的小需求，還希望可以選擇講話的聲音和語速，當下的直覺就是使用 Google 提供的 API 應該就可以達到了。 簡單的說明一下  Google Cloud Text To Speech   的 POC 功能說明，這個程式共開發成 Node.js 和 NET Core 兩個版本，在使用前必須先設定一些參數(詳細的說明我有寫在 Github 上的 readme 文件了)，在完成基本設定後，開啟程式會呼叫 Google Cloud Text-to-Speech API，將文字轉換成語音並輸出成 mp3 檔案。 但後來把 POC 的功能提供給他確認後，他的機車老闆說不要這個功能了，哭哭 😈，只好 Open Source 給需要的人了，需要的請至下方連結自取。 NetCore 版本 範例下載 NodeJS 版本 範例下載

故事是這樣開始的，筆者的女兒幼稚園大班(一歲就開始接觸樂高德寶系列)，因為對樂高轉動件有很大的興趣，因此就讓她去上樂高動力系列的課程，但動力系列的馬達需要靠紅外線接收器和遙控器才能控制轉動方向，身為老爸的我就開始研究如何讓動力馬達在 ”不使用樂高本身的紅外線遙控器” 的情況來操作馬達的運作，於是一條 Google 的漫漫長路就此開始。

應用程式執行前讀取 config 檔案內的參數，這是常見的開發方式，但若把參數定義在 TypeScript 檔案內，經過編譯後，所撰寫的類別都會被整併到 main.js 檔案內，所以若需要調整 config 參數，就必須要打開 main.js 然後在凌亂的 JavaScript檔案內找到參數，在修改它，這可能不是你樂見的。 理想的狀態應該是，把參數檔案定義在一個不會被編譯的檔案內，Ex. JSON檔，然後要使用的時候再去讀取它，對吧~ 當然不對，這也是筆者一開始的思維，但當要讀取 .json 檔案的時候，卻發現必須使用 http 、使用 http 、使用 http 來取得參數，若還沒發現事情的嚴重性，筆者大概說明一下，http是一個非同步回傳的類別，所以若要取得參數，就必須要在等待資料回傳後再繼續進行後續的作業，這樣整個應用程式會變得非常的複雜。

儘管 Angular 已經提供了很多功能及特效，但有時候直接套用前端版型的時候，還是不免使用到外部的JavaScript檔案，例如，jQuery 就是非常常見的類別庫。 本篇文章就簡單的介紹一下如何在 Angular 當中使用 jQuery，使用 jQuery 檔案的時機點，我們先大致區分成三大塊。 在index.html檔案當中。 在typescirpt檔案當中。 在其它.html檔案當中。

開發Angular應用程式的時候，有時候會把一些常用 複合式控制元件 打包成一個Component控制項，只要將商業邏輯撰寫在該控制項之後，其它開發人員若需要使用到該功能，就可以直接拿來使用了，例如下圖，是一個動態選擇電子郵件的輸入框，當資料輸入後會去檢查電子郵件的資料，並撈回可用的電子郵件。 在開發表單或者使用ngModel雙向繫結的時候，當部分控制項拉出去變成一個Component的時候，若要取得該控制項的資料，直覺的解決辦法就是使用 @Input() 和 @Output 的方式進行資料的傳遞。 但 Angular 本身就有針對 ngModel 在 Component 的資料繫結提供解決辦法，在Component 端實作 ControlValueAccessor，接下來的就來分享一下該怎麼實作該功能。

Angular 的指令共分三種類型 : 組件(Component) : 也就是模板的指令，這是最常使用到的指令。 結構型指令(Structural directives) : 用來修改視圖的 "結構"，例如添加或移除DOM布局，常用的指令如 NgIf 和 NgFor。 屬性指令(Attribute directives) : 用來改變視圖元件的 "外觀和行為"，例如預設的背景色、滑過改變顏色，常用的指令如 NgStyle。 而 @Directive() 就是 "屬性指令" 的一種，下圖為本文範例的示意圖，先大概說明以下幾個操作情境，底下會有詳細的說明。 設定載入時的預設背景色。 設定滑鼠滑過的背景設，當滑鼠離開後恢復預設背景色。 設定滑鼠點擊的背景設，當Click事件發生時變成指定背景色。

SPA(Single Page Application)的開發方式就是指透過一個 html 檔案來達成整個網站系統的任何操作，從頭到尾都不會離開此頁面，例如 Web Gmail 就是一個典型的 SPA 設計，回過頭來看一下 Angular 的基礎示範教學中也是使用 SPA 的方式，並透過屬性的判斷來決定使否載入某個 Template。 小型應用程式只有少數幾個頁面，使用此方式到還好，但假想一下有一個中大型應用程式有數十甚至數百個頁面需要切換，如果再像小型應用程式一樣透過屬性判斷的方式，後續整個程式碼可能會出現難以維護的情況，因此這種時候就需要運用 Angular 所提供的路由機制來處理此類的問題了。 什麼是路由? 簡單來說就是 Angular 會根據瀏覽器中的 URL，自動對應到要載入的視圖，這跟其它開發語言的路由，如 ASP.NET MVC 的概念是差不多的，差別在 Angular 透過路由機制來完成單一個網頁檔案切換視圖(SPA)的效果。 Angular 路由器是一個可選擇的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)，本文將說明如何建立 Angular 路由設定。