Mac と Visual Studio Code で ASP.NET

5641 ワード
ASP.NET VisualStudioCode ASP.NET テキストリンク

目的

他の方々の投稿でもすでに Mac で ASP.NET 書いて動かしてみるというものは多くありますが、MS チュートリアル含めて、若干自分が困ったこともあったので、まとめてみました。

参考

.NET Core installation guide
.NET Core and Visual Studio Code
Yo Code - Extension Generator

準備

Visual Studio Code をインストール

https://code.visualstudio.com/ にアクセスして、ダウンロードしてインストールします。

.NET Core をインストール

ターミナルを起動し、以下のようにコマンドを実行します。

brew update
brew install openssl
mkdir -p /usr/local/lib
ln -s /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib /usr/local/lib/
ln -s /usr/local/opt/openssl/lib/libssl.1.0.0.dylib /usr/local/lib/

上記作業を終了したのち、「Install .NET Core SDK」のところに official installer というリンクがあるので、そこからインストーラーをダウンロードして、SDK をインストールしておくと良いみたいです。

C# extension を VS Code Marketplace で探してインストール

Visual Studio Code を起動したのち、⌘+Pを押下して、以下のコマンドを実行します。

ext install csharp

そうすると、下図のような画面になるので、一番上のものをインストールします。MS のやつですね。

インストール完了したのち、再起動すると、C# IntelliSense が有効になります。

Yeoman generator をインストール

ターミナルで以下のコマンドを実行します。

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

新規プロジェクト作成する

ターミナルを起動したのち、任意のディレクトリに移動して、以下のコマンドを実行します。

yo aspnet

そうすると、ターミナルに以下のような文字が表示されます。

$ yo aspnet

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of application do you want to create? (Use arrow keys)
❯ Empty Web Application 
  Empty Web Application (F#) 
  Console Application 
  Console Application (F#) 
  Web Application 
  Web Application Basic [without Membership and Authorization] 
  Web Application Basic [without Membership and Authorization] (F#) 
(Move up and down to reveal more choices)

とりあえず Web Application を上下矢印キーで選択したのち、Enter します。

次は UI のフレームワーク選択です。

$ yo aspnet

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of application do you want to create? Web Application
? Which UI framework would you like to use? (Use arrow keys)
❯ Bootstrap (3.3.6) 
  Semantic UI (2.1.8)

今回は Bootstrap (3.3.6) を選択してみました。

最後にプロジェクト名です。何も入力しなければ、既定の名前になります。

$ yo aspnet

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of application do you want to create? Web Application
? Which UI framework would you like to use? Bootstrap (3.3.6)
? What's the name of your ASP.NET application? (WebApplication)

あとは、ひたすら (と言っても、そんなに時間はかからないと思います) 待ちます。
完了したのち、最後の部分の内容の通りにコマンド実行 (下記参考) してみたいと思います。

Your project is now created, you can use the following commands to get going
    cd "WebApplication"
    dotnet restore
    dotnet build (optional, build will also happen when it's run)
    dotnet ef database update (to create the SQLite database for the project)
    dotnet run

dotnet run したのち、ブラウザで http://localhost:5000 にアクセスしてみます。
そうすると、とりあえず、ASP.NET な Web ページが完成しました。

本職は SQL Server な感じなのですが、これをベースに、ちょっと Web アプリ作って勉強したいと思いました。