DEV305 - ASP.NET 5 開發攻略

1. 多奇數位創意有限公司技術總監黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/

2. Introducing ASP.NET 5 介紹 ASP.NET 5

3. • 跨平台 • 使用 .NET 技術 • 開放原始碼 (GitHub) • 可建構雲端應用程式 • 可部署到雲端或本地環境 • 使用模組化的 CoreFX 框架 • 一套全新且重新打造的 ASP.NET 框架什麼是 ASP.NET 5

4. • 歷史包袱 • ASP.NET 1.0 是 15 年前打造的框架 • ASP.NET 5 不再使用 System.Web.dll 組件 • 整合 MVC, Web API 與 WebForms 框架，去蕪存菁 • 雲端狂潮 • 最佳化模組載入與使用，並以最小資源執行 Web 應用程式 • ASP.NET 5 實現輕量且模組化的 HTTP 要求管線 • ASP.NET 5 使用 NuGet 載入必要的 CoreFX • ASP.NET 5 可執行在任意 self-host 環境 (IIS, Kestrel, …) • 現有 Web 開發主流 • 開放原始碼與跨平台 • 明顯區分前端開發與後端開發 • 使用相依性注入 (Dependency injection) 為什麼要建構 ASP.NET 5

5. Installing ASP.NET 5 Beta 7 安裝 ASP.NET 5 Beta 7

6. • ASP.NET and Web Tools 2015 (Beta7) • 安裝 beta7 版本 (14.0.60831.0) http://go.microsoft.com/fwlink/?LinkId=623894 • 下載並安裝 .NET Version Manager (DNVM) DotNetVersionManager-x64.msi • 若為 Visual Studio 2015 (Community, Professional, Enterprise) • 下載並安裝 WebToolsExtensionsVS14.msi • 下載並安裝 WebToolsExtensionsVSLP14_cht.msi • 若為 Visual Studio 2015 Express for Web • 下載並安裝 WebToolsExtensionsVWD14.msi • 下載並安裝 WebToolsExtensionsVWDLP14_cht.msi 安裝必要工具 ( Windows )

7. • Installing ASP.NET 5 On Mac OS X • 安裝 1.0.0-beta7 版本 http://docs.asp.net/en/1.0.0-beta7/getting- started/installing-on-mac.html • 下載並安裝 .NET Version Manager (DNVM) curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvmin stall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh • 下載並安裝 .NET Execution Environment (DNX) (無須 Mono 相依) • DNX for .NET Core dnvm upgrade -r coreclr • 增加 NuGet 套件來源 ~/.config/NuGet/NuGet.Config 安裝必要工具 ( Mac OS X ) • DNX for Mono dnvm upgrade -r mono

8. • Installing ASP.NET 5 On Linux • 安裝 1.0.0-beta7 版本 http://docs.asp.net/en/1.0.0-beta7/getting- started/installing-on-linux.html • 下載並安裝 .NET Version Manager (DNVM) (與 Mac 相同指令) • 下載並安裝以下套件 • libunwind8, gettext, libssl-dev, libcurl3-dev, zlib1g • libuv ( 因為 Kestrel 會用到 ) • 下載並安裝 .NET Execution Environment (DNX) (無須 Mono 相依) • DNX for .NET Core dnvm upgrade -r coreclr • 增加 NuGet 套件來源 ~/.config/NuGet/NuGet.Config 安裝必要工具 ( Linux ) • DNX for Mono dnvm upgrade -r mono

9. • 重要觀念 • ASP.NET 5 基於 .NET Execution Environment (DNX) 打造 • DNX 是一個微軟官方支援的跨平台支援 .NET 執行環境 (Win, Mac, Linux) • 可選版本 • .NET Framework (CLR) • 擁有完整的元件與大量的 API 與較慢的發行週期 • .NET 4.6 可在線上瀏覽完整原始碼 • 只能跑在 Windows 作業系統 • .NET Core (CoreCLR) • 為 .NET 4.6 的子集合，擁有較少的 API 支援，但支援跨平台執行，也可執行在資源受限的執行環境中 ( 例如 Windows Server Nano ) • .NET Core 包含一組函式庫稱為 "CoreFX"，並統一由 NuGet 發佈 • 目前 Windows 平台已有完整功能實作，而 Linux, OS X 還在持續開發中 • 現有的 .NET 專案若要跑在 CoreCLR 上，必須重新編譯 • Mono • 支援跨平台的完整 .NET Framework 實作，開源原始碼，但微軟官方不支援選擇正確的 .NET 版本

10. • 從這版開始不再「主動」新增功能 • 專注於讓 ASP.NET 5 進入穩定狀態、工具支援 • 除非有人提出重要的建議： https://github.com/aspnet/Home/issues • ASP.NET 5 Beta 8 預計在 2015/10/05 釋出！ • 開發伺服器 • 會移除 Helios 專案 • Microsoft.AspNet.Server.IIS (Windows) • 會專注在以下兩項專案 • Microsoft.AspNet.Server.WebListener (Windows) • Microsoft.AspNet.Server.Kestrel (跨平台) 關於 ASP.NET 5 Beta 8

11. Creating your first ASP.NET 5 project 建立 ASP.NET 5 專案

12. • 安裝 Node.js • npm install -g yo • npm install -g generator-aspnet • yo aspnet • cd WebApplication • dnu restore • dnu build (非必要步驟) • dnx web 建立專案 ( 使用 yo 工具 )

13. 建立專案 ( 使用 VS2015 工具 )

14. • 修改任何檔案，不再需要事先建置 • 優點：更流暢的開發體驗 • 缺點：會有不知道何時編譯完成的不確定感 • 前端與後端的分工與整合 • ASP.NET 5 從純後端技術，轉向整合更多前端工程 • ASP.NET 5 整合許多常見的前端技術與前端工具 • 技術：Less, Sass, Font Awesome, TypeScript, RWD, … • 框架：Bootstrap, Knockout.js, AngularJS, ReactJS, … • 工具：Gulp, Grunt, npm, Bower, Yeoman, … 全新的 .NET 執行環境與開發環境

15. • HomeController.About() • ViewBag.EnvName = Environment.MachineName; • ViewBag.Software = Environment.OSVersion.ToString(); • 編譯專案 ( F6 ) • 修正錯誤 • 移除 project.json 裡面的 frameworks 裡面的 dnxcore50 修改 Controller 與編譯專案

16. The ASP.NET 5 project template 專案內容介紹

17. • 一樣有 *.sln 方案檔 • WebApplication1.sln • 專案的 NuGet 定義檔 • NuGet.Config • 方案定義 • global.json • 定義專案目錄 • 會自動匯入 *.sln 方案檔 • 定義 SDK 版本 ASP.NET 5 方案設定 { "projects": [ "src", "test" ], "sdk": { "version": "1.0.0-beta7" } }

18. • 改用 *.xproj 專案檔 • ASP.NET 5 取消 *.csproj 定義專案 (使用正向表列檔案) • ASP.NET 5 改用 *.xproj 定義專案 (改用負向表列檔案) • 所有專案項目都改採「自動掃描」的方式匯入專案 • 優點：不再需要手動加入專案，減少檔案忘記加入版控的問題 • 缺點：需要不斷掃描是否有新檔案加入專案 • 許多專案設定都移到 project.json 設定檔 • https://github.com/aspnet/Home/wiki/Project.json-file ASP.NET 5 專案設定

19. • ASP.NET 5 專案設定檔 • 摘要說明 • ASP.NET 5 已改用 project.json 定義專案 (現在改用負向表列專案檔案) • 此檔案是 JSON 格式，其內容會與 Gulp 共用 (透過 Node.js 載入) • 重要屬性 • webroot • 定義網站根目錄位置 (所有靜態檔案) • userSecretsId • 定義網站的 "使用者秘密ID" • 同主機每個網站應用程式都不能重複 • version • 定義目前 ASP.NET 5 應用程式版本 • commands • 設定 dnx 的自訂命令 project.json • dependencies • 設定專案要載入哪些套件 • frameworks • 設定特定執行框架下 (Runtime Framework) 要載入哪些套件 • exclude • 哪些資料夾或檔案要排除編譯範圍 • publishExclude • 哪些資料夾在發布時要排除在外 • scripts • 設定 dnu 的事件動作

20. • ASP.NET 5 參數設定檔 • 摘要說明 • 類似之前 web.config 中的 appSettings 設定 • 這裡定義著應用程式執行過程所需的參數，例如連接字串 • 由於檔案是 JSON 格式，因此可以自由添加任何所需參數 • 這裡的 JSON 參數設定完全沒有限制，不一定要按照預設的下去設定 config.json

21. • ASP.NET 5 開發伺服器設定檔 • 摘要說明 • 這裡定義 ASP.NET 5 開發伺服器所需的參數定義 • 設定說明 • server=Microsoft.AspNet.Server.WebListener • 定義伺服器種類 • 可能的選項有： • Microsoft.AspNet.Server.Kestrel • "Microsoft.AspNet.Server.Kestrel": "1.0.0-beta7" • Microsoft.AspNet.Server.WebListener • "Microsoft.AspNet.Server.WebListener": "1.0.0-beta7", • server.urls=http://localhost:5000 • 定義伺服器的啟動 URL 與 Port hosting.ini

22. • ASP.NET 5 專案的進入點 • Startup() 建構式 • 注入物件 • IHostingEnvironment env • 宿主環境變數 • 提供環境名稱(EnvironmentName)、網站根目錄位置(WebRootPath)等資訊 • IApplicationEnvironment appEnv • 應用程式環境變數 • 提供應用程式名稱、路徑、版本、執行框架等資訊 • 定義設定檔來源 • AddJsonFile("config.json") • AddCommandLine(args) • AddEnvironmentVariables() • AddIniFile("config.ini") • AddInMemoryCollection() • AddUserSecrets() Startup.cs 1/3 • 公開屬性：Configuration • 用於共享設定資訊於類別之中

23. • ASP.NET 5 專案的進入點 • ConfigureServices() 方法 • 注入物件 • IServiceCollection services • 用來記錄那些服務要被加入到 ASP.NET 5 容器內的重要物件 • 因為一個 ASP.NET 5 應用程式會包含多個「服務」並在此被註冊進去 • 註冊服務 • Add*() 增加服務到集合裡 • Configure<T>() 設定特定服務選項 • AddTransient<T1, T2>() 註冊自訂的應用程式服務物件 • 重要觀念 • 「服務」是 ASP.NET 5 的模組化元件 Startup.cs 2/3

24. • ASP.NET 5 專案的進入點 • Configure() 方法 • 注入物件 • IApplicationBuilder app • 用來建立應用程式執行管線 (Execution Pipeline) 的重要物件 • IHostingEnvironment env • 宿主環境變數 • 提供環境名稱(EnvironmentName)、網站根目錄位置(WebRootPath)等資訊 • ILoggerFactory loggerFactory • ASP.NET 5 內建的 Logger 物件，用來設定 Logger 的紀錄方式 • 使用服務 • Use*() 使用服務 • UseMvc() 使用 ASP.NET MVC 6 服務，路由 (Routing) 也改從這裡宣告 • 注意事項 • 這個方法會決定 ASP.NET 5 執行時期的執行管線 (Execution Pipeline) 的順序 • 這裡執行順序很重要，必須想清楚你要如何處理每一個 HTTP 要求 Startup.cs 3/3

25. • package.json • npm 設定檔 • bower.json • Bower 設定檔 • gulpfile.js • Gulp 工作定義檔前端工程相關檔案

26. The Main Concepts about ASP.NET 5 重要觀念解析

27. • ASP.NET 5 的模組化以「服務」為中心 • 要在 ASP.NET 5 中使用這些元件，必須靠 DI (相依性注入) • ASP.NET 5 內建 IoC (控制反轉) 容器，也可抽換成其他的 IoC • ASP.NET 5 預設可讓類別建構式注入服務元件 • 服務區分三種類型 • Singleton 每次 Web 應用程式啟動會只會建立一個實體 • services.AddSingleton<IMyApp, MyApp>(); • Scoped 每次 HTTP 要求都會建立一次實體 • services.AddScoped<IMember, Member>(); • Transient 每次執行注入都會建立全新實體 • services.AddTransient<IEmailSender, AuthMessageSender>(); 服務元件 ( service components )

28. • ASP.NET 5 支援 Middleware 架構 • 可將元件依序套用到 HTTP 要求管線 (順序很重要) • 預設定義在 Startup 類別中的 Configure() 方法中介元件 ( Middleware )

29. • 看一下 Startup.cs 的 Configure() 方法 • 為何 loggerFactory.AddConsole(); 要擺在第一順位? • 為何 app.UseStaticFiles(); 要設定在app.UseIdentity(); 之前？ • 如果順序調換會怎樣？ • 如果加入 app.UseDirectoryBrowser(); 應該擺在哪裡？ • 每個 Middleware 到底在做甚麼？做了什麼事？有沒有文件? 思考題：套用 Middleware 順序

30. • Authentication • 提供身分驗證支援 • CORS • 設定 Cross-Origin Resource Sharing (CORS) • Diagnostics • 支援錯誤頁面顯示與執行時期資訊 • Routing • 定義路由與限制 • Session • 提供 Session 支援 • Static Files • 提供 wwwroot (網站根目錄) 下的靜態檔案 ASP.NET 5 內建的 Middleware

31. • ASP.NET 5 可依據不同環境套用不同設定 • 指定 ASPNET_ENV 環境變數 • Development • Staging • Production • 專案設定 • launchSettings.json 多重執行環境

32. • SET ASPNET_ENV=LogInline • dnx web http://localhost:5000 自訂環境與 Middleware 範例

33. Learning Resources for ASP.NET 5 ASP.NET 5 學習資源

34. • ASP.NET 5 Documentation • http://docs.asp.net/en/1.0.0-beta7/ (1.0.0-beta7) • http://docs.asp.net/en/latest/ (最新版) • JabbR – AspNetvNext • https://jabbr.net/#/rooms/AspNetvNext (線上聊天室) • ASP.NET 5 專案 (GitHub) • https://github.com/aspnet/Home/issues (討論議題) • https://github.com/aspnet/Home/wiki (Wiki文件) • https://github.com/aspnet/Home/releases (版本資訊) • https://github.com/aspnet/Home/wiki/Roadmap(開發時程) • https://github.com/aspnet/Announcements/issues (公佈欄) 相關學習資源

35. • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 • http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) • http://www.facebook.com/will.fans • Will 保哥的噗浪 • http://www.plurk.com/willh/invite • Will 保哥的推特 • https://twitter.com/Will_Huang 聯絡資訊

36. © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. 只要完成「大會線上問卷」，可於活動期間於大會服務台兌換問卷禮哦！請協助完成「本課程線上問卷」，我們重視您的寶貴意見本課程影音及簡報檔未來將公布於 http://aka.ms/td2015 問卷網址 http://aka.ms/td2015-survey

37. TechDays 2015 課程影片及簡報檔載點 ( 將於九月底陸續釋出 ) aka.ms/td2015 免費線上課程及簡報檔下載 Channel 9 aka.ms/c9-learning MSDN 台灣 aka.ms/msdntw-fb TechNet 台灣 aka.ms/tntw-fb MVA mva.ms 開發人員社群 IT 專業人員社群 - 您不可不知的微軟四大核心學習資源 -

DEV305 - ASP.NET 5 開發攻略

Will Huang

DEV305 - ASP.NET 5 開發攻略