此份簡報是 Will 保哥在【2015 Microsoft Azure 平台開發者大會 - OPEN X OPEN 從開放走向開源】的演講內容。 當天的 Demo 原始碼放在 GitHub 上： https://github.com/doggy8088/ASPNET5Demo

1. 使用 ASP.NET 5 實戰開發雲端應用程式
多奇數位創意有限公司
技術總監 黃保翕 (Will保哥)
ASP.NET/IIS MVP

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. ASP.NET 5 簡介
Introducing ASP.NET 5

4. ASP.NET 5 最時尚的網站開發技術
編輯器與開發工具
開放原始碼 真正跨平台OSS
地面與雲端部署無縫接軌
更快的部署週期完全模組化
跑得更快

5. 哪些產品線開放原始碼？

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. 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. ASP.NET 5 專案範本介紹
Introducing ASP.NET 5 Project Templates

9. 專案範本介紹
• Empty
• Web API
• Web Site

10. Empty 範本 (1/2)
• Web 應用程式的進入點：Startup 類別 ( Startup.cs )
public void Configure(IApplicationBuilder app)
{
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}

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. 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. 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. Web API 範本 (3/4)
• Web 應用程式的進入點：Startup 類別 ( Startup.cs )
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
// 取消以下註解可讓你的 Web API 相容於第二版
// 你需要加入 Microsoft.AspNet.Mvc.WebApiCompatShim 套件
// services.AddWebApiConventions();
}

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. Web Site 範本 (1/5)
• ASP.NET 5 統一 MVC 與 Web API 的開發模型
public class HomeController : Controller
{
public IActionResult Get()
{
return View();
}

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. 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. 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. 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. ASP.NET 5 執行生命週期
Introducing ASP.NET 5 Pipeline

22. 應用程式啟動 ( Startup.cs )
• Startup()
– 設定參數來源
• ConfigureServices()
– 設定服務相依性注入
• Configure()
– 設定 HTTP 要求管線流程

23. ASP.NET 5 執行生命週期

24. ASP.NET 5 預設錯誤頁面
• 傳統的 ASP.NET 錯誤頁面已不復存在
• ASP.NET 5 預設錯誤頁面由 Hosting Environment 提供
• 不同的宿主環境可能會顯示不同的錯誤頁面！

25. ASP.NET 5 預設錯誤頁面
The Default ASP.NET 5 Error Page

26. 使用 ASP.NET 5 提供的錯誤頁面
• 加入錯誤頁面的中間件 (Middleware)
• 安裝 Microsoft.AspNet.Diagnostics 套件
• 設定 HTTP 要求管線流程
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// 記得載入 Microsoft.AspNet.Diagnostics 命名空間 (因為擴充方法)
app.UseErrorPage(ErrorPageOptions.ShowAll);
}

27. 使用 ASP.NET 5 提供的錯誤頁面
Microsoft.AspNet.Diagnostics

28. 顯示 wwwroot 目錄中的靜態檔案
• 加入顯示靜態檔案的中間件 (Middleware)
• 安裝 Microsoft.AspNet.StaticFiles 套件
• 設定 HTTP 要求管線流程
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles();
}

29. 加入顯示靜態網頁的中間件
Microsoft.AspNet.StaticFiles

30. ASP.NET MVC 6 新功能
ASP.NET MVC 6 New Features

31. TagHelpers

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. Views_GlobalImport.cshtml
@using WebSite
@using WebSite.Models
@using Microsoft.Framework.OptionsModel
@using Microsoft.AspNet.Identity
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

34. VISUAL STUDIO 2015 開發工具支援
Visual Studio 2015 Enterprise RC

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. 參考組件與 NuGet 套件管理 (References)
• 加入參考
• 加入專案參考
• 加入服務參考
• NuGet 套件管理員
• 手動調整 project.json 支援 Intellisense
• 手動調整 global.json 支援 Intellisense

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. ASP.NET 5 專案屬性 - Application

39. ASP.NET 5 專案屬性 - Build

40. ASP.NET 5 專案屬性 - Debug

41. ASP.NET 5 與 AZURE WEB APP
ASP.NET 5 and Azure Web App

42. Web 單鍵發行 (Web One Click Publish)
• 單鍵發行三部曲
– 下載發行設定檔 (Publish Profile)
– 從 Visual Studio 2013 匯入發行設定檔
– 透過 Kudu 查看部署的檔案內容
http://sitename.scm.azurewebsites.net/

43. 在 Azure Web App 設定環境變數
• Web 應用程式  設定  應用程式設定
• 索引鍵：ASPNET_ENV (此名稱之後會改變)
• 值：
– Development
– Staging
– Production

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. 聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite