Mac に Visual Studio Code をインストールして、ASP.NET Core を動かす

Mac

Mac から Windows がいなくなりましたので、もちろんVisual Studio が使えなくなりました。

ですので、Visual Studio Code を使ってみようかなって思います。
Mac の上でも ASP.NET Core アプリケーションは動きますもんね〜。

ただ、中途半端に綺麗な状態も若干嫌だったので、OSも入れ直したところからスタートしています。
Mac の OS の入れ直しは、Command + R を押しながら起動するとOS X 復元システムが起動するので、それを使ってWifiの設定、ディスクの中身を削除を行い、その後、OSの復元するようん流れなんですねー。(1時間くらい復元にかかったかも)


Visual Studio Code とは

Visual Studio は Windows PCで利用出来る統合開発アプリケーションですが、Visual Studio Code は Windows/Mac/Linux 上で利用出来るコードエディタです。

ですので、Visual Studio とは、機能が異なります。

また、Visual Studio Code は、GitHub でソースが公開されている、ソースオープンなアプリケーションです。

(参考)
https://code.visualstudio.com/
https://github.com/Microsoft/vscode


ASP.Net Core

今時点の自分の理解では、これまでは. Net Framework を使ったアプリケーションは、Windows の上でしか動けなかったのですが、それを Mac や Linux の上でも動かしていく .NetFramework のクロスプラットフォーム化が始まって、まずは、ASP.Net の範囲がそのようになってきたといったものだと思います。

ただ、どういう仕組みで動いているのとかは、まだ説明できるほど理解してないっす。。

(参考)
https://msdn.microsoft.com/ja-jp/library/dn878908(v=vs.110).aspx
https://docs.asp.net/en/latest/index.html
https://github.com/aspnet/home


インストール手順

下記のサイトの「Install ASP .NET 5 with Visual Studio Code」を参考にしました。
https://docs.asp.net/en/latest/getting-started/installing-on-mac.html

大枠の手順は以下の通りです。

  1. Mono のインストール
  2. Visual Studio Code のインストール
  3. ASP.NET Coreのインストール
  4. サンプルアプリの実行

1.Mono のインストール

以下のサイトから Mono を DL してインストールしてください。
http://www.mono-project.com/docs/getting-started/install/mac/

2.Visual Studio Code のインストール

以下のサイトから Visual Studio Code を DL します。zip形式を解凍するだけです。
https://code.visualstudio.com/Download

3.ASP .NET Coreのインストール

以下のリンクをクリックすると「DNX-1.0.0-rc1-update1.pkg」がダウンロードできます。これをインストールします。
https://go.microsoft.com/fwlink/?LinkId=703940

インストール後は、一度Macを再起動し、以下のコマンドで動作確認をします。

$ dnvm list
Active Version              Runtime Architecture OperatingSystem Alias
------ -------              ------- ------------ --------------- -----
  *    1.0.0-rc1-update1    coreclr x64          darwin          default
       1.0.0-rc1-update1    mono                 linux/osx    

4.サンプルアプリの実行

以下のサイトを参考に、Yeomanのインストールを行い、ジェネレータがはいたソースを動かしたいと思います。

https://docs.asp.net/en/latest/client-side/yeoman.html

(1).Node.js と npm のインストール

以下のサイトから DL してインストールします。
https://nodejs.org/en/

自分は、v4.2.6LTSをインストールしましたが、後述の作業中に npm のバージョンが古いと怒られてしまい、アップデートかけました。

[怒られる前]

$ npm -version
2.14.12

[怒られた後]

$ sudo npm install -g npm
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@3.6.0 /usr/local/lib/node_modules/npm

$ npm -version
3.6.0

(2).yoとbowerとgruntとgulp のインストール

npm のバージョンで引っかかったのはこの手順です。バージョンを上げたらすんなりインストールできました。

$ sudo npm install -g yo bower grunt-cli gulp
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.js
/usr/local/bin/yo -> /usr/local/lib/node_modules/yo/lib/cli.js
> yo@1.6.0 postinstall /usr/local/lib/node_modules/yo
> yodoctor
Yeoman Doctor
Running sanity checks on your system
 Global configuration file is valid
 NODE_PATH matches the npm root
 Node.js version
 No .bowerrc file in home directory
 No .yo-rc.json file in home directory
 npm version
Everything looks all right!
abbrev@1.0.7 node_modules/grunt-cli/node_modules/nopt/node_modules/abbrev -> node_modules/grunt-cli/node_modules/abbrev
 :
 :
(中略)
 :
 :
  └─┬ yosay@1.1.0
      ├── ansi-regex@2.0.0
      ├── minimist@1.2.0
      ├── pad-component@0.0.1
      ├─┬ repeating@2.0.0
      │ └── is-finite@1.0.1
      ├─┬ string-width@1.0.1
      │ ├── code-point-at@1.0.0
      │ └── is-fullwidth-code-point@1.0.0
      ├── taketalk@1.0.0
      └── word-wrap@1.1.0
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "generator-aspnet"
npm ERR! node v4.2.6
npm ERR! npm  v3.6.0
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! Please include the following file with any support request:
npm ERR!     /Users/agou/npm-debug.log

エラーは出てますが、ひとまず気にせずに作業を進めます。
次にインストールするものも、見つからないぞ的なエラーがでてるっぽいし。

(3).ASP.NET generator のインストール

npmでインストールします。

yoshitomo-no-MacBook-Air:~ agou$ sudo npm install -g generator-aspnet
/usr/local/lib
└─┬ generator-aspnet@0.0.92
   :
   :
  (中略)
   :
   :
    └─┬ yosay@1.1.0
        ├── ansi-regex@2.0.0
        ├── minimist@1.2.0
        ├── pad-component@0.0.1
        ├─┬ repeating@2.0.0
        │  └── is-finite@1.0.1
        ├─┬ string-width@1.0.1
        │  ├── code-point-at@1.0.0
        │  └── is-fullwidth-code-point@1.0.0
        ├── taketalk@1.0.0
        └── word-wrap@1.1.0

(4).サンプルコードの作成

作業用フォルダを作成します。

mkdir C:MyYo
cd C:MyYo

コードジェネレーターのyoを起動します。

yo aspnet

起動するとこんな感じになります。

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |   marvellous ASP.NET 5   |
    ( _´U`_ )    |        generator!        |
    /___A___    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y `
? What type of application do you want to create? (Use arrow keys)
❯ Empty Application
  Console Application
  Web Application
  Web Application Basic [without Membership and Authorization]
  Web API Application
  Nancy ASP.NET Application
  Class Library
  Unit test project 

今回は、Web Application を選択します。
選択すると、下記のような表示が出ますのでプロジェクト名を入力します。
今回は、「MyWebApp」

? What type of application do you want to create? Web API Application
? What's the name of your ASP.NET application? MyWebApp

Enterを押すと、ジェネレートが走ります。

   create MyWebApp/gulpfile.js
   create MyWebApp/Dockerfile
   create MyWebApp/.bowerrc
   create MyWebApp/.gitignore
   create MyWebApp/appsettings.json
    :
    :
   (中略)
    :
    :
   create MyWebApp/wwwroot/images/Banner-02-VS.png
   create MyWebApp/wwwroot/js/site.js
   create MyWebApp/wwwroot/js/site.min.js
   create MyWebApp/wwwroot/web.config
Your project is now created, you can use the following commands to get going
    cd "MyWebApp"
    dnu restore
    dnu build (optional, build will also happen when it's run)
    dnx web

porject.json に定義されているファイルをダウンロードするため、以下のコマンドを実行します。

    $cd "MyWebApp"
    $dnu restore
    Microsoft .NET Development Utility CoreClr-x64-1.0.0-rc1-16231
    GET https://api.nuget.org/v3/index.json
    OK https://api.nuget.org/v3/index.json 2555ms
      :
      :
   (中略)
    :
    :
  Installing System.Private.Networking.4.0.0
  Installing System.ComponentModel.EventBasedAsync.4.0.10
  Writing lock file /Users/agou/Desktop/MyYo/MyWebApp/project.lock.json
       Restore complete, 52027ms elapsed
  Feeds used:
    https://api.nuget.org/v3-flatcontainer/
  Installed:
    256 package(s) to /Users/agou/.dnx/packages

ローカルでWeb アプリを起動します。

$ dnx web
info: Microsoft.Data.Entity.Storage.Internal.RelationalCommandBuilderFactory[1]
  :
  :
 (中略)
  :
  :
Hosting environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

ブラウザを起動してhttp://loalhost:5000 に接続しましょう。


まとめ

見ていただいた通り、Mac でASP.NETのアプリケーションを作成し、Mac上で実行することができました。

ところで、Visual Studio Code はインストールしただけで何も使ってないじゃんって感じなのですが、今回の手順で記載してないのですが、ソースの編集を2か所やりました。
ASP.Net をご存知の方でしたら、気づいたかもしれませんが、アプリケーション名を2か所変更したくらいですが。。。

あと、dns restore をコマンドでやりましたが、これもVIsual Studio Code でやることもできるみたいです。

VIsual Studio Code は、Power Shell のテンプレートもあるみたいなので、Mac でPower Shell を書くときとかも便利そうです。(Azure Automationとかで使うPower Shell を書くときとか)

まだまだ、Mac初心者なので、利用方法に困っているところは若干ありますが、このまま使い続ければ何か見えそうな気がしてきました。

コメント

タイトルとURLをコピーしました