Visual Studio 2022 安裝與設定 Xamarin.Forms 與 Prism 開發環境教學 (2022年5月)

安裝與設定 Xamarin.Forms 與 Prism 開發環境教學 (2022年5月)

這篇文章將會在 Windows 11 作業系統底下來進行操作，當然，也可以將 Visual Studio 2022 到 Windows 10 作業系統下。

這裡將會說明如何安裝 Visual Studio 2022 開發工具，並且可以進行 Xamarin.Forms 的專案開發與安裝 Prism Template Pack 這個擴充功能的作法。

安裝 Hyper-V 管理員

為了要能夠在本機電腦上跑 Android 模擬器，因此，建議需要安裝 Hyper-V 管理員工具，底下將會說明如何安裝這個工具。

在 Windows 11 工具列上，點選 [開始] 圖示

請在最上方的文字輸入盒內，輸入 [控制台]

點選 [控制台] 圖示，啟動這個應用程式

找到綠色文字的 [程式集] 並點選這個文字

看到 [程式集] 視窗內容後

找到並且點選 [開啟或關閉 Windows 功能] 文字

現在將會顯示出 [Windows 功能] 對話窗

在此對話窗內，找到 Hyper-V 節點

勾選該節點內的所有子節點

接著找到並且勾選這個 [Windows Hypervisor 平台] 節點

最後，點選右下方的 [確定] 按鈕，開始進行安裝這兩個功能

一旦安裝完成之後，請在 [Windows 功能] 對話窗的右下方

找到並且點選 [立即重新啟動] 這個按鈕

下載 Visual Studio 2022

更多關於 Visual Studio 2022 的資訊，可以參考 https://docs.microsoft.com/zh-tw/visualstudio/productinfo/vs-roadmap 這個連結內容。

當電腦重新啟動完成之後，就要開始安裝 Visual Studio 2022 了

首先，請使用瀏覽器打開這個網址 認識 Visual Studio 系列 ，找到如下圖的 [認識 Visual Studio 系列] 文字，在其文字下方的最左方將會看到 [Visual Studio] 工具圖示，請點選 [下載 Visual Studio] 這個按鈕，將會看到有三個選項，分別為 [Community 2022]、[Professional 2022]、[Enterprise 2022] 這三個選項。

對於這三種 Visual Studio 2022 開發工具，[Community 2022] 版本是免費使用的，而對於 [Professional 2022]、[Enterprise 2022] 這兩個版本，則是需要付費購買，才能夠使用的。對於要開發 Xamarin.Forms 專案，這三個類型的 Visual Studio 2022 都可以做到，因此，在這篇文章中，將會使用 Visual Studio 2022 Community 這個版本來做說明。

在點選 [下載 Visual Studio] 按鈕後所彈出的子視窗內，點選 [Community 2022] 這個選項。

稍待一段時間，當檔案 [VisualStudioSetup.exe] 下載完成之後，可以從瀏覽器上直接點選並且開啟這個檔案，底下螢幕截圖將會使用 Microsoft Edge 瀏覽器所出現的畫面內容。

開始進行安裝 Visual Studio 2022

首先，將會看到 [使用者帳戶控制] 對話窗出現在螢幕上，這裡需要授權且允許這個 Visual Studio Installer 程式可以執行，因此，請點選 [是] 按鈕。

接著，將會看到如下面螢幕截圖的畫面，請在此對話窗內點選 [繼續] 按鈕，以便同意繼續進行安裝 Visual Studio 2022

在此之前，將會從網路取得要安裝 Visual Studio 2022 的最新資訊，一旦 [Visual Studio Installer] 安裝程式準備就緒，就會出現 [正在安裝 Visual Studio Community 2022 - 17.2.0] 對話窗。

請勾選 [工作負載] > [傳統型與行動裝置] > [使用 .NET 進行行動開發] 這個工作負載選項

請勾選 [工作負載] > [傳統型與行動裝置] > [.NET 桌面開發] 這個工作負載選項

請點選 [個別元件] 標籤頁次，請勾選 [程式碼工具] > [Git for Windows] 這個選項

想要知道這次安裝過程會安裝那些工具到電腦上，可以查看該對話窗最右邊的 [安裝詳細資料] 區域，就會看到相關詳細資料。

最後，點選右下方 [安裝] 按鈕，開始進行 Visual Studio 2022 應用程式

接下來會看到下面截圖畫面，將會一邊下載安裝程式，一邊進行安裝

啟動 Visual Studio 2022

一旦安裝完成之後，將會看到如下圖的 [登入 Visual Studio] 視窗出現，在這裡建議使用任何 Microsoft 帳號來登入 Visual Studio，以便可以享受到更多好處。

不過，在這裡，將會先不使用 微軟 帳號登入到 Visual Studio 內，因此，點選最下方的 [不是現在，以後再說] 這個文字連結。

接下來要來設定 Visual Studio 的作業環境操作模式與主題布景

作者個人對於開發設定比較喜歡使用 [Visual C#] 操作模式，因此，請在 [開始設定] 這個文字右方的下拉選單，選擇 [Visual C#] 這個選項

另外對於主題布景部分，作者個人比較偏好 [淺色]，因此，在 [選擇您的色彩佈景主題] 下方，選擇了 [淺色] 這個主題佈景，當然，可以依照個人喜好，選擇自己喜歡的主題佈景，而且日後也可以在 Visual Studio 開發工具內進行切換變更。

現在，可以點選 [啟動 Visual Stuio] 按鈕，進行啟動作業

安裝 Prism Template Pack 擴充功能套件

透過 Prism Template Pack 擴充功能套件，可以快速建立與使用 Prism 這個 MVVM 設計模式類別庫，設計出跨平台的 Xamarin.Forms 專案

當 Visual Studio 2022 啟動之後，便會看到下面的對話窗畫面。

現在要來確認安裝好的 Visual Studio 2022 開發工具，是否可以順利開發 Xamarin.Forms 專案

點選右下方的 [不使用程式碼繼續] 文字連結

當 Visual Studio 2022 開發工具視窗顯示之後

點選功能表上的 [延伸模組] > [管理延伸模組] 選項

此時，[管理擴充功能] 的對話窗將會出現

確認最左方的標籤頁次選擇了 [線上] 這個頁次

在右上方的搜尋文字輸入盒內輸入 Prism Template Pack

現在可以在該對話窗的正中央清單中的第一個，看到 [Prism Template Pack] 這個項目

點選這個項目最右方的 [下載] 按鈕

當 [Prism Template Pack] 下載完成之後

從最下方的黃底黑色文字可以看到

您的變更將進行排程。修改作業將會在全部 Microsoft Visual Studio 個視窗都關閉後開始進行。

因此，依據指示，點選該對話窗右下方的 [關閉] 按鈕

緊接著關閉 Visual Studio 2022

稍微等候一下，將會看到 [VSIX Installer] 對話窗出現

請點選該對話窗右下方的 [Modify] 按鈕

等候 Prism Template Pack 擴充功能安裝完畢

當看到下面對話窗的截圖，點選右下方的 [Close] 按鈕

安裝開發 Xamarin.Forms 專案用到的加速開發程式碼片段

使用瀏覽器打開 https://github.com/vulcanlee/XamarinProductive GitHub Repository

在右方看到一個 [Code] 按鈕，點選下去

可以選擇 Clone 這個 Repository 到本機上，或者下載這個 Repository Zip 檔案，並且在本機電腦上解壓縮這個壓縮檔案

重新開啟 Visual Studio 2022 開發工具

當 Visual Studio 2022 啟動對話窗顯示時候

點選右下方的 [不使用程式碼繼續] 文字連結，直接開啟 Visual Studio 2022

當看到 Visual Studio 2022 開發工具視窗後

點選功能表 [工具] > [程式碼片段管理員]

現在將會看到 [程式碼片段管理員] 對話窗出現

在上方的 [語言] 文字下方的下拉選單 Combobox ，切換選擇 [CSharp] 這個項目

接著點選下方的 [加入] 按鈕

現在將會出現 [程式碼片段目錄] 對話窗

請切換到剛剛下載下來的 XamarinProductive Repository 目錄下，找到並且選擇 [CodeSnippetV2] 這個目錄

之後點選右下方的 [選擇資料夾] 按鈕

此時，將會回到 [程式碼片段管理員] 對話窗

在中間清單區域，將會看到 [CodeSnippetV2] 這些程式碼片段已經安裝完成了

請點選右下方的 [確定] 按鈕

完成後，請關閉 Visual Studio 2022 程式

建立一個 Xamarin.Forms 專案

啟動 Visual Studio 2022 ，便會看到下面的對話窗畫面。

現在要來確認安裝好的 Visual Studio 2022 開發工具，是否可以順利開發 Xamarin.Forms 專案

點選右下方的 [建立新的專案] 按鈕

現在將會看到 [建立新專案] 對話窗出現在螢幕上

在最右上方的 [所有專案類型] 下拉選單中，選擇 [行動裝置]

從中間的清單中，將會看到 [Prism Blank App (Xamarin.Forms)] 項目，請點選這個項目

接著，點選右下方的 [下一步] 按鈕

此時會看到 [設定新的專案] 對話窗出現在螢幕上

在這裡僅是要做測試之用，因此，點選右下方的 [建立] 按鈕

畫面上將會顯示 [PRISM PROJECT WIZARD] 這個對話窗

請勾選 [ANDROID] & [iOS] 這兩個選項

取消 [UWP] 這個選項

接著，在下方的 [Container] 下拉選單控制項內，選擇 [Unity] 這個項目

最後，點選右下方的 [CREATE PROJECT] 按鈕

第一次開啟 Xamarin.Forms Server 專案

一旦 Visual Studio 成功建立 Xamarin.Forms 專案，並且是第一次開始，則會出現底下的 [Windows 安全性警訊] 對話窗，請點選右下方的 [允許存取] 按鈕

此時，該專案已經打開了

在 [方案總管] 視窗中，找到 [BlankApp1.Android] 這個專案

使用滑鼠右集這個專案節點

選擇 [設定為起始專案] 選項

設定與更新 Android SDK

點選功能表 [工具] > [Android] > [Android SDK Manager]

允許開啟 Android SDK Manager

由於是第一次開啟，因此在 [Android SDK 及工具] 對話窗下

將會顯示另外一個 [SDK 需要修復] 對話窗

請點選右下方 [修復] 按鈕

因為要安裝 Android SDK 與模擬器用到的程式

將會看到 [接受授權] 對話窗出現

請點選右下方的 [接受] 按鈕

由於安裝會需要一些時間，因此，可以觀察 [Android SDK 及工具] 對話窗最下方的狀態進度列與文字，以便知道是否已經安裝完畢

安裝完成之後，便可以關掉 [Android SDK 及工具] 對話窗

建立與設定 Android 模擬器

點選功能表 [工具] > [Android] > [Android Device Manager]

允許開啟 Android Device Manager

當 [Android Device Manager] 對話窗出現之後

點選右上方的 [+ New] 按鈕

將會出現 [New Device] 對話窗

使用預設值來建立一個模擬器

請點選右下方的 [Create] 按鈕

現在出現 [接受授權] 對話窗

請點選右下方 [接受] 按鈕

現在將會正在下載該模擬器影像檔案到這台電腦上

一旦下載完成後

請點選 [Start] 按鈕，啟動該模擬器

底下是模擬器啟動後的畫面

在 Android 模擬器上執行 Xamarin.Forms 專案

現在要來啟動這個 Xamarin.Forms 專案，請在 Visual Studio 2022 最上方找到深綠色三角形，在該三角形右方將會顯示這個 Android App 將會在哪個 Android 實體裝置或者模擬器上執行，從下圖中可以看出，這個 App 將會於 API 30 (Android 11.0 - API 30) 這個裝置來執行。

點選這個按鈕，以便啟動這個 Xamarin.Forms 專案，並且進入除錯模式

Visual Studio 2022 將會開始編譯與建置這個 Android 專案

一旦沒有發現到任何錯誤

將會在模擬器上執行這個 App

底下是執行完成後的畫面

 

Visual Studio 2022 安裝與設定 .NET 6 Blazor 開發環境教學 (2022年5月)

安裝與設定 .NET 6 Blazor 開發環境教學 (2022年5月)

對於尚未接觸過 Blazor 這個超級火紅與強大的 Web UI 開發工具，請按照這篇教學文章，進行安裝 Blazor 的開發環境。

這篇文章將會在 Windows 11 作業系統底下來進行操作，當然，也可以將 Visual Studio 2022 到 Windows 10 作業系統下。

下載 Visual Studio 2022

為了要能夠開發 Blazor 的Web應用程式，可以有多種方式來選擇，而在這裏將會使用比較簡單的做法，那就是安裝與使用 Visual Studio 2022 IDE 開發工具，做到可以開發出 Blazor 的 Web 應用程式專案。

更多關於 Visual Studio 2022 的資訊，可以參考 https://docs.microsoft.com/zh-tw/visualstudio/productinfo/vs-roadmap 這個連結內容。

首先，請使用瀏覽器打開這個網址 認識 Visual Studio 系列 ，找到如下圖的 [認識 Visual Studio 系列] 文字，在其文字下方的最左方將會看到 [Visual Studio] 工具圖示，請點選 [下載 Visual Studio] 這個按鈕，將會看到有三個選項，分別為 [Community 2022]、[Professional 2022]、[Enterprise 2022] 這三個選項。

對於這三種 Visual Studio 2022 開發工具，[Community 2022] 版本是免費使用的，而對於 [Professional 2022]、[Enterprise 2022] 這兩個版本，則是需要付費購買，才能夠使用的。對於要開發 Blazor 專案，這三個類型的 Visual Studio 2022 都可以做到，因此，在這篇文章中，將會使用 Visual Studio 2022 Community 這個版本來做說明。

在點選 [下載 Visual Studio] 按鈕後所彈出的子視窗內，點選 [Community 2022] 這個選項。

稍待一段時間，當檔案 [VisualStudioSetup.exe] 下載完成之後，可以從瀏覽器上直接點選並且開啟這個檔案，底下螢幕截圖將會使用 Microsoft Edge 瀏覽器所出現的畫面內容。

開始進行安裝 Visual Studio 2022

首先，將會看到 [使用者帳戶控制] 對話窗出現在螢幕上，這裡需要授權且允許這個 Visual Studio Installer 程式可以執行，因此，請點選 [是] 按鈕。

接著，將會看到如下面螢幕截圖的畫面，請在此對話窗內點選 [繼續] 按鈕，以便同意繼續進行安裝 Visual Studio 2022

在此之前，將會從網路取得要安裝 Visual Studio 2022 的最新資訊，一旦 [Visual Studio Installer] 安裝程式準備就緒，就會出現 [正在安裝 Visual Studio Community 2022 - 17.2.0] 對話窗。

請勾選 [工作負載] > [Web 與雲端] > [ASP.NET 與網頁程式開發] 這個工作負載選項

請點選 [個別元件] 標籤頁次，請勾選 [程式碼工具] > [Git for Windows] 這個選項

想要知道這次安裝過程會安裝那些工具到電腦上，可以查看該對話窗最右邊的 [安裝詳細資料] 區域，就會看到相關詳細資料。

最後，點選右下方 [安裝] 按鈕，開始進行 Visual Studio 2022 應用程式

接下來會看到下面截圖畫面，將會一邊下載安裝程式，一邊進行安裝

啟動 Visual Studio 2022

一旦安裝完成之後，將會看到如下圖的 [登入 Visual Studio] 視窗出現，在這裡建議使用任何 Microsoft 帳號來登入 Visual Studio，以便可以享受到更多好處。

不過，在這裡，將會先不使用 微軟 帳號登入到 Visual Studio 內，因此，點選最下方的 [不是現在，以後再說] 這個文字連結。

接下來要來設定 Visual Studio 的作業環境操作模式與主題布景

作者個人對於開發設定比較喜歡使用 [Visual C#] 操作模式，因此，請在 [開始設定] 這個文字右方的下拉選單，選擇 [Visual C#] 這個選項

另外對於主題布景部分，作者個人比較偏好 [淺色]，因此，在 [選擇您的色彩佈景主題] 下方，選擇了 [淺色] 這個主題佈景，當然，可以依照個人喜好，選擇自己喜歡的主題佈景，而且日後也可以在 Visual Studio 開發工具內進行切換變更。

現在，可以點選 [啟動 Visual Stuio] 按鈕，進行啟動作業

建立一個 Blazor Server 專案

當 Visual Studio 2022 啟動之後，便會看到下面的對話窗畫面。

現在要來確認安裝好的 Visual Studio 2022 開發工具，是否可以順利開發 Blazor 專案

點選右下方的 [建立新的專案] 按鈕

現在將會看到 [建立新專案] 對話窗出現在螢幕上

從中間的清單中，將會看到 [Blazor Server 應用程式] 項目，請點選這個項目

接著，點選右下方的 [下一步] 按鈕

此時會看到 [設定新的專案] 對話窗出現在螢幕上

在這裡僅是要做測試之用，因此，點選右下方的 [下一步] 按鈕

在這個 [其他資訊] 對話窗內，直接點選右下方的 [建立] 按鈕

執行與測試 Blazor Server 專案

一旦 Visual Studio 成功建立 Blazor 專案，並且打開該專案，將會出現如下圖畫面

現在要來啟動這個 Blazor 專案，請在 Visual Studio 2022 最上方找到深綠色三角形，在該三角形右方有顯示 BlazorApp 文字，也就是上面螢幕截圖的紅色圓圈數字1所標示的地方。

點選這個按鈕，以便啟動這個 Blazor 專案，並且進入除錯模式

若這台電腦第一次安裝與使用 Visual Studio 來執行 Blazor 專案，或者SSL開發者使用憑證已經失效，將會看到底下畫面，請點選右下方的 [是] 按鈕，將這個 ASP.NET Core 需要用到的 SSL 自我簽署憑證安裝到這台電腦上。

對於現在出現的 [安全性警告] 對話窗，請點選右下方的 [是] 按鈕，以便可以安裝此憑證。

若沒有發生意外，將會看到瀏覽器自動開啟，顯示出如下圖畫面，這個瀏覽器顯示的內容將會是 Blazor 專案所設計的網頁內容

 

ASP.NET Core 6.0 Blazor Server 開發快速體驗 教學電子書

購買本 Blazor 電子書網址

這是一本帶領對於 Blazor Server 開發技術有興趣的新手開發者，可以快速體驗這個微軟最新的網頁開發框架技術的開發過程，在這本書中，將不會講解枯澀的相關技術內容，而是設計一個應用情境，也就是一般常用的 CRUD (新增 Create, 查詢 Retrive, 更新 Update, 刪除 Delete) 的部落格文章應用程式需求開發，從無到有的帶領讀者透過 Visual Studio 2022 這個開發工具，設計出的 Blazor 伺服器端的這樣應用程式。

所以，購買本書的讀者，將會強烈建議讀者要跟著本書的內容，逐一進行專案的設計與練習，在每個練習階段，都會有不同要帶給讀者的學習方向；透過這樣的練習開發過程，就會明瞭 Blazor Server 這個開發框架技術究竟可以做到什麼樣的強大功能；這本書提供一個動手練習實作的說明操作步驟，體驗 Blazor 專案開發過程。因此，若您沒有這樣的興趣或者這樣的需求，請不要購買這本書。

因此，當讀者完成所有的專案練習開發，相信您對於 Blazor Server 這個優秀的開發框架必定有更清楚的認識，了解到不需要使用到繁雜的 JavaScript 程式語言，僅使用 Blazor 就可以做到那些網站設計上的功能。

這本書能提供什麼

在這本書裡面，將會提供 9 章的內容，分別是

• 建立 Blazor Server Side 伺服器端的專案

  了解如何透過 Visual Studio 2022 開發工具，開始建立一個 伺服器端的 Blazor 專案，並且從這個 Blazor Server 專案範本所產生的檔案與相關內容進行了解 Blazor Server 運作方式與特色，這裡也會介紹該專案內建的兩個 Razor 元件 Component 設計方式。

• 使用 Entity Framework Core 存取資料庫

  在本書中所要設計的部落格文章管理紀錄，將會儲存在 Microsoft SQL Server 內，想要做到這樣的設計需求，最簡單的方式就是採用微軟提供的 Entity Framework Core 這套 ORM 套件，在這裡將會說明 Entity Framework Core 的基本架構與特色和核心運作機制，接著了解如何建立實體模型並且建立起一個資料庫與產生一些測試用的紀錄在資料表內；另外，針對資料庫處理要用到的 CRUD Create 新增、Retrive 查詢、Update 更新、Delete 刪除的計算方式，也會介紹如何使用 C# 程式碼來做到這些功能。

• 建立部落格文章頁面之 CRUD 功能

  現在將要開始實際進行建立一個 Blazor 頁面元件，在這裡設計出一個具有 CRUD 功能的互動網頁，更令人驚豔的是，所有的設計過程，完全僅使用到 C# 程式語言就可以完成這樣的設計工作，沒有用到任何一行 JavaScript 程式碼，因此，只要是身為 .NET C# 開發者，不論之前從事 Windows Forms、Web Forms、WPF、Xamarin 等等，將會透過 Blazor 這套 UI 開發框架幫助，成為一個全端 Web 開發者，整個學習過程相當的輕鬆與容易，無須花費大量精力與時間就可以學會 Blazor Server 開發技術。

• 使用 Bootstrap 強制回應 Modal 對話窗

  上一章所完成部落格文章管理頁面，是將資料表清單與紀錄編輯所用到的 HTML 透過元件內的布林型別屬性和資料綁定機制來動態變更瀏覽器上的 DOM 物件，如此做到切換網頁內容可以顯示不同操作畫面，在這一章中，將會使用 Bootstrap 5 所提供的強制回應對話窗樣式，讓紀錄表單編修的時候可以顯示一個流暢的對話窗，讓使用者在此對話窗中進行操作，形成一個流暢的操作體驗。

• 設計與使用 修改與刪除 Blazor 元件

  上一章所完成部落格文章管理頁面，是將 HTML / CSS 都設計在同一個 Razor 元件檔案 (.razor) 內，現在需要使用 Blazor UI 開發框架所提供的一個絕佳功能，那就是可以把許多 UI 畫面，切割成為不同的 Razor 子元件，並且在 Blazor 路由頁面元件中參考、使用這些子元件，讓這個網頁內容設計過程更加的容易與順暢，並且容易替換與維護。

• 將商業邏輯程式碼重構為 ViewModel

  到現在為止，所有的 UI 宣告標記 (HTML / CSS) 和商業邏輯程式碼 (C#程式語言)都寫在同一個 Razor 元件檔案 (.razor) 內，在此將要學習與使用關注點分離的設計方法，把網頁畫面的 UI 保留在 Razor 元件檔案內，而把商業邏輯的 C# 程式碼分離到 ViewModel 類別內，藉由透過 ASP.NET Core 所提供相依性注入服務機制，把 ViewModel 物件動態注入到 Razor 元件檔案內。

• 將資料庫存取程式碼分離出來

  成功的將 UI 與 商業邏輯程式碼分離出來之後，接下來就是要把資料庫相關的程式碼，再度從 ViewModel 分離出來，讓 ViewModel 內要處理資料庫方面工作的時候，面對的是一個抽象介面，而在具體實作類別內，則是使用 Entity Framework Coew API 來存取資料庫，當然，這兩者之間還是要透過ASP.NET Core 所提供相依性注入服務機制結合在一起。

• 設計使用者身分驗證與授權功能

  整個專案到現在僅剩下一個實務上經常會遇到的情境，那就是要能夠做到使用者的身分驗證與授權，在此將會使用 Cookie 來儲存使用者成功身分驗證之後的存取權杖，用來識別下次再度回到網站的時候，可以得知上次使用的使用者是哪位；另外也要控制僅有成功登入的使用者，可以使用剛剛設計的部落格文章管理頁面。

• 建立 部落格文章 Web API

  最後，將要學習如何在 Blazor Server 專案內，啟用 Web API 程式設計能力，在此將會要來設計一個部落格文章管理的 RESTful Web API

誰適合閱讀這本書

對於任何想要學習 Blazor 這個開發技術，可以透過本書的開發練習說明，逐步了解到如何真正的設計出一個 Blazor 實用專案。

讀者必須具備 .NET / C# 的開發經驗、HTML / CSS 的基本認識即可，對於開發工具而言，本書是在 Windows 10 作業系統下，使用任何 Visual Studio 2022 的版本，就可以進行開發。 

ASP.NET Core 6.0 Blazor Server 部署到 IIS

在這裡，假設遠端的 Windows Server 2022 已經預設安裝完成(採用桌面體驗模式來安裝)，接下來將要進行 IIS 的安裝與設定

安裝 IIS 服務

• 請開啟 [伺服器管理員] 應用程式

• 在 [伺服器管理員] > [儀錶板] 視窗內，點選 [新增角色與功能] 項目

  

• 此時，[新增角色及功能精靈] 對話窗將會顯示出來，並且標示現在進度為 [在您開始前] (可以查看左上方的文字內容)

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [選取安裝類型]

• 在此選擇預設的 [角色形或功能型安裝] 選項

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [選取目的地伺服器]

• 現在需要 [選取在上面安裝角色與功能的伺服器與硬碟]，在此將會選擇預設顯示的項目，也就是本機電腦

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [選取伺服器角色]

• 在中間的所有角色清單中，勾選 [網頁伺服器 (IIS)] 這個選項

• 此時，將會彈出與顯示新的 [新增角色及功能精靈] 對話窗在螢幕上

• 請點選右下方的 [新增功能] 按鈕

  

• 現在將會回到 [新增角色及功能精靈] 對話窗的 [選取伺服器角色] 的進度內容，從畫面可以看到，對於 [網頁伺服器 (IIS)] 這個項目已經勾選起來了

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [選取功能]

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [網頁伺服器角色 (IIS)]

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [選取角色服務]

• 在中間區域顯示 [選取要針對 網頁伺服器 (IIS) 安裝的角色服務] 提示訊息

• 請在中間區域的 [角色服務] 清單中，找到並且勾選 [網頁伺服器] > [應用程式開發] > [WebSocket 通訊協定] 項目

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在的進度為 [確認安裝選項]

  

• 在此對話窗下，點選 [安裝] 按鈕

• 現在的進度為 [安裝進度]

  

• 一旦安裝完成之後，點選右下角的 [關閉] 按鈕，結束此次的 [新增角色及功能精靈] 作業

• 在此 Windows Server 2022 下，使用檔案總管在根目錄下建立一個 SQLite 目錄，該資料夾是要用來儲存 SQLite 資料庫之用

安裝 .NET Core 裝載套件組合

• 使用此連結，直接下載 .NET Core 裝載套件組合(目前版本)安裝程式
• 下載完成後，請將該檔案安裝到有使用 IIS 的 Windows Server 2022 上

設定改用用 SQLite 資料庫

• 打開 Blazor Server 專案
• 在專案根目錄下找到 [appsettings.json] 檔案，並且開啟這個檔案
• 找到 [DefaultConnection] 項目，將其值設定為 Data Source=C:/SQLite/MyDatabase.db
• 底下將是完成後的 [appsettings.json] 檔案內容

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=C:/SQLite/MyDatabase.db"
  },
  "AllowedHosts": "*"
}

安裝 SQLite NuGet 套件

• 滑鼠右擊專案節點

• 從彈出功能表點選 [管理 NuGet 套件]

• 當出現 [NuGet: Blogger] 視窗，點選 [瀏覽] 分頁頁次

• 在文字輸入盒輸入 Microsoft.EntityFrameworkCore.Sqlite

• 找到這個套件，點選並且安裝這個套件

  

• 安裝完成後，準備修正程式碼，改用 SQLite 資料庫

通知 Entity Framework Core 要改用 SQLite 資料庫

• 在專案根目錄下找到並且打開 [Program.cs] 檔案
• 找到 builder.Services.AddDbContext 文字
• 將此敘述改為底下 C# 程式碼

builder.Services.AddDbContext<BlogDbContext>(
    options =>
    options.UseSqlite(connectionString), ServiceLifetime.Transient);

準備發布 Blazor Server 專案的內容

• 打開 Blazor Server 專案

• 使用滑鼠右檢點選專案節點

• 從彈出功能表中點選 [發佈] 選項

  

• 現在 [發佈對話窗] 出現在螢幕上

• 請點選 [資料夾] 這個選項，代表將您的應用程式發佈到本機資料夾或檔案共用

  

• 在此對話窗下，點選 [下一步] 按鈕

• 現在需要提供本機或網路資料夾的路徑，在此將先使用預設路徑名稱

  

• 在此對話窗下，點選 [完成] 按鈕

• 現在回到了 Visual Studio 2022 下

• 在此將會看到 [Blogger: 發佈] 視窗

• 在此視窗的右上方，點選 [發佈] 按鈕

  

• 一旦成功發佈完成，將會可以從 [輸出] 視窗中看到有 1 個專案成功發布的訊息

• 此時，在發佈視窗中找到 [目標位置] 這個欄位，點選該欄位名稱右方的藍色文字

  

• 現在將會看到檔案總管自動顯示出來

• 該檔案總綰的目錄內的檔案，就是準備要部署到遠端 IIS 上的檔案

• 請將這些檔案複製起來

  

• 現在使用遠端桌面工具，連線到遠端 IIS 伺服器上

• 打開此 IIS 伺服器上的 [檔案總管] 應用程式

• 切換到 C:\inetpub\wwwroot 路徑下

  

• 將剛剛產生出來的發佈所有檔案，複製到這個目錄下

  

• 在伺服器上找到 [Internet Information Services (IIS) 管理員] 應用程式圖示

• 開啟這個 [Internet Information Services (IIS) 管理員] 應用程式

• 在 [Internet Information Services (IIS) 管理員] 視窗左方的 [連線] 面板中，找到並且點遠 [應用程式集區] 這個項目

• 在該視窗的中間區域將會看 [DefaultAppPool] 這個項目

  

• 滑鼠雙擊 [DefaultAppPool] 這個項目

• 當出現 [編輯應用程式集區] 視窗

• 點選 [.NET CLR 版本] 標題下方的下拉選單

• 切換選擇，設定為 [沒有受控碼] 這個選項

  

• 點選下方 [確定] 按鈕，完成應用程式集區的變更作業

• 當回到 [Internet Information Services (IIS) 管理員] 的 [應用程式集區] 畫面下

• 找到右方動作面板

• 點選 [停止] 按鈕

• 一定該應用程式集區成功停止後

• 點選 [啟動] 按鈕

  

進行測試

• 開啟瀏覽器，在位址列上輸入剛剛發佈的 IIS 服務端點網址
• 現在，便可以看到與使用這個網站服務了