【翻译】使用Visual Studio在Azure上部署Asp.Net Core Web应用

简介: 配置运行环境 Install the latest Azure SDK for Visual Studio. The SDK installs Visual Studio if you don't already have it.

配置运行环境

创建Web应用

In the Visual Studio Start Page, tap New Project....

在Visual Studio启示页面,点击New Project…

img_8a0bd543f4ebef2d461074bb631de839.png

Alternatively, you can use the menus to create a new project. Tap File > New > Project....

你也可以通过菜单来创建一个新的项目。点击File > New > Project…

img_631cbd9b041612c51778e66b8cd5ab36.png

Complete the New Project dialog:

完成新项目的创建

  • In the left pane, tap Web

  • 在左边面板,点击Web

  • In the center pane, tap ASP.NET Core Web Application (.NET Core)

  • 在中间的面板,点击选择Asp.Net Core Web Application(.Net Core)

  • Tap OK

  • 点击OK

img_6c80ee45da575681603ed518457775b7.png

In the New ASP.NET Core Web Application (.NET Core) dialog:

在New Asp.Net Core Web Application(.Net Core)对话框中:

  • Tap Web Application

  • 点击Web Application

  • Verify Authentication is set to Individual User Accounts

  • Authentication设置成Individual User Accounts

  • Verify Host in the cloud is not checked

  • 不选中Host in the Cloud

  • Tap OK

  • 点击OK

在本地测试应用

  • Press Ctrl-F5 to run the app locally

  • 按Ctrl+F5在本地运行应用

  • Tap the About and Contact links. Depending on the size of your device, you might need to tap the navigation icon to show the links

  • 点击About和Contact链接,根据你设备分辨率的大小,你可能需要点击导航图标才能看到这些链接。

img_ab43d66160b98ea53083f70aacc7bbe5.png

  • Tap Register and register a new user. You can use a fictitious email address. When you submit, you'll get the following error:
  • 点击注册链接注册一个新的用户。你可以输入虚拟的Email地址,当你点击提交的时候,你会看到错误:

img_81f3f251416d072dd3b7ee57474d28c3.png

You can fix the problem in two different ways:

你可以使用以下两种方式修复问题:

  • Tap Apply Migrations and, once the page updates, refresh the page;

  • 点击Apply Migrations,等待更新后,刷新页面

  • Run the following from a command prompt in the project's directory:

  • 在命令终端下,到项目目录运行以下命令:

dotnet ef database update

The app displays the email used to register the new user and a Log off link.

刷新页面后,页面会显示我们注册的新用户和看到一个Log off的链接。

img_318dc4edf215e552d48c8b4f6b0edb06.png

应用部署到Azure

Right-click on the project in Solution Explorer and select Publish....

在Solution Explorer右键项目,点击Publish

img_3d8db3e0f4b765b3772d1fb95e85431b.png

In the Publish dialog, tap Microsoft Azure App Service.

在Publish对话框中,点击Microsoft Azure App service.

Tap New... to create a new resource group. Creating a new resource group will make it easier to delete all the Azure resources you create in this tutorial.

点击New创建一个新的资源组。创建新的资源组可以方便你删除所有在Azure上创建的范例资源。

img_6f547348653555f8fea1bf4955eb94a5.png

Create a new resource group and app service plan:

添加一个新的Resource group和app service plan:

  • Tap New... for the resource group and enter a name for the new resource group

  • 在resource group点击New,然后为这个资源组取名

  • Tap New... for the app service plan and select a location near you. You can keep the default generated name

  • 在app service plan点击New,选择一个

  • Tap Explore additional Azure services to create a new database

  • 点击Explore additional Azure services去创建一个新的数据库

img_78cd2e4fb1faa88158e7df5b64d049c1.png

  • Tap the green + icon to create a new SQL Database
  • 点击绿色的加号图标创建一个新的Sql数据库

img_bbb4356ab102c5e7325cbfd7f60e9613.png

  • Tap New... on the Configure SQL Database dialog to create a new database server.
  • 在Configure Sql Database对话框中点击New创建一个新的数据库

img_8a87f4656e8e852a4d107f910796e967.png

  • Enter an administrator user name and password, and then tap OK. Don't forget the user name and password you create in this step. You can keep the default Server Name
  • 输入一个管理员名和密码,点击OK。不要忘记你设置的用户名和密码。ServerName可以保持默认的。

img_f20a4cde1694cb3f7db26645b0d63581.png

  • Tap OK on the Configure SQL Database dialog
  • 在Configure SQL Database对话框点击OK

img_6e9abe6469680bcfeaa673dca2436979.png

  • Tap Create on the Create App Service dialog
  • 在Creat App Service对话框点击Create

img_034a16afea0027af249323296421a677.png

  • Tap Next in the Publish dialog
  • 在Publish对话框点击Next

img_c9ed87ccde5e2f7f15a18dab83b4aa93.png

  • On the Settings stage of the Publish dialog:

  • 点击Publish对话框的Settings标签

    • Expand Databases and check Use this connection string at runtime

    • 扩展Databases,选中Use this connection string at runtime

    • Expand Entity Framework Migrations and check Apply this migration on publish

    • 扩展Entity Framework Migrations,选中Apply this migration on publish

  • Tap Publish and wait until Visual Studio finishes publishing your app

  • 点击Publish,等待Visual Studio完成发布你的应用。

img_f6080e3a183a7cc91ac400243571554c.png

Visual Studio will publish your app to Azure and launch the cloud app in your browser.

Visual Studio会在发布到Azure后通过浏览器打开你在云端部署的应用。

在Azure上测试你的应用

  • Test the About and Contact links

  • 测试About和Contact链接

  • Register a new user

  • 注册一个用户

img_789434276211d988c089ebc29d4643e1.png

更新应用

  • Edit the Views/Home/About.cshtml Razor view file and change its contents. For example:
  • 编辑Views/Home/About.cshtml文件,修改它。参考:
@{
       ViewData["Title"] = "About";
   }
   <h2>@ViewData["Title"].</h2>
   <h3>@ViewData["Message"]</h3>

   <p>My updated about page.</p>
  • Right-click on the project and tap Publish... again
  • 再次右键项目点击Publish

img_3d8db3e0f4b765b3772d1fb95e85431b.png

  • After the app is published, verify the changes you made are available on Azure
  • 发布后,检查下在Azure端的应用是否改变

清除应用

When you have finished testing the app, go to the Azure portal and delete the app.

当你完成测试后,去Azure后台删除这个应用。

  • Select Resource groups, then tap the resource group you created
  • 选择Resource groups,然后选中你创建的资源组

img_25a21c7c53f4125c7e5a46b3b1498bee.png

  • In the Resource group blade, tap Delete
  • 在Resource group选项卡中,点击Delete

img_7c5673f927251320818542d9ba775b23.png

  • Enter the name of the resource group and tap Delete. Your app and all other resources created in this tutorial are now deleted from Azure
  • 输入资源组名点击Delete。你的应用和创建的资源在Azure中将会被删除。

原文链接

https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/publish-to-azure-webapp-using-vs

相关文章
|
2月前
|
开发框架 .NET C#
ASP.NET Core Blazor 路由配置和导航
大家好,我是码农刚子。本文系统介绍Blazor单页应用的路由机制,涵盖基础配置、路由参数、编程式导航及高级功能。通过@page指令定义路由,支持参数约束、可选参数与通配符捕获,结合NavigationManager实现页面跳转与参数传递,并演示用户管理、产品展示等典型场景,全面掌握Blazor路由从入门到实战的完整方案。
270 6
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
4月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
372 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
5月前
|
Java 应用服务中间件 Docker
java-web部署模式概述
本文总结了现代 Web 开发中 Spring Boot HTTP 接口服务的常见部署模式,包括 Servlet 与 Reactive 模型、内置与外置容器、物理机 / 容器 / 云环境部署及单体与微服务架构,帮助开发者根据实际场景选择合适的方案。
213 25
|
5月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
386 0
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
197 1
|
7月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
282 7
|
7月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
|
2月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
265 4
|
6月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!