.NET Core多平臺項目模板eShopOnContainers編譯手記

之前寫了一個功能性的文件上傳asp.net core的小程序，加上點七七八八的東西，勉強能夠應付了，打算學習一下微軟的官方.NET CORE微服務示例https://github.com/dotnet-architecture/eShopOnContainers。這個例子很全面地展現了微服務、docker以及.net core的魅力。裏面使用了很多知識點，比如單點登錄、API資源授權，權限控制，用戶管理等，可以作為一個應用開發的學習模板。

重要的事情強調三遍：多平臺！多平臺！多平臺！

一個項目包含了.NET Core在多個目標平臺上的應用，包括ASP.NET CORE上的WEB SPA（單頁應用）、傳統網頁以及移動APP（基於Xamarin，同時支持Android、iOS、windows phone）。可以獨立部署或者直接部署到Azure上，非常贊！

具體分析結構的文章已經有不少了，我重點說下安裝和編譯的幾個小坑，以便大家能夠更快地開始。主要的參考鏈接是https://github.com/dotnet-architecture/eShopOnContainers/wiki/02.-Setting-eShopOnContainers-in-a-Visual-Studio-2017-environment，在vs2017上搭建windows服務，跑個WEBSPA程序。

1.工具要求

• 源代碼
• Windows 10 專業版以上（支持Hyper-V）
• Docker for windows
• Visual Studio 2017 15.3以上
• npm(裝上NODE.JS)用於跑SPA程序

據說VS2017 15.4版本在docker compose上有點問題，但是我還是義無反顧的升級了，下文將講到這個坑。

1.下載代碼

git clone https://github.com/dotnet-architecture/eShopOnContainers.git

我用的是dev分支，默認就是。

2.配置Docker

在上面那個docker鏈接裏面安裝docker for windows，選什麽版本都沒關系，我選的穩定版。直接一路next，如果之前沒啟用hyper-v，會提示重啟，照做就好。

然後是在Docker的設置->advanced裏面，配置利用CPU核心數量和內存大小，按照官方說法，CPU分配3核心，內存分配4G。由於我使用vs2017直接compose docker，所以，下一步就是共享磁盤，在Shared drives裏面配置共享的磁盤，共享源文件所在的磁盤即可。

共享磁盤的時候，會提示輸入windows賬戶用戶名和密碼，如果windows賬戶沒有密碼的話，這步就點不過去了。

對本地開發來說，不需要其他操作了，如果需要通過外部連接服務的話，那麽還需要配置防火墻，打開5100-5110這一段的端口。

3.Visual Studio 2017配置

如果全新安裝vs2017，需要以下幾個workloads：

• ASP.NET和web開發
• .Net Core跨平臺開發支持

不部署到Azure上，就不需要Azure開發這個選項了。當然，如果你需要開發移動端，或者桌面端的，甚至是UWP，那麽對應的勾上就行了。

有一個關鍵點，如果勾上了移動開發的話，需要取消Google Android Emulator和Intel Hardware Accelerated Execution Manager，因為他們和Hyper-V不兼容。

4.編譯SPA程序

下載的代碼有很多sln文件，我們測試WEBSPA，關註一個eShopOnContainers-ServicesAndWebApps.sln就可以了。我們找到eShopOnContainers\src\Web\WebSPA這個文件夾，先編譯SPA程序。

a.安裝npm

直接從https://nodejs.org/en/下載最新穩定版node.js，一路next安裝，我安裝的是8.9.1LTS，記得勾上ADD TO PATH選項。

b.配置vs2017 npm路徑

在工具->選項->項目與解決方案->Web package management->外部web工具裏面，加一行你剛剛安裝的node的路徑（如果是一路next的話，那麽就是C:\Program Files\nodejs）。然後調整順序，註意新增加的要在第二行，要在WEB\External的上面。

c.編譯SPA程序

運行powerhsell，定位到eShopOnContainers\src\Web\WebSPA這個文件夾。
輸入npm install回車，等一會兒就好了。然後按照教程，輸入回車。

錯誤，提示找不到node-sass，還好文檔裏面有，如果不行了，輸入npm rebuild node-sass回車

沒有提示直接結束了，那麽繼續npm run build:prod

額。。。和說好的劇本不一樣啊。是不是node-sass有點問題了，那我安裝一下總行了吧。

還是不行，npm，你怕嗎?

搜索了一下這個錯誤Cannot read property ‘0‘ of undefined，找到了一個https://github.com/npm/npm/issues/17858，提示應該是npm版本有bug的問題，我運行的的npm版本是5.5.1的（運行npm -v可以查看），在bug沒修復前，臨時解決方案：

npm install -g npm@5.2.0

還是不行。應該是剛剛版本install之後不兼容造成了，從npm install開始從頭來一遍就好了。如果npm run build:prod正常結束了，就說明OK了。

5. debug docker

上面工作做完了，用vs2017打開eShopOnContainers-ServicesAndWebApps.sln文件，右鍵解決方案管理器裏面的docker-compose，點設為啟動項目。

F5，開始編譯。然後等了一會兒。

提示很多錯誤，有配置沒有值？啥，還要配置！

定位源文件夾根目錄下的.env文件。裏面有很多配置項，如果不用azure的話，保持默認就可以了，但是最後的這個一定要設置true或者false。

重來，發現還是不行。最後一個error:invalid reference format還是存在。這就是vs2017 15.4的坑了。
參考http://www.cnblogs.com/dadream/p/7800104.html，定位源文件夾，刪除docker-compose.yml中所有鏡像的 ‘:${TAG:-latest}‘ 後綴。

重新F5，編譯通過了，但是docker要下載各種鏡像，是更漫長的等待。

最後出現這個東西，說明成功了。再仔細研究吧~HAVE FUN!

項目模板eShopOnContainers