小菜一碟

環境： asp.net core MVC 搭配 sql server 2014 使用 entity framework core code first 下  add-migration 指令時，發現奇怪的訊息       The foreign key property 'Article.ArticleTypeId1' was created in shadow state because a conflicting property with the simple name 'ArticleTypeId' exists in the entity type, but is either not mapped, is already used for another relationship, or is incompatible with the associated primary key type. See https://aka.ms/efcore-relationships for information on mapping relationships in EF Core.  先來看模型，有兩個 Article.cs 與 ArticleType.cs 文章是 Article.cs  Article.cs 裡面有一個 ArticleTypeId 欄位用來記錄文章的分類 另外也宣告一個 ArticleType 的導覽屬性 文章分類是 ArticleType.cs  產生的 Migration 內容 ArticleType 在 Article.cs 裡面是導覽屬性，加了就會跑出  ArticleTypeId1 覺得超級奇怪 若沒宣告 ArticleType  屬性是不會出錯的 看了很久才發現... ArticleType.cs 的 Id 屬性的型別打錯了 應該要打 int 我打成 string  XDDDDD 浪費了一個下午

在使用 VS 的過程中，常常會使用到上方工具列裡面的選項 有些選項藏在好此層的選項之中，使用起來十分不便 除了透過快捷鍵來使用之外，其實也可以將這些選項加入到工具列的第一層選項上 以格式化文件(也就是自動排版)來說，有兩種操作方式 點擊工具列 > 進階 > 格式化文件 使用快捷鍵 Ctrl + E, D 其中工具列的方式，需要點擊三次滑鼠左鍵才能使用自動排版的功能，真的是蠻累人的 在這邊分享一個好用的小技巧 其實可以將「格式化文件」的選項新增到工具列的第一層 這樣要使用時，只要到工具列點一下滑鼠左鍵即可 設定方式如下： 在上「工具列空白處」按滑鼠右鍵，選擇「自訂」選項 切換到「命令」頁籤，選擇「工具列」，並選取「文字編輯器」，在按「加入命令」按鈕 因「自動排版」是在工具列中的編輯分類，所以先點選「編輯」分類 然後在左區使用滾輪地方找到該選項，也就是「文件格式」， 「命令」名稱是根據第一個字的筆劃去做排序 這邊找自己要的命令需要花一點時間，因為還蠻多的~ 但設定完成之後，就一勞永逸，不需要重新設定 找到想新增的命令之後，點擊並按下「確定」按鈕 這邊可能會發現這裡的文字跟工具列的文字不太一樣 有一個小技巧就是可以觀察該項目前的圖示，確定是否有一樣 檢查畫面是否出現「文件格式」的選項，並按下「關閉」 查看工具列，就會看到本來在第三層的選項，已經備新增到第一層了 以後要使用就直接點選即可，真的是非常方便 另外補充一個常用的功能選項 有時候透過範本新增的程式碼，常常會有一些沒有用到的 using 畫面會以淺灰色的方式呈現 在自己的開發團隊中，是強制要把這些沒用到的 using 移除並將有使用到的 using 進行排序 但真的蠻容易忘記的，每次被提醒都很不好意思 因為這個選項要按滑鼠右鍵才看得到「移除與排序 Using」，或是要使用快捷鍵 Ctrl + R, Ctrl + G 如果不喜歡使用快捷鍵，或是不想按太多次滑鼠 那麼也是一樣可以將移除與排序的功能選項加到工具列第一層試試看~

在 Startup.cs 的 ConfigureServices 方法中設定資料庫為 SQL Server  並從組態檔中讀取連接字串 需要使用下列程式碼 services.AddDbContext<Repository>(options =>      options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); 但畫面上的 UseSqlServer 卻是紅色的 顯示以下的錯誤訊息： 'DbContextOptionsBuilder' 未包含 'UseSqlServer' 的定義，也找不到可接受類型 'DbContextOptionsBuilder' 第一個引數的可存取擴充方法 'UseSqlServer' (是否遺漏 using 指示詞或組件參考?) 解決方法： 安裝 Microsoft.EntityFrameworkCore.SqlServer 點選相依性 > 套件 > 管理 NuGet 套件 輸入關鍵字搜尋，選點 Microsoft.EntityFrameworkCore.SqlServer 後按安裝 接受授權，按我接受 程式碼即可正常編譯

使用 Code First 的方式建立模型之後 需要使用Add-Migration 指令來新增移 不過在套件管理器主控台執行指令時 卻跑出以下錯誤：   add-migration : 無法辨識 'add-migration' 詞彙是否為 Cmdlet、函數、指令檔或可執行程式的名稱。請檢查名稱拼字是否正確，如果包含路徑的話，請確認路徑是否正確，然後再試一次。 位於 線路:1 字元:1 + add-migration init + ~~~~~~~~~~~~~     + CategoryInfo          : ObjectNotFound: (add-migration:String) [], CommandNotFoundException     + FullyQualifiedErrorId : CommandNotFoundException 解決方式： 安裝 Microsoft.EntityFrameworkCore.Tools 點選相依性 > 套件 > 管理 NuGet 套件 輸入關鍵字搜尋，選點 Microsoft.EntityFrameworkCore.Tools 後按安裝 執行 Add-Migration 指令，畫面顯示成功的訊息

參考這篇文章 :  https://www.codementor.io/@noorsaifi/how-to-deploy-angular-asp-net-core-webapi-to-iis-on-shared-hosting-1dytrihj56 做一些微調，以下就紀錄我自己的步驟 先說明一下開發情境 前端是使用 Angular 13 開發，獨立的專案 後端 API 是使用 .NET Core 3.1 ，獨立的專案 所以我有兩個專案 我想讓前端與後端網址是 同源的，後端就沒有設定 CORS 另外因為有使用  xsrf-token，若前後端為 非同源 Angular 就不會把  xsrf-token 傳到後端 API 雖然網路上有一些設定方式， 但總覺得怪怪的 如果有知道非同源怎麼設定的話，歡迎留言分享給我哦 那麼就開始進入正題吧 設定 Angualr  設定後端 API 路徑 開啟 src\environments\environment.prod.ts 檔案 export const environment = {   production: true,   apiUrl: '/api' }; 新增IIS站台 開啟 IIS ，在站台按右鍵，點新增網站 設定站台名稱、專案的資料夾，與所要使用的 port 號 到應用程式集區修改 .NET CLR 版本，選擇沒有受控碼 編譯 Angualr 專案 執行指令 ng build --configuration production  執行完成到專案目錄下的 dist 查看，並將檔案複製貼到 IIS 站台的根目錄資料夾下 詳細的步驟可參考此篇文章 https://greens2314.blogspot.com/2022/04/iis-angular-13.html 部屬 Angualr 專案 新增 web.config 檔 web.config 檔案內容跟官方建議的一樣 https://angular.tw/guide/deployment 但因為要跟 .NET Core API 共用一個站台 所以需要增加此行設定  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /&g

因想防止 xsrf 攻擊 所以使用了 Microsoft.AspNetCore.Antiforgery 來產 token 在本機都正常執行 但發佈到 IIS 後，卻發現無法正常存取 API 查看事件檢視器看到以下錯誤： Category: Microsoft.AspNetCore.Antiforgery.DefaultAntiforgery EventId: 7 RequestId: 800000f2-0001-f900-b63f-84710c7967bb RequestPath: /api/security/xsrf-token SpanId: |f710ac30-480cf8c450886f7b. TraceId: f710ac30-480cf8c450886f7b ParentId: ActionId: 8ba194b3-e8d8-40a7-a818-faee4e5bb185 ActionName: Controllers.SecurityController.GetXsrfToken An exception was thrown while deserializing the token. Exception: Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The antiforgery token could not be decrypted.  ---> System.Security.Cryptography.CryptographicException: The key {a49f3135-4726-40b4-bab4-63ae47e90b4a} was not found in the key ring.    at Microsoft.AspNetCore.DataProtection.KeyManagement.KeyRingBasedDataProtector.UnprotectCore(Byte[] protectedData, Boolean allowOperationsOnRevokedKeys, UnprotectStatus& status)    at Microsoft.AspNetCore.DataProtection.Key

OS：windows server 209 下載 nginx https://nginx.org/en/download.html 官方的安裝說明可參考： https://nginx.org/en/docs/windows.html 安裝 nginx 將檔案解壓縮至 C 槽底下即可 執行 nginx 開啟命令提示字元，到 nginx 的目錄下執行  start nginx  指令 確認 nginx 是否有執行，瀏覽 http://127.0.0.1，會看到 nginx 的歡迎畫面 若沒有看到上面的畫面，請執行   nginx.exe  出現錯誤訊息： nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions) 80 port 被占用， 下載  https://docs.microsoft.com/en-us/sysinternals/downloads/tcpview 解壓縮後，開啟 tcpview， 查看是被誰占用 像我查到的是被 System 占用，所以無法直接按右鍵結束 需執行 NET stop HTTP 指令 執行  start nginx 指令，即可正常執行 記得再把執行  NET start HTTP  不然會影響 Visual Studio 使用 Web Deploy \ 因為我是使用 nginx 幫我將網站導到 IIS 網站 要將 IIS 與網站重新啟動 修改 nginx 設定 開啟 nginx.conf 檔案 設定 domain 與 port 號重新導向哪裡， location 可設定細部的 url 路徑 server {      listen 80;      server_name 127.0.0.1;      location /api/ {           proxy_pass http://127.0.0.1:57984/api/;      }      location / {           proxy_pass http://127.0.0.1:8089;   

安裝 node.js https://nodejs.org ，下載 16.14.2 版 執行 node-v16.14.2-x64.msi，一直按下一步 中間步驟略，最終會顯示完成 開啟令命提示字元，執行 node -v，即可查看版本 安裝 IIS Rewrite 2.0  開啟網站，點右邊的從組件庫安裝應用程式 在右上角的搜尋框，輸入 URL 進行搜尋 找到 URL Rewrite 2.0 後，按下新增，在按安裝 按我接受 等待安裝 安裝完成 檢視網站內的應用程式，會看到 URL Rewrite 如果沒看到可以將 IIS 整個關閉再重新打開 開啟 angular 專案 執行 ng build 指令 將 dist 資料夾內的資料複製到 IIS 網站的目錄下 在網站目錄下新增 web.config 可參考  https://angular.tw/guide/deployment <?xml version="1.0" encoding="UTF-8"?> <configuration>  <system.webServer>   <rewrite>     <rules>       <rule name="Angular Routes" stopProcessing="true">         <match url=".*" />         <conditions logicalGrouping="MatchAll">           <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />         </conditions>