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

MAY 2, 2015 | 0 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的安裝，和專案產生更加的簡單喔！

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

打開Terminal，輸入以下指令，建立Mvc網站
```
yo aspnet
```
這時候會看到詢問你要建立哪種專案，我們選擇Web Application
接著會詢問你專案的名稱，輸入專案的名稱Test （或你想要的專案名稱）
然後應該可以看到檔案自動被產生
我們可以使用Visual Studio Code開啟剛剛建立的專案資料夾，開始進行Mvc網站的開發

啟動網站

打開Terminal，切換到專案所在資料夾（就是你剛剛輸入的專案名稱）執行套件還原，輸入以下指令，可以看到專案所需的套件被還原
```
dnu restore
```
到這邊為止，我們已經完成一個基本的Asp.Net 5的Mvc網站囉！輸入以下指令啟動網站
```
dnx . kestrel
```
開啟瀏覽器，輸入http://localhost:5001，可以看到網站成功啟動囉！

異常排除

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

打開Terminal，切換到專案資料夾，輸入以下指令
```
export MONO_MANAGED_WATCHER=false
```
重新啟動網站
```
dnx . kestrel
```
開啟瀏覽器，輸入http://localhost:5001，可以看到網站的異常排除囉！

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

小結

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

咕咕雞的學習點滴

2015年6月26日星期五