ASP.NET - 搭配 OmniSharp 和 Yeoman 隨處使用 ASP.NET 5

隨著開發團隊的工具選擇越來越多,架構也必須提供更多樣化的選擇。ASP.NET 5 已擁抱跨平台支援,包括透過開放原始碼工具 OmniSharp 與 Microsoft Azure 中 Docker 中的開發。在本文中,我們將告訴您如何在您選擇使用的平台上開始使用 ASP.NET 5 ,涵蓋所有需要使用 ASP.NET 5 的開發 Web 應用程式。

專案設定及執行可能很困難,現代 Web 應用程式的開發也有多種選擇,身為一位 Visual Studio 的使用者可能已使用過 IDE 內建的範本和工具,像是 Web Essentials 等協助踏出新專案的第一步,但不是使用 Windows 和 IDE 的例如 Visual Studio 的開發人員通常必須依賴像是 Yeoman 或 Node.js 來建構及建置 Web 應用程式的命令列工具,現在 ASP.NET 5 已經徹頭徹尾地改變,我們要讓所有開發人員有多種平台的選擇,可以不只針對您的 Windows 專案使用,還針對 Linux 與 OS X。以下是設定和建立專案從非 Windows 作業系統的觀點來使用 ASP.NET 5 的簡短介紹。

在此篇文章中,您可以看到:

     ●  設定環境

     ●  選擇編輯器

     ●  啟動您的第一個專案

     ●  編輯 ASP.NET

     ●  偵錯

     ●  部署   

     ●  總結


設定環境

需要幾個步驟以取得您的環境設定,此程序適用於 OS X 和 Linux,您可以在這裡查詢更詳細的說明。在本文中,我們假設大部分的人使用 OS X。

第一個步驟是安裝用來建置 ASP.NET 5 Web 應用程式的工具,最後 CoreCLR 將會是基底的執行階段架構,不過 ASP.NET 5 仍需要 Mono 的 Runtime 。若要安裝 Mono,使用 HomeBrew (brew.sh):

$ brew install mono

接下來,安裝.NET 版本管理員 (DNVM)、 一組命令列公用程式可以更新並設定.NET 執行環境 (DNX) 基本上是能夠使用.NET 核心 5 的跨平台開發 (docs.asp.net/en/latest/dnx/),若要從終端機安裝 DNVM 和 DNX,可以執行下列命令:

$ brew tap aspnet/dnx

$ brew update

$ brew install dnvm

現在您已安裝的 Mono 的 Runtime 再加上 DNVM 和 DNX,若要檢查 DNVM 版本,"$ dnvm"在輸入終端機中

選擇編輯器

如果使用 Windows系統,建議使用 Visual Studio,不過,在 OS X 或 Linux 上有其他選擇,從各種常用的編輯器例如 Subline、 Atom Emacs 、Vim 或者是 TextMate 之類的簡單文字編輯器,但現在對於跨平台開發編輯器,你有一個更好的選擇 – 微軟的 Visual Studio Code — 它不只是針對 ASP.NET 5 也針對 AngularJS、 Node.js 和一般的 JavaScript  開發所選擇的編輯器。

無論您決定使用哪一種工具,  OmniSharp ( omnisharp.net ) 能夠讓ASP.NET 5 在 OS X 和 Linux 上更出色,它隨附內建於 Visual Studio Code 中,其他編輯器都具有延伸模組或增益儲存機制提供您下載。

啟動您的第一個專案

若是沒有豐富的 Visual Studio 2015 開發環境,您必須在 OS X 仰賴不同的方法來開發 ASP.NET 5 應用程式,Yeoman 可讓您建置範本為基礎的專案或程式碼檔案的產生器的 Node.js 樣本平台,這是命令列公用程式,由於它建置在 Node.js,有幾個相容性的部分您需要注意。

開始前,請安裝 Node.js 和 node 封裝管理員 (NPM) ,您可以透過 HomeBrew 或是 nodejs.org

$ brew install node

當完成時,安裝使用 npm 的產生器:

$ npm install -g yo generator-aspnet

如果您未使用 Bower、 Grunt 或 Gulp,請一併下載這些工具,您會想要熟悉這些最新的現代開發工具。 

$ npm install -g bower grunt-cli gulp-cli

Bower 是前端的 Web 開發的封裝管理員和 Web 資源,例如 JavaScript 和 CSS 的儲存機制。Grunt 和 Gulp 是適用於執行指令碼和影像縮小以及 transpiling  ( TypeScript 或 CoffeeScript ) 等建置流程的工作執行程式庫。

這是您需要進行開發的設定,現在,若要開始新的專案類型,執行 “$ yo aspnet”  來初始化 Yeoman 產生器並選取您想要建立的專案

產生器完成後,選擇執行應用程式使用 Kestrel 跨平台 Web 伺服器,不過,您必須先安裝 npm、 Bower 和 NuGet 相依性,執行還原命令來取得這些資源:

$ cd [projectname]

$ dnu restore

此命令會下載所有 project.json 檔案中參考之專案的 NuGet 套件。

(我們也會執行 「 $ npm 安裝 」 和 「 $ bower 安裝 」 以確保 JavaScript 和 UI 元件資源是最新狀態,但這並非必要。)

接下來,執行命令以啟動 Kestrel:

$ dnx . kestrel

(請注意 ASP.NET 5 Beta 7 發行之後,此命令會變更以只是"dnx kestrel"。)

「 Started 」 會出現在終端機視窗且您的 word 能夠瀏覽至 https://localhost:5000/ 來檢視網站,此時已建立專案、 還原封裝以及執行沒有 Windows 或者 Visual Studio 的網站,接下來,您會在 Visual Studio Code 中開啟程式碼。

編輯 ASP.NET

如先前所述,Visual Studio Code 是跨平台開發的最佳編輯器,開啟任一一般專案方式或使用鍵盤快速鍵 "code "專案資料夾中。一旦您在 Visual Studio 程式碼中開啟來源資料夾,您可以開始開發應用程式。

 

如果您仔細看,您會看到第 2 行在游標旁邊的小燈泡,燈泡的 Visual Studio 中一樣可以用來執行快速是內容相關的動作。在此情況下,Visual Studio Code 會提供建議來移除不必要的 Using,現在讓我們將新檔案加入至您的專案。

若要將新檔案加入至 ASP.NET 5 專案,您不需要執行任何特殊動作,只要將檔案加入至目錄和系統就會自動將包含在內,在程式碼中您可以使用在樹狀檢視或 Ctrl + N [新增檔案] 按鈕以加入新的空白檔案,如果您想要開始使用一些初始內容,您可以使用 "yo aspnet“ ,若您想將檔案新增至現有的 ASP.NET 5 專案,可以使用下列語法:

$ yo aspnet:<Name> <options>

要示範這種情況,我們先新增新的 MVC 控制器和檢視新的 [管理] 頁面的 Web 應用程式,我們將新增 MVC 控制器,Yo aspnet 執行時,它會將檔案加入目前的工作目錄,因此您會想要在執行命令之前 cd 至正確的目錄。若要加入 MVC 控制器,請在 Controllers 資料夾中執行下列命令:

yo aspnet:MvcController AdminController

執行此命令之後, 您會看到新的檔案,Hello.cs、 目前工作目錄中所示的內容中。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNet.Mvc;

// For more information on enabling MVC for empty projects, visit

// go.microsoft.com/fwlink/?LinkID=397860

namespace MyNamespace

{

  public class AdminController : Controller

  {

    // GET: /<controller>/

    public IActionResult Index()

    {

      return View();

    }

  }

}

檔案看起來就像當您在 Visual Studio 使用 File | New Item 和選取 MVC 控制器,除了在這裡的命名空間名稱的新項目並不會自動更新。它是硬式編碼為 MyNamespace。現在您將需要更新命名空間來達到你的期望,但這將在未來版本中陸續更新,MvcController 子產生器只是其中一個提供的許多子產生器的 yo aspnet,若要查看子產生器的完整清單,您可以執行:

$ yo aspnet --help

子產生器在 yo aspnet 相當於 Visual Studio 中的項目範本時的使用檔案 |加入新項目。若要加入檢視,請使用 MvcView 子產生器,若要加入管理檢視,請從 [檢視] 資料夾執行下列命令:

$ yo aspnet:MvcView Index

產生的檢視 Index.cshtml,是很基本的:

@*

  // For more information on

  // enabling MVC for empty projects,

  // visit bit.ly/1PBdyKc

*@

@{

  // ViewBag.Title = "Index Page";

}

同樣地,使用 yo aspnet 所產生的內容就相當於 Visual Studio 中的 [加入新項目] 對話方塊。Index.cshtml 檔案中您可以加入標題讓您可以瀏覽到這個頁面並確認一切運作:

<h1>Admin Page</h1>

現在讓我們來看看我們要如何建置並執行此應用程式。

先前提過可以使用命令"dnx。kestrel"來執行應用程式。如果您使用程式碼可以開始使用命令調色盤中所示的 Web 伺服器。

當您使用程式碼時,每當來源檔案變更時,使用 OmniSharp 幕後建置專案。若要查看任何錯誤和警告在程式碼中如下

您也可以從命令列建置專案,假設新的 AdminController 類別有建置錯誤,若要建立命令列上的應用程式,執行:

$ dnu build

這會示範相同的錯誤和警告的程式碼,既然您已了解如何建置並執行您的應用程式,讓我們繼續簡短討論一下偵錯和部署。

偵錯

目前除了 Windows 和 Visual Studio 以外的其他平台,都不支援 ASP.NET 5 偵錯,這表示您無法偵錯 ASP.NET 5 在 OS X 或 Linux的應用程式,ASP.NET 5 應用程式會使用 Roslyn complier,而非 Mono complier,也就不會發出任何偵錯資訊。Visual Studio Code 尚未支援偵錯,但您可以隨時使用 Visual Studio 的虛擬機器在您的 Mac 或 Linux 裝置,希望 Visual Studio Code 在 CoreCLR 發行之後能夠提供支援偵錯。

部署

您將了解如何開發您的應用程式,現在讓我們很快地來看一下裝載選項,本主題的詳細的檢查需要它自己的發行項,因此我們只是要呈現的高階概觀再指引您前往一些外部資源,請瀏覽 bit.ly/1fvDQ41 的最新資訊。

概括而言,以下是 ASP.NET 5 的發行選項:

  • 使用"dnu 發佈 」 命令列公用程式的命令列發行
  • 發行至 Azure Web 應用程式使用 Git
  • 發行至 Azure 中執行的 Docker Container

dnu 發佈命令列位於每個發行方法的中心,它會封裝在應用程式中執行的 Web 伺服器的格式,讓我們仔細看。

若要開始並以查看可用的命令列選項執行:

dnu publish –help

最重要的命令列選項--外 (-o) 引數可讓您指定要發行您的檔案的資料夾。但是您也會想要探索所需的其他選項。

一旦您已發行的應用程式的資料夾,您只需要將該資料夾複製到您的 Web 伺服器。如果您要發行到一部執行 IIS 的 Windows 電腦,可以設定網站隨手取得。如需如何取得在 Linux 上設定 Web 伺服器資訊,請參閱這裡

如果您要發行至 Azure,有些支援工具能提供您參考,Azure 支援 ASP.NET 5 應用程式在 Azure Web 應用程式和 Docker Container 中。若要從非 Windows 電腦部署 Azure Web 應用程式,您可以使用 FTP 或 Git。FTP 案例中,您發行的 dnu 發布結果可以參閱這裡 。

以 Git 為基礎發行模型而言不僅簡單易用而且可以支援連續的部署案例,若要使用 Git 發行至 Azure Web 應用程式,請參閱這裡。這是您要開發在您所選擇的平台上執行 ASP.NET 5 應用程式所需瞭解的資訊。

總結

以前要開發 asp.net Web 應用程式,您必須使用 Windows 和 Visual Studio 系統,現在您可以在任何平台上使用 ASP.NET 5 和相關的命令列公用程式和工具,這只是開始,我們會陸續進步,敬請期待 ASP.NET 5 的最新消息,欲知更多請造訪這裡。Yo aspnet 專案是完全以社群導向。

TechDays 2015 相關課程  -  ASP.NET 5 開發攻略