怕 Bug 的我，把他寫下來就對了
0%

發表於 分類於
文章字數： 2.2k 所需閱讀時間 ≈ 2 分鐘

一般來說在使用 Angular 或其它前端框架，設定檔(Config)在建置完成時就已經決定好了相關的內容
如下圖，會有所謂的dev、stage、production各自對應的設定檔
ng-build-environment

但如果在某些情境下需要去動態修改設定檔的值 e.g. 呼叫的 API Endpoint 需要在不同的客戶端調整為不同的 Url

這時候如果在建置才決定客戶端的 Url 有可能就不是那麼方便了。

而 Runtime Config 效果，說穿就是透過呼叫一個固定的 API 來取得對應的參數檔(原本是利用 config.json 做為我們的參數來源)

但為了要有這樣的效果去額外多建立一個 API 看起來就很冗餘，所幸 Azure 有推出一種 Static Web Apps 除了讓你能很輕

鬆的佈署前端應用程式，還可以在你的前端應用裡面包進 API 函數，進而直接讓我們透過 Config API 讀取設定達到

Runtime Config 的效果

StaticWebApp
Static Web App架構圖

以下就一步一步教各位如何做到 Runtime Config

  1. 首先我們要安裝一下 VSCode Azure Functions Extension
    instalExtension

  2. 在 angular 專案這裡我們需要額外新增 Static Web App 專用的 API 內容
    CreateStaticAppFunction
    因為預設的 bindings 設定已經有 HTTP GET 並且為匿名存取，所以我們這裡就不用調整 function.json
    再來很簡單只需要在 index.js 內容調整為以下範例即可 (如果想要過濾掉特定名稱的參數可以再自行決定，這裡是簡單示範)

    1
    2
    3
    4
    module.exports = async function (context, req) {
      context.res.json(process.env);
    };

  3. 接下來我們需要加入 AzureFunction 執行時需要的 host.json 並去調整 angular.json 在建置時將相關的檔案複製到 dist 底下

host.json 只要簡單的放在根目錄底下即可
config of azure function host

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "version": "2.0",
  "logging": {
    "applicationInsights": {
      "samplingSettings": {
        "isEnabled": true,
        "excludedTypes": "Request"
      }
    }
  },
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[3.*, 4.0.0)"
  }
}

在 angular.json 檔案中找到 assets 設定區段，用 glob 設定將我們剛剛建立的 Azure Fucntion API 目錄及 host.json 複製到 dist 輸出 (這裡的 web.config 是因應 angular 執行時做的設定，就不再多述) ，要注意底下的目錄名稱要自行換成你的名稱
Angular.json

1
2
3
4
5
6
7
8
9
10
{
                "glob": "host.json",
                "input": "",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "functionApi/",
                "output": "/functionApi"
              }

  1. 最後只要找到已經建立好的 Azure Web Static App Deploy Key
    StaticAppDeployKey
    然後輸入以下指令

    1
    swa deploy ./dist/match-mix-bo --api-location ./dist/match-mix-bo --deployment-token $Token --env production

    第一個是前端 build 出來的目錄 第二個則是是要佈署 API 也要指定好 API 相關資訊所在的目錄(因為我們已經在 angular.json 設定好都複制到建置完的目錄) 最後的 –env 則是指定佈署到 production 環境 (如果沒有 –env 的話會佈署到 preview 環境)

  2. 這樣就能輕鬆的透過在這裡設定好參數值，我們的 angular 應用就會自動取得相關的參數了
    AppSetting

最後如果你的應用在開發階段想採用讀取 config.json 但上線後改由 API 取得參數內容。可以參考以下我的做法
概念很簡單先直接透過 HTTP GET 去呼叫 API 嘗試取得參數，如果取得失敗就改呼叫 config.json 取得參數
tips_getconfig

以上就是關於 Angular Runtime Config 的介紹，謝謝大家

Reference

Angular-Build

Static-Web-App-Overview

Static-Web-App-Api

swa-cli

如何使用 Azure Static Web Apps CLI 手動部署靜態網站應用程式

發表於 分類於
文章字數： 641 所需閱讀時間 ≈ 1 分鐘

今天來分享一個實際利用 C# 的 moq 套件。將要測試的目標方法做 stub ，再來驗證我們實際執行的方法是否正確
首先我們先看一下原本的方法邏輯，最後會提為什麼我們會需要做 stub
我們目標很簡單，希望能找出資料庫中某一張資料表 N 天之前的流水號
所以這裡只要流水號不是 0 就代表有成功找到了
TestFunctionExample

接下來看一下我們原本的搜尋方式，可以看到是直接寫 T-SQL 語法抓出相關的資料並在資料庫裡進行搜尋
(這裡因為不需要太過精準所以只要差距在10天內就當做有找到了)
SearchCode

再來就是進行整合測試。如果有使用 Azure Database 經驗的人會知道。如果資料庫的等級不是很高
在持續執行這種語法時會導致 DTU 增高或是處理速度很慢的情況
WorseCase

所以為了讓我們能夠更單純一點去測試「 N 天之前的流水號」這件事情，我們就需要針對其它操作到資料庫的方法來做所謂的 stub
也就是下圖中的紅框處，包含取得一開始的資料初始值與後續在資料表中進行查找的動作

NeedChangeOfCode

因為使用 moq 的關係，我這裡就先將紅框處抽出為 protect 方法並加上 virtual 供後續我們能做 stub

修改完如下圖
ChangeResult

再來就是回到我們的測試案例中，將原本直接呼叫流程調整為，先建立好 stub 後再進行呼叫

完成結果如下圖
MockResult

我們將原本初始化的函數以及在資料庫中搜尋的語法，調整為透過 List MockSearchData 做搜尋

這樣做的好處除了我們可以自行決定要測試的資料筆數與日期區間。相較原本採用整合測試直接在資料庫中進行處理，在這裡利用 moq 進行改寫會顯得更有效率。

如果有問題都歡迎留言進行討論，謝謝大家

發表於 更新於 分類於
文章字數： 373 所需閱讀時間 ≈ 1 分鐘

今天來分享一個安全設定 Web App 防火牆的小技巧，在線上已經運行的環境如果你任意加入了新的 IP 規則
這時候 Web App 會自動先設定 Deny All 再將你的 IP 規則加入，如下圖(這裡我設定 Allow )
BeforeSetting
AfterSetting

如果你是這種設定方式，會導致在你設定完所有 IP 規則之前，Web App 是不完全可用的狀態
會出現以下畫面
Forbidden

為了避免這個情況，其實有一個更安全的做法，就是先加入一個 Allow All 的 IP 規則
再依序將你要的 IP 規則設定上去，最後再將 Allow All 這個規則移除掉
如下圖 我先設定好 Allow All IPv4 CIDR 標記法是 0.0.0.0/0
AllowAll

可以看到沒有出現 Forbidden 的畫面
Ok

這時再將你想要加入的規則一一加入即可，記得最後要把 Allow All 移除掉，否則前面設定的規則就沒有用處了

Reference

app-service-ip-restrictions

發表於 分類於
文章字數： 871 所需閱讀時間 ≈ 1 分鐘

雖然網路上很多教學，不過這裡簡單記錄一下我設定的過程

Github Page 支援二種域名做綁定 Subdomain、Apex domain

第一種其實就是 xxx.yourdomain.com 這種常見的類型

另一種其實就是所謂的 A Record 設定 (將你的域名綁定到特定IP上)

也就是 yourdomain.com 會設定一組或多組 IP

我這裡就直接使用 A Record 設定，在 Github 官方的文件中有列出所有需要綁定到的 IP

以下這四組 IP 就是需要設定的

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

下圖為我在 Godaddy DNS 管理設定的畫面
dns-a-record

設定好之後照官方的建議，會需要做一下 Domain Verify (這個動作是避免其它人將這個域名綁定到他自已的 Github 上)

首先到 Github 右上的功能選單點選 Settings
user-setting
接下來在左側找到 Pages (因為我們這裡要設定的是我們的GithubPage)
user-page
再來點擊右上的 Add a domain 按鈕，並輸入你接下來想綁定的域名
clic-add-domiain

再來照他上面的說明把這個驗證用的資訊到你的 DNS 上做 TXT Record 設定
add-txt-record
如果驗證成功就會顯示一個綠色 Verified 字樣
verifyed

再來回到你的 xxx.github.io Repository 底下
我們要透過 Setting -> Pages 來做域名的綁定
page-setting-domain

這裡就簡單多了，拉到最下方的 Custom domain 區塊
將你要綁定的域名打上去後按 Save (這裡需要看你域名設定完 A Record 需要多久的時間更新，每個域名商需要的時間不一樣)
再來就可以看他 DNS 的記錄是否綁定成功，最後別忘了勾選底下的 Enforce HTTPS 這裡 Github 會自動幫你的域名申請好 HTTPS 憑證並設定上去，是不是很方便呢?
set-my-domain

以上就是這次域名綁定的教學，謝謝大家

Reference

managing-a-custom-domain-for-your-github-pages-site

verifying-your-custom-domain-for-github-pages