firebase连接不上_如何在Firebase上托管Blazor应用程序

牧梓

2023-12-01

firebase连接不上

介绍 (Introduction)

In this article, we will learn how to deploy a Blazor application on Firebase. We will create a basic calculator app using Blazor and host it on Firebase. This application will not have any server-side code or web API logic. We will use Visual Studio 2017 to build and publish the application. We will use CLI to deploy the application on Firebase.

在本文中，我们将学习如何在Firebase上部署Blazor应用程序。我们将使用Blazor创建一个基本的计算器应用并将其托管在Firebase上。此应用程序将没有任何服务器端代码或Web API逻辑。我们将使用Visual Studio 2017生成和发布应用程序。我们将使用CLI在Firebase上部署应用程序。

先决条件 (Prerequisites)

You need to install following prerequisites to create a Blazor application.

您需要安装以下先决条件才能创建Blazor应用程序。

Install the .NET Core 2.1 or above SDK from here
从此处安装.NET Core 2.1或更高版本的SDK
Install the latest version of Visual Studio 2017 from here
从此处安装最新版本的Visual Studio 2017
Install ASP.NET Core Blazor Language Services extension from here
从此处安装ASP.NET Core Blazor语言服务扩展

创建Blazor应用程序 (Creating a Blazor application)

We will create a basic calculator application for this demo. Since this is a basic calculator, it will take two operands, and support four arithmetic functions — addition, subtraction, multiplication, and division.

我们将为此演示创建一个基本的计算器应用程序。由于这是一个基本的计算器，它将需要两个操作数，并支持四个算术函数-加，减，乘和除。

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Then, select ASP.NET Core Web Application from available project types. Put the name of the project as SampleCalculator and press OK.

打开Visual Studio，然后选择“文件>>新建>>项目”。选择项目后，将打开“新建项目”对话框。从左侧面板的Visual C＃菜单中选择.NET Core。然后hen, select ASP.NET Core Web从可用的项目类型中hen, select ASP.NET Core Web应用程序”。将project as Samp名称命名project as Samp leCalculator，然后按OK。

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select “Blazor” template and press OK.

单击确定后，将打开一个新对话框，要求您选择项目模板。您可以在模板窗口的左上方观察两个下拉菜单。从这些下拉列表中选择“ .NET Core”和“ ASP.NET Core 2.1”。然后，选择“ Blazor”模板，然后按OK。

This will create your Blazor application. We will now create our calculator component.

这将创建您的Blazor应用程序。现在，我们将创建计算器组件。

创建计算器组件 (Creating the Calculator Component)

For this application, we will use the single page component structure. The logic and the UI will be in the same file.

对于此应用程序，我们将使用单页组件结构。逻辑和UI将在同一文件中。

To create our component, right-click on SampleCalculator/Pages folder and then select Add >> New Item. An Add New Item dialog box will open, asking you to select the desired item template from the provided list of items. Select ASP.NET Core from the left panel, and then select Razor View from the templates panel. Put the name of file as Calculator.cshtml and click Add.

要创建我们的组件，请右键单击SampleCalculator/Pages文件夹，然后选择添加>>新建项。将打开“添加新项”对话框，要求您从提供的项列表中选择所需的项模板。从左侧面板中选择ASP.NET Core，然后从模板面板中选择Razor View。将文件名命名le as Calculator. cshtml，然后单击添加。

Refer to the following screenshot:

请参考以下屏幕截图：

Open the Calculator.cshtml file and put the following code into it:

打开Calculator.cshtml文件，并将以下代码放入其中：

@page "/calculator"<h1>Basic Calculator Using Blazor</h1><hr /><div>    <div class="row">        <div class="col-sm-3">            <label class="control-label">First Number</label>        </div>        <div class="col-sm-4">            <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />        </div>    </div>    <br />    <div class="row">        <div class="col-sm-3">            <label class="control-label">Second Number</label>        </div>        <div class="col-sm-4">            <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />        </div>    </div>    <br />    <div class="row">        <div class="col-sm-3">            <label class="control-label">Result</label>        </div>        <div class="col-sm-4">            <input readonly class="form-control" bind="@finalResult" />        </div>    </div>    <br />    <div class="row">        <div class="col-md-3">            <button onclick="@AddNumbers" class="btn btn-primary">                Add                (+)            </button>        </div>        <div class="col-md-3">            <button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (−)</button>        </div>        <div class="col-md-3">            <button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>        </div>        <div class="col-md-3">            <button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>        </div>    </div></div>@functions {double operand1 { get; set; }double operand2 { get; set; }string finalResult { get; set; }void AddNumbers(){    finalResult = (operand1 + operand2).ToString();}void SubtractNumbers(){    finalResult = (operand1 - operand2).ToString();}void MultiplyNumbers(){    finalResult = (operand1 * operand2).ToString();}void DivideNumbers(){    if (operand2 != 0)    {        finalResult = (operand1 / operand2).ToString();    }    else    {        finalResult = "Cannot Divide by Zero";    }}}

In the HTML part of the code, we have defined two textboxes to read the operand input from the user. We have a textbox to display the result of arithmetic operations. We have also defined four buttons, one for each arithmetic operation. The onclick event of the buttons will invoke the methods that will provide the output. Once it has performed the corresponding operation on both operands.

在代码HTML部分，我们定义了两个文本框来读取用户的操作数输入。我们有一个文本框来显示算术运算的结果。我们还定义了四个按钮，每个算术操作一个。按钮的onclick事件将调用将提供输出的方法。一旦对两个操作数执行了相应的运算。

In the @functions section, we have defined two properties to bind to the user input value, and another property to display the calculation result. To handle our arithmetic operations, we have defined four methods that will perform the desired operations on the operands and set the value of finalResult that will then bind to the Result field on the UI.

在@functions部分中，我们定义了两个属性以绑定到用户输入值，并定义另一个属性以显示计算结果。为了处理我们的算术运算，我们定义了四个方法，这些方法将对操作数执行所需的运算，并设置finalResult的值，然后将其绑定到UI上的Result字段。

Add the navigation link for this component in Shared/NavMenu.cshtml file. Press F5 to run the application and you can see the output screen as shown in the image below:

在Shared/NavMenu.cshtml文件中添加此组件的导航链接。按F5键运行该应用程序，您将看到输出屏幕，如下图所示：

This application is still in a development environment. Before hosting it on Firebase, we need to publish it.

该应用程序仍处于开发环境中。在将其托管在Firebase上之前，我们需要发布它。

发布Blazor应用程序 (Publishing the Blazor application)

Right click on the project and click publish. Refer to the image below:

右键单击该项目，然后单击发布。请参考下图：

You will see a screen similar to below. Select Folder from the left menu and provide a folder path. You can provide any folder path where you want to publish your app.

您将看到类似于以下的屏幕。从左侧菜单中选择文件夹，然后提供文件夹路径。您可以提供要发布应用程序的任何文件夹路径。

Click on publish. Visual Studio will start publishing your application. If there are no build errors then your application will be published successfully to the folder you have mentioned.

点击发布。 Visual Studio将开始发布您的应用程序。如果没有构建错误，那么您的应用程序将成功发布到您提到的文件夹中。

After the publishing is successful, we will proceed to host this application on Firebase.

发布成功后，我们将继续在Firebase上托管此应用程序。

在Firebase上添加项目 (Adding Project on Firebase)

The first step to host any application on Firebase is to add a new project on Firebase console.

在Firebase上托管任何应用程序的第一步是在Firebase控制台上添加一个新项目。

Navigate to https://console.firebase.google.com and sign in with your Google account. Click on Add Project link. A pop up window will open as shown in the image below. Provide your project name and click on Create project button at the bottom.

导航到https://console.firebase.google.com并使用您的Google帐户登录。单击Add Project链接。如下图所示，将弹出一个窗口。提供您的项目名称，然后单击底部的“ Create project按钮。

Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. One the project is created you cannot change your project id. We will use this project id in the next section while initializing our application.

在此处记录项目ID。 Firebase项目ID在全球范围内是唯一的。您可以在创建新项目时编辑项目ID。创建一个项目后，您将无法更改项目ID。在初始化应用程序时，我们将在下一部分中使用此项目ID。

使用Firebase进行部署 (Deploying with Firebase)

Open the folder where you have published your Blazor application. Here you can see a folder “SampleCalculator” and a web.config file. Inside “SampleCalculator” we will have another folder with name “dist”. We will publish the contents from this “dist” folder.

打开您已发布Blazor应用程序的文件夹。在这里，您可以看到一个文件夹“ SampleCalculator”和一个web.config文件。在“ SampleCalculator”内部，我们将有另一个名为“ dist”的文件夹。我们将发布此“ dist”文件夹中的内容。

Open a command prompt/PowerShell window inside the “SampleCalculator” folder. Now follow the steps mentioned below:

在“ SampleCalculator”文件夹中打开命令提示符/ PowerShell窗口。现在，请按照以下步骤操作：

Step 1: Login using Firebase

步骤1 ：使用Firebase登录

Execute the following command:

执行以下命令：

firebase login

It will open a browser window and ask you to login into Firebase. Login using your Google account. Upon successful login navigate back to your CLI.

它将打开浏览器窗口，并要求您登录Firebase。使用您的Google帐户登录。成功登录后，导航回您的CLI。

Step 2: Initializing your application

步骤2 ：初始化您的应用程序

Execute the following command

执行以下命令

firebase init

This command will initialize a firebase project. You will be asked a set of questions. Answer them as shown below:

此命令将初始化一个Firebase项目。您将被问到一系列问题。如下所示回答他们：

Are you ready to proceed? — Press Y
您准备好继续了吗？ —按Y
Which Firebase CLI features do you want to set up for this folder? — select Hosting
您要为此文件夹设置哪些Firebase CLI功能？ —选择托管
Select a default Firebase project for this directory: — If the project you added in the last section appears in the list, select it, else select “don’t set up a default project”.
为该目录选择一个默认的Firebase项目：—如果您在上一节中添加的项目出现在列表中，请选择它，否则请选择“不设置默认项目”。
What do you want to use as your public directory? — dist
您想使用什么作为公用目录？ — dist
Configure as a single-page app (rewrite all URLs to /index.html)? — y
配置为单页应用程序(将所有URL重写为/index.html)？ – y
File dist/index.html already exists. Overwrite? — N
文件dist / index.html已经存在。覆盖？ — N

You will get a “Firebase initialization complete!” message.

您将获得“ Firebase初始化完成！” 信息。

Step 3: Adding a default project

步骤3 ：添加默认项目

If you already selected a default project in step 2 then you can skip this step.

如果您已经在步骤2中选择了默认项目，则可以跳过此步骤。

If you have not selected a default project then you need to add it manually here. Run the following command:

如果尚未选择默认项目，则需要在此处手动添加。运行以下命令：

firebase use --add yourProjectId

In this case, it will be

在这种情况下，

firebase use --add blazorcalc

You will get a success message as “Now using project blazorcalc”.

您将收到一条成功消息，即“现在使用blazorcalc项目”。

Step 4: Deploy on Firebase

步骤4 ：在Firebase上部署

Finally, run the following command to deploy your application on Firebase.

最后，运行以下命令以在Firebase上部署您的应用程序。

firebase deploy

This command will deploy your Blazor application on Firebase and upon success, it will give you a hosting URL.

此命令将在Firebase上部署Blazor应用程序，成功后，它将为您提供托管URL。

All the steps mentioned above is shown in the GIF below:

上面提到的所有步骤都显示在下面的GIF中：

执行演示 (Execution Demo)

Open the hosting URL. You can see the application in your browser as shown in the image below:

打开托管URL。您可以在浏览器中看到该应用程序，如下图所示：

文章扩展 (Article Extension)

We can follow the same steps to host an Angular application on Firebase.

我们可以按照相同的步骤在Firebase上托管Angular应用程序。

Run the following command to build an Angular app for prod.

运行以下命令为产品创建Angular应用。

ng build --prod

It will create the “dist” folder in your application’s root folder. Once you get the “dist” folder follow the same steps as mentioned above.

它将在应用程序的根文件夹中创建“ dist”文件夹。获得“ dist”文件夹后，请按照上述相同的步骤进行操作。

结论 (Conclusion)

We learned how to create a sample calculator application using Blazor. We also learned how to deploy this application to Firebase.

我们学习了如何使用Blazor创建示例计算器应用程序。我们还学习了如何将此应用程序部署到Firebase。

You can find the code for this sample calculator application at Github.

您可以在Github上找到此示例计算器应用程序的代码。

Get my book Blazor Quick Start Guide to learn more about Blazor.

获取我的书《 Blazor快速入门指南》，以了解有关Blazor的更多信息。

Preparing for interviews? Read my article on C# Coding Questions For Technical Interviews

准备面试吗？阅读有关技术面试的C＃编码问题的文章

也可以看看 (See Also)

Originally published at https://ankitsharmablogs.com/

最初发布在https://ankitsharmablogs.com/

翻译自: https://www.freecodecamp.org/news/how-to-host-a-blazor-application-on-firebase-67c4ee956a22/