【翻译】使用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

相关文章
|
10月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
7月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
498 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
8月前
|
Java 应用服务中间件 Docker
java-web部署模式概述
本文总结了现代 Web 开发中 Spring Boot HTTP 接口服务的常见部署模式,包括 Servlet 与 Reactive 模型、内置与外置容器、物理机 / 容器 / 云环境部署及单体与微服务架构,帮助开发者根据实际场景选择合适的方案。
407 25
|
8月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
688 0
|
11月前
|
中间件 Go
Golang | Gin:net/http与Gin启动web服务的简单比较
总的来说,`net/http`和 `Gin`都是优秀的库,它们各有优缺点。你应该根据你的需求和经验来选择最适合你的工具。希望这个比较可以帮助你做出决策。
569 35
|
9月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
297 1
|
10月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
389 7
|
10月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
1226 12
|
中间件 关系型数据库 数据库
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
384 19
|
应用服务中间件 Linux nginx
部署使用 CHAT-NEXT-WEB 基于 Deepseek
本文介绍如何在阿里云轻量服务器上部署基于 `Deepseek` 的 `CHAT-NEXT-WEB` 项目。首先,准备一台 Linux 服务器并安装 Docker,确保防火墙允许特定端口访问。接着,通过阿里云容器镜像服务解决国内网络限制问题,将镜像推送到私有仓库并拉取到本地。配置并启动 `chat-next` 项目,使用 Deepseek API 进行优化。最后,安装 Nginx 和 Certbot 配置 HTTPS 访问,确保安全性和自动续签。整个过程需严格遵循官方文档,以避免因网络问题导致的安装失败。