愛流浪的小風

技術隨手寫

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

| Comments

微軟的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,應該可以看到以下畫面

安裝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

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

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

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

啟動網站

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

    dnu restore
    

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

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

異常排除

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

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

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

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

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

小結

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

Comments

comments powered by Disqus