部署Blazor到nginx

您想嘗試Blazor ，但您不是Windows人士嗎？ 嚴格是Linux開發人員？ 你真幸運。 .NET Core的目標之一就是實現跨平台 ，因此今天我們將看到Microsoft最熱門的新前端開發項目Blazor真正實現了“跨平台”。

在開發Blazor應用並無需使用Windows機器的情況下進行部署時，請與我一起學習。 這是我們要做的：

• 設置我們的（Linux）開發人員機器
• 構建一個小型Blazor應用
• 將其部署到Linux VM

因此，讓我們開始吧。

1.設置桌面

首先，我們必須建立一個開發人員環境。 為此，我將首先進行全新的Ubuntu桌面安裝，因為它從未做過任何事情，因此我們可以包含開始使用所需的所有步驟。

安裝Git

我們要做的第一件事是安裝Git。 您可能已經擁有了，但這是所需的步驟之一。 打開一個終端並輸入：

sudo apt install git

安裝Git之后，我們需要獲取某種IDE。 我建議使用Visual Studio Code，這就是我在本教程中將要使用的代碼。

安裝Visual Studio代碼

首先，我們需要安裝一些依賴項：

1.  
   sudo apt update
2.  
   sudo apt install software-properties-common apt-transport-https wget

然后，我們將導入Microsoft GPG密鑰：

wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

接下來，我們將啟用VSCode存儲庫：

sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

然后安裝它：

1.  
   sudo apt update
2.  
   sudo apt install code

現在，您已經安裝了Visual Studio Code。

是的，我知道在您向我發送仇恨郵件之前，您可以進入軟件管理器並安裝VS Code。 由於某種原因，我將展示如何手動執行該操作，始終了解Linux系統的運行狀況，並有意安裝它們，以便您完全控制。 如果您想單擊軟件管理器中的按鈕，那也很酷。

安裝.NET Core

要使Blazor正常工作，您必須在本地計算機上安裝.NET Core。 有幾種方法可以做到這一點。 我們將直接按照Microsoft的指示安裝.NET Core SDK和Runtime。 根據所使用的Linux版本，它可能有所不同。 見說明你的發行版。

首先，您需要注冊Microsoft密鑰和feed：

1.  
   wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
2.  
   sudo dpkg -i packages-microsoft-prod.deb

然后，我們將安裝.NET Core SDK

1.  
   sudo apt-get update
2.  
   sudo apt- get install dotnet-sdk-3.1

您可以輸入以下命令來驗證安裝是否正確：

dotnet --version

它看起來應該像這樣：（盡管以后版本可能會更新）

您已經安裝了SDK！ 現在，我們准備在本地計算機上創建Blazor項目。

2.創建Blazor應用程序（WebAssembly）

因此，您可能已經看過一些有關創建Blazor應用程序的教程，其中大多數都是Windows環境中的Visual Studio。 超級簡單，只需按一下按鈕。 但是，在Linux或Mac中，您沒有合適的Visual Studio版本，但具有dotnet CLI，在這里創建Blazor應用幾乎一樣容易。

重要的提示

我們可以通過兩種方式運行Blazor應用程序。 從Microsoft：

Blazor是一個Web框架，旨在在基於WebAssembly的.NET運行時（ Blazor WebAssembly ）或ASP.NET Core（ Blazor Server）的服務器端的瀏覽器中運行客戶端

我們將首先在客戶端運行它，這意味着：

Blazor應用程序，其依賴項和.NET運行時已下載到瀏覽器中。該應用程序直接在瀏覽器UI線程上執行。

我們將其作為獨立部署進行部署。

獨立部署 -獨立部署將Blazor WebAssembly應用程序作為客戶端直接請求的一組靜態文件來提供。 任何靜態文件服務器都可以服務Blazor應用程序。

這種方法有一些缺點，我們將討論這些缺點，但是現在，我們要構建它以便可以將其托管在任何靜態服務器上。

Blazor服務器包含在.NET Core 3.0中，但WebAssembly仍處於預覽狀態。 因此，我們需要為其安裝模板。

您可以使用以下命令來獲取模板：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

接下來，我們將創建一個新的Blazor WebAssembly應用

dotnet new blazorwasm -o BlazorDemo

進入目錄並運行它：

1.  
   cd BlazorDemo
2.  
   dotnet run

您的終端窗口應如下所示：

現在，您可以在網絡瀏覽器中打開它並查看頁面：

在VS Code中將其打開，然后進行自己的修改並進行嘗試。

因此，現在我們將使用這個基本的Blazor應用程序並將其部署在不同的地方。

3.將其部署到Linux服務器（WebAssembly）

讓我們看看將其推送到常規Linux托管服務器將需要什么。 為此，我將使用Digital Ocean 5美元的特殊服務器。 我從頭開始創建它，再次顯示啟動和運行它所需的所有步驟。 我們將在其上運行CentOS 7。

設置我們的服務器

要進行設置，我將要對其進行更新：

sudo yum update

然后，我將在其上安裝Nginx來提供我們的靜態文件。

1.  
   sudo yum install epel-release
2.  
   sudo yum install nginx

如果您已經設置了可提供靜態文件的Web服務器，則不必執行以下步驟。

然后，我將啟動我們的Nginx服務器：

sudo systemctl start nginx

現在就可以開始了。

建立部署（WebAssembly）

現在我們要部署應用程序。

現在，在您的應用程序的主文件夾中打開命令提示符，然后運行以下命令：

dotnet publish -c Release -r linux-x64

我們將進入發布文件夾並查找dist文件夾：

cd bin/Release/netstandard2.1/linux-x64/publish/BlazorDemo/dist

在這里，我可以看到文件列表。

我將這些復制到我的新Linux服務器上。 我正在使用SCP，但是您可以使用任何您認為可行的方法：

scp -r * [e-mail]:/usr/share/nginx/html

現在，我將其加載到Web瀏覽器中：

好吧，那太酷了！ 因此，此.NET Core應用程序已轉換為可以在任何地方托管的靜態文件。 我可以將它放在IIS或S3上，或者放在任何地方，它都可以正常工作。 您甚至可以在Github Pages上托管它！ 。

這很棒，因為C＃和Razor文件被編譯成.NET程序集，而Blazor WebAssembly引導.NET運行時並將程序集直接加載到瀏覽器中。

但是它需要現代的瀏覽器，並且要下載到瀏覽器上才能擁有巨大的負載。

為了真正利用Blazor的功能，我們應該設置Blazor Server軟件包。 如果您真的想知道不同之處，可以在這里了解更多 。

4.創建Blazor應用程序（Blazor服務器）

現在，我們將創建一個Blazor Server應用程序。

dotnet new blazorserver -o BlazorServerDemo

他創建了另一個Blazor應用程序，然后鍵入

dotnet run

它啟動了我們的本地應用程序：

看起來很熟悉 只是現在我沒有兔子頭。

因此，讓我們發布它。 我們將其發布為獨立的應用程序，因此我們可以在我們的Nginx服務器上運行它，而無需安裝.NET Framework。

dotnet publish -c Release --self-contained -r linux-x64

然后，我們進入發布目錄：

cd bin/Release/netcoreapp3.1/linux-x64/publish/

然后將它們復制到主機上創建的應用程序目錄中（您可能會有所不同）

scp -r * [e-mail]:/home/web/apps/BlazorServerDemo

5.設置.NET Core服務器

要運行.NET Core應用程序（甚至是自包含的），需要依賴一些。 我們將為CentOS安裝以下軟件，如果您使用的是其他操作系統，則可以在此處檢查所需的依賴項 。

這是使用Yum安裝所需依賴項的命令：

sudo yum install lttng-ust libcurl openssl-libs krb5-libs libicu zlib

接下來，您需要更改SELinux設置，這可能會使您掛斷電話：

setsebool -P httpd_can_network_connect 1

現在我們可以運行可執行文件：

./BlazorServerDemo --urls http://0.0.0.0:5000

我們已經建立了一個服務器，並准備在端口5000上運行：

我們可以在Web瀏覽器中加載它！

我們現在已經啟動並運行了，但是我們不想只在這樣的端口上監聽它，因此我們將Nginx用作反向代理。 關閉該過程。

然后讓我們在后台運行此操作，最后添加“＆”號：

./BlazorServerDemo --urls http://0.0.0.0:5000 &

現在，如果您輸入“ jobs”，您應該會看到它正在運行。

現在，創建以下兩個文件夾：

1.  
   sudo mkdir /etc/nginx/sites-available
2.  
   sudo mkdir /etc/nginx/sites-enabled

然后編輯您的默認文件

vi /etc/nginx/sites-available/default

並將以下內容添加到您的服務器指令中：

1.  
   location / {
2.  
   proxy_pass http: //localhost:5000;
3.  
   proxy_http_version 1.1 ;
4.  
   proxy_set_header Upgrade $http_upgrade;
5.  
   proxy_set_header Connection keep-alive;
6.  
   proxy_set_header Host $host;
7.  
   proxy_cache_bypass $http_upgrade;
8.  
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
9.  
   proxy_set_header X-Forwarded-Proto $scheme;
10.  
    }

現在重啟nginx：

sudo systemctl reload nginx

現在，您將看到新頁面啟動並運行！

現在，您在Linux VM實例上具有完整的Blazor服務器。

結論

因此，在本教程中，我們在Ubuntu計算機上構建了Blazor應用程序（WebAssembly和Blazor Server），並將其推送到CentOS計算機上。 我們不需要任何Windows機器來執行此操作。

我的目的是說明如果您是Linux開發人員，則開發Blazor和.NET Core應用程序非常容易。 我最初是一名Linux開發人員，后來愛上了C＃/。NET，現在我可以同時做兩件事，而且我喜歡它。 你也會。

.NET Core很棒，我認為Blazor也是如此。 我很高興開發更多Blazor應用程序並推動其極限。

如果您想了解有關Blazor的更多信息，Pluralsight剛剛發布了一些非常酷的課程。

Blazor-大圖片

Blazor-入門

Blazor-身份驗證和授權

所以嘗試一下！ 讓我知道您對Blazor的看法，並在評論中分享您的經驗！

From: https://hackernoon.com/build-and-deploy-a-blazor-app-without-touching-a-windows-machine-oxp22fj