Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用 ASP.NET 5 實戰開發雲端應用程式

3,637 views

Published on

此份簡報是 Will 保哥在【2015 Microsoft Azure 平台開發者大會 - OPEN X OPEN 從開放走向開源】的演講內容。

當天的 Demo 原始碼放在 GitHub 上:
https://github.com/doggy8088/ASPNET5Demo

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

使用 ASP.NET 5 實戰開發雲端應用程式

  1. 1. 使用 ASP.NET 5 實戰開發雲端應用程式 多奇數位創意有限公司 技術總監 黃保翕 (Will保哥) ASP.NET/IIS MVP
  2. 2. 今日主題 使用 ASP.NET 5 實戰開發雲端應用程式 01 | ASP.NET 5 簡介 05 | ASP.NET 5 與 Azure Web App 02 | ASP.NET 5 專案範本介紹 03 | ASP.NET 5 執行生命週期 04 | Visual Studio 2015 開發工具支援
  3. 3. ASP.NET 5 簡介 Introducing ASP.NET 5
  4. 4. ASP.NET 5 最時尚的網站開發技術 編輯器與開發工具 開放原始碼 真正跨平台OSS 地面與雲端部署無縫接軌 更快的部署週期完全模組化 跑得更快
  5. 5. 哪些產品線開放原始碼?
  6. 6. ASP.NET 5 明顯的改變 • 沒有 bin 目錄 • 沒有 web.config 檔案 • 沒有 global.asax 檔案 • 新版的 ASP.NET 錯誤頁面 • 修改 C# 檔案不用手動編譯,支援全新的C# 6.0 語言特性 • 所有的服務都改用 DI 方式自動注入 • ASP.NET MVC 6 內建 TagHelpers • 專案新增 wwwroot 靜態檔案資料夾 • 整合著名前端工具 bower, npm, grunt, gulp • RIP: ASP.NET Web Form
  7. 7. ASP.NET 版本的概念 • ASP.NET MVC ~ 5 • ASP.NET Web Form ~ 4.6 – .NET Framework ~ 4.6 • ASP.NET 5 • ASP.NET MVC 6 – .NET Framework ~ 4.6 – .NET Core 5
  8. 8. ASP.NET 5 專案範本介紹 Introducing ASP.NET 5 Project Templates
  9. 9. 專案範本介紹 • Empty • Web API • Web Site
  10. 10. Empty 範本 (1/2) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public void Configure(IApplicationBuilder app) { app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); }
  11. 11. Empty 範本 (2/2) • 預設載入的 NuGet 套件 – Microsoft.AspNet.Server.IIS – Microsoft.AspNet.Server.WebListener • project.json "dependencies": { "Microsoft.AspNet.Server.IIS": "1.0.0-beta4", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4", },
  12. 12. Web API 範本 (1/4) • ASP.NET 5 統一 MVC 與 Web API 的開發模型 [Route("api/[controller]")] public class ValuesController : Controller { // GET: api/values [HttpGet] public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; }
  13. 13. Web API 範本 (2/4) • 預設載入的 NuGet 套件 – Microsoft.AspNet.Mvc – Microsoft.AspNet.StaticFiles • project.json "dependencies": { "Microsoft.AspNet.Mvc": "6.0.0-beta4", "Microsoft.AspNet.Server.IIS": "1.0.0-beta4", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4", "Microsoft.AspNet.StaticFiles": "1.0.0-beta4" },
  14. 14. Web API 範本 (3/4) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public void ConfigureServices(IServiceCollection services) { services.AddMvc(); // 取消以下註解可讓你的 Web API 相容於第二版 // 你需要加入 Microsoft.AspNet.Mvc.WebApiCompatShim 套件 // services.AddWebApiConventions(); }
  15. 15. Web API 範本 (4/4) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // Configure the HTTP request pipeline. app.UseStaticFiles(); // Add MVC to the request pipeline. app.UseMvc(); // Add the following route for porting Web API 2 controllers. // routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}"); }
  16. 16. Web Site 範本 (1/5) • ASP.NET 5 統一 MVC 與 Web API 的開發模型 public class HomeController : Controller { public IActionResult Get() { return View(); }
  17. 17. Web Site 範本 (2/5) • 預設載入的 NuGet 套件 "dependencies": { "EntityFramework.SqlServer": "7.0.0-beta4", "EntityFramework.Commands": "7.0.0-beta4", "Microsoft.AspNet.Mvc": "6.0.0-beta4", "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta4", "Microsoft.AspNet.StaticFiles": "1.0.0-beta4", "Microsoft.Framework.ConfigurationModel.Json": "1.0.0-beta4", "Microsoft.Framework.ConfigurationModel.UserSecrets": "1.0.0-beta4", "Microsoft.Framework.Logging": "1.0.0-beta4", "Microsoft.Framework.Logging.Console": "1.0.0-beta4", "Microsoft.VisualStudio.Web.BrowserLink.Loader": "1.0.0-beta4", }
  18. 18. Web Site 範本 (3/5) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public Startup(IHostingEnvironment env) { var configuration = new Configuration() .AddJsonFile("config.json") .AddJsonFile($"config.{env.EnvironmentName}.json", optional: true); if (env.IsEnvironment("Development")) { configuration.AddUserSecrets(); } configuration.AddEnvironmentVariables(); Configuration = configuration; }
  19. 19. Web Site 範本 (4/5) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public void ConfigureServices(IServiceCollection services) { // Add Application settings to the services container. services.Configure<AppSettings>(Configuration.GetSubKey("AppSettings")); // Add MVC services to the services container. services.AddMvc(); // services.AddWebApiConventions(); }
  20. 20. Web Site 範本 (5/5) • Web 應用程式的進入點:Startup 類別 ( Startup.cs ) public void Configure(IApplicationBuilder app) { // 設定 HTTP 要求管線 (順序很重要) app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller}/{action}/{id?}", defaults: new { controller = "Home", action = "Index" }); }); }
  21. 21. ASP.NET 5 執行生命週期 Introducing ASP.NET 5 Pipeline
  22. 22. 應用程式啟動 ( Startup.cs ) • Startup() – 設定參數來源 • ConfigureServices() – 設定服務相依性注入 • Configure() – 設定 HTTP 要求管線流程
  23. 23. ASP.NET 5 執行生命週期
  24. 24. ASP.NET 5 預設錯誤頁面 • 傳統的 ASP.NET 錯誤頁面已不復存在 • ASP.NET 5 預設錯誤頁面由 Hosting Environment 提供 • 不同的宿主環境可能會顯示不同的錯誤頁面!
  25. 25. ASP.NET 5 預設錯誤頁面 The Default ASP.NET 5 Error Page
  26. 26. 使用 ASP.NET 5 提供的錯誤頁面 • 加入錯誤頁面的中間件 (Middleware) • 安裝 Microsoft.AspNet.Diagnostics 套件 • 設定 HTTP 要求管線流程 public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 記得載入 Microsoft.AspNet.Diagnostics 命名空間 (因為擴充方法) app.UseErrorPage(ErrorPageOptions.ShowAll); }
  27. 27. 使用 ASP.NET 5 提供的錯誤頁面 Microsoft.AspNet.Diagnostics
  28. 28. 顯示 wwwroot 目錄中的靜態檔案 • 加入顯示靜態檔案的中間件 (Middleware) • 安裝 Microsoft.AspNet.StaticFiles 套件 • 設定 HTTP 要求管線流程 public void Configure(IApplicationBuilder app) { app.UseStaticFiles(); }
  29. 29. 加入顯示靜態網頁的中間件 Microsoft.AspNet.StaticFiles
  30. 30. ASP.NET MVC 6 新功能 ASP.NET MVC 6 New Features
  31. 31. TagHelpers
  32. 32. @inject @inject IOptions<AppSettings> AppSettings <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewBag.Title - @AppSettings.Options.SiteTitle</title>
  33. 33. Views_GlobalImport.cshtml @using WebSite @using WebSite.Models @using Microsoft.Framework.OptionsModel @using Microsoft.AspNet.Identity @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
  34. 34. VISUAL STUDIO 2015 開發工具支援 Visual Studio 2015 Enterprise RC
  35. 35. 前端相依性套件管理 (Dependencies) • Bower - A package manager for the web – 自動維護相依性 – Uninstall Package – Update Package – 編輯 bower.json 支援 Intellisense • NPM - node package manager – 自動維護相依性 – Uninstall Package – Update Package – 編輯 package.json 支援 Intellisense • Gulp – 編輯 gulpfile.js 支援 Intellisense
  36. 36. 參考組件與 NuGet 套件管理 (References) • 加入參考 • 加入專案參考 • 加入服務參考 • NuGet 套件管理員 • 手動調整 project.json 支援 Intellisense • 手動調整 global.json 支援 Intellisense
  37. 37. 將 ASP.NET MVC 6 原始碼加入偵錯 git clone https://github.com/aspnet/Mvc.git { "projects": [ "src", "test", "../Mvc/src" ], "sdk": { "version": "1.0.0-beta4-11566" } }
  38. 38. ASP.NET 5 專案屬性 - Application
  39. 39. ASP.NET 5 專案屬性 - Build
  40. 40. ASP.NET 5 專案屬性 - Debug
  41. 41. ASP.NET 5 與 AZURE WEB APP ASP.NET 5 and Azure Web App
  42. 42. Web 單鍵發行 (Web One Click Publish) • 單鍵發行三部曲 – 下載發行設定檔 (Publish Profile) – 從 Visual Studio 2013 匯入發行設定檔 – 透過 Kudu 查看部署的檔案內容 http://sitename.scm.azurewebsites.net/
  43. 43. 在 Azure Web App 設定環境變數 • Web 應用程式  設定  應用程式設定 • 索引鍵:ASPNET_ENV (此名稱之後會改變) • 值: – Development – Staging – Production
  44. 44. ASP.NET 5 相關連結 • ASP.NET 5 官網 http://www.asp.net/vnext • ASP.NET 5 官方文件 http://docs.asp.net/ • ASP.NET 5 公告規格重大變更的地方 https://github.com/aspnet/Announcements/issues • ASP.NET 5 開放原始碼首頁 https://github.com/aspnet/home • ASP.NET 5 Wiki Documentation https://github.com/aspnet/Home/wiki
  45. 45. 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 – http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) – http://www.facebook.com/will.fans • Will 保哥的噗浪 – http://www.plurk.com/willh/invite

×