[Asp.Net 5]使用Mac建立Asp.Net 5的MVC網站初體驗

微軟的Build 2015正如火如荼的進行中,在第一天的Keynote也公布了許多令人振奮的消息,其中特別吸引我注意的就是.Net Core跨平台(Windows, Linux, Mac),以及Visual Studio Code的公布(跨平台版本的Visual Studio),讓我們使用非Windows環境開發.Net程式的日子似乎不遠了!今天就要向大家介紹,如何在Mac上設定Asp.Net 5的開發環境,讓以往只能在Windows上執行的Asp.Net Mvc也能在Mac或Linux上開發囉!

微軟的Build 2015正如火如荼的進行中,在第一天的Keynote也公佈了許多令人振奮的消息,其中特別吸引我注意的就是.Net Core跨平台(Windows, Linux, Mac),以及Visual Studio Code的公佈(跨平台版本的Visual Studio),讓我們使用非Windows環境開發.Net程式的日子似乎不遠了!今天就要向大家介紹,如何在Mac上設定Asp.Net 5的開發環境,讓以往只能在Windows上執行的Asp.Net Mvc也能在Mac或Linux上開發囉!

p.s. 目前.Net Core和Visual Studio Code都還沒有正式的Release,在Mac上都還是Preview階段,未來操作步驟也有可能會有小幅度的變更,請大家注意喔!

環境需求

在設定Asp.Net 5的環境之前,為了讓安裝的過程更加的簡單,請大家先確保在Mac電腦上是否已經安裝了以下套件,來讓Asp.Net 5的安裝,和專案產生更加的簡單喔!

  1. Homebrew
  2. Node.js

安裝Asp.Net 5

請打開Terminal.app或你所慣用的終端機程式,按照順序輸入並執行以下指令,進行Asp.Net 5的安裝

    brew tap aspnet/dnx
    brew update
    brew install dnvm

安裝完畢之後,請將以下設定加入你的.bashrc,方便之後執行Asp.Net 5網站時指令的操作(如果你使用的是zsh,就是加入.zshrc)

    source dnvm.sh

如果都有設定成功,在Terminal輸入dnvm,應該可以看到以下畫面

dnvm

安裝Scaffolding套件

通常在Windows時,我們都是透過Visual Studio來建立一個新的Asp.Net Mvc專案,而目前在Mac中要新增一個Asp.Net 5的Mvc專案的話,可以透過node.js的generator-aspnet(base on yoeman)來產生一個空的Asp.Net Mvc專案,因此我們也要先安裝一些套件來幫助我們快速建立專案的框架,打開Terminal,輸入以下指令安裝generator-aspnet

    npm install -g yo grunt-cli generator-aspnet bower

建立Asp.Net 5的Mvc專案

到這邊為止,我們已經基本準備好了在Mac上開發Asp.Net 5的環境,接下來就要建立並執行我們在Mac上第一個Asp.Net 5的Mvc網站

  1. 打開Terminal,輸入以下指令,建立Mvc網站

    yo aspnet
    
  2. 這時候會看到詢問你要建立哪種專案,我們選擇Web Application

    yo aspnet

  3. 接著會詢問你專案的名稱,輸入專案的名稱Test (或你想要的專案名稱)

    test

  4. 然後應該可以看到檔案自動被產生

    generate

  5. 我們可以使用Visual Studio Code開啟剛剛建立的專案資料夾,開始進行Mvc網站的開發

    vscode

啟動網站

  1. 打開Terminal,切換到專案所在資料夾(就是你剛剛輸入的專案名稱)執行套件還原,輸入以下指令,可以看到專案所需的套件被還原

    dnu restore
    

    restore

  2. 到這邊為止,我們已經完成一個基本的Asp.Net 5的Mvc網站囉!輸入以下指令啟動網站

    dnx . kestrel
    
  3. 開啟瀏覽器,輸入http://localhost:5001,可以看到網站成功啟動囉!

異常排除

如果你開啟網站,看到下圖的錯誤訊息的話,這是由於mono的一個bug所產生的,也會在未來被修正,我們可以先按照幾個步驟來排除它,畢竟是Preview版,多少還會有一點點的小bug

error

  1. 打開Terminal,切換到專案資料夾,輸入以下指令

    export MONO_MANAGED_WATCHER=false
    
  2. 重新啟動網站

    dnx . kestrel
    
  3. 開啟瀏覽器,輸入http://localhost:5001,可以看到網站的異常排除囉!

    website

參考資料:https://github.com/aspnet/Mvc/issues/2348

小結

在這次Build 2015中,可以看到許多.Net平台在未來更多的可能性,也讓.Net的開發人員更加的躍躍欲試,或許在不久的將來,在各種平台上執行我們所建置的.Net應用程式或網站都不會是難事吧!