じゃあ、みんなでGitpodのASP .NETをやってみよう
TL;DR
.NET 5はWindowsだけではなくMacOSとLinuxにも対応しており、Ubuntu ServerをはじめとしたCUI環境でも簡単に開発が行なえるようになりました。
そこで今回はどのぐらい簡単に開発を行うことができるかGitpod上でASP .NETなどを立ち上げWebでHello, World!を表示し試してみましょう。
以下のページにソースコードを置いておきます。
Open in Gitpodボタンを押して待つこと数秒、URLが発行されHello, World!が表示されたのではないでしょうか？
GitLabアカウントをお持ちではなくGitHubを常用している人はこの.gitpod.ymlをコピペして使ってください。
image: gitpod/workspace-dotnet
tasks:
- init: dotnet new web -n GitpodASP
command: dotnet run -p GitpodASP --urls http://0.0.0.0:8080
ports:
- port: 8080
onOpen: open-preview
Public DomainなThe Unlicenseです。
それでは解説していきます。
dotnet
まずは何も書かなかった場合Gitpod初期設定のDockerイメージgitpod/workspace-fullを引っ張ってくるのでgitpod/workspace-dotnetを指定してあげましょう。
このDockerイメージはgitpod/workspace-fullにLinux版dotnet-sdkを含めたものになります。
これがないとdotnetに関するコマンドが動きません。
dotnet new
tasksで最初に行う$ dotnet newコマンドで出力できるテンプレートは、皆さんWindowsのVisual Studioで最初に行うであろう「新しいプロジェクトの作成」とだいたい同じです。
メニューバーのファイル→新規作成→プロジェクトで選択するやつです。
あれが少しずつオープンソースになり、このようにMacOSやLinuxでも出来るようになったんですね。
今回はwebを選択しているので最もシンプルなEmptyテンプレートを出力しています。
また何もオプションをつけずに出力するとディレクトリが作成されず起動が面倒になるので名前をつけてあげましょう。
今回はGitpodASPと名付けています。
dotnet run
至極当然の話ですがテンプレートを出力しただけでは動きません。
なのでアプリを動かすための$ dotnet runコマンドが必要になります。
サーバー稼働後はWebの場合はコンソール上でCtrl+Cを押すことでサーバーを停止することができます。
再度起動したい場合はcommandにあるコマンドをGitpod上のコンソールで再度入力してあげましょう。
コマンドオプションで先程名付けたGitpodASPを指定し、プロキシサーバーがあっても正常に動くよう0.0.0.0ホスト8080ポートを設定してあげます。
これで問題なく動くのではないでしょうか？
URLにも8080が記載されているか確認すればバッチリです。
$ curl -i https://8080-<color>-<animal>-<id>.ws-us03.gitpod.io/
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Tue, 09 Feb 2021 12:01:00 GMT
Content-Type: text/plain; charset=utf-8
Content-Length: 12
Connection: keep-alive
Hello World!
templates
さて、もうおわかりですね？
Hello, World!に必要なコマンドは$ dotnet newと$ dotnet runだけで、今回はwebテンプレートで作成したためこのような表示となりました。
他のテンプレートを使用すれば様々なフレームワークで構築できるのです。
試せるものを一通り試してみたので紹介していきます。
ちなみにASP .NETを含めた全てのテンプレートは$ dotnet new -lで確認できます。
gitpod /workspace/gitpod-asp $ dotnet new -l
Templates Short Name Language Tags
-------------------------------------------- -------------- ------------ ----------------------
Console Application console [C#], F#, VB Common/Console
Class library classlib [C#], F#, VB Common/Library
Worker Service worker [C#], F# Common/Worker/Web
...
このように表示されます。Short NameをJSONにしたものはこちらです。
["console","classlib","worker","mstest","nunit","nunit-test","xunit","razorcomponent","page","viewimports","viewstart","blazorserver","blazorwasm","web","mvc","webapp","angular","react","reactredux","razorclasslib","webapi","grpc","gitignore","globaljson","nugetconfig","tool-manifest","webconfig","sln","proto"]
mvc webapp
MVCのシンプルなテンプレートです。
webappはRazor Pagesで作られています。
angular react reactredux
JavaScriptのフロントエンドフレームワークであるAngularとReact、Reduxを含めたテンプレートです。
$ dotnet runで行う最初のビルドに結構時間がかかるので注意。
サーバーサイドがC#なのになぜかX-Powered-By: Expressレスポンスヘッダが返ってきます。
よく分からないので深く突っ込まないようにしましょう。
blazorserver blazorwasm
超モダンなBlazorアプリです。ほぼ全てC#です。
blazorwasmはWebAssemblyを使用しているのでロードに少し時間がかかりますが動作は軽いです。
webapi
$ curl -i https://8080-<color>-<animal>-<id>.<region>.gitpod.io/
HTTP/1.1 404 Not Found
Server: nginx/1.14.1
Date: Tue, 09 Feb 2021 12:02:00 GMT
Content-Length: 0
Connection: keep-alive
トップページが表示されないので使えないのかな？ と一瞬思いましたがどうやらこれはSwaggerを動かしているみたいです。
/swagger/v1/swagger.jsonへアクセスするとREST APIが返ってきます。
$ curl -i https://8080-<color>-<animal>-<id>.<region>.gitpod.io/swagger/v1/swagger.json
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Tue, 09 Feb 2021 12:03:00 GMT
Content-Type: application/json;charset=utf-8
Content-Length: 1800
Connection: keep-alive
{
"openapi": "3.0.1",
"info": {
"title": "GitpodASP",
"version": "v1"
},
"servers": [...],
"paths": {...},
"components": {...}
}
とりあえずはこんなところでしょうか。
その他テンプレートがあったりクロスプラットフォームでCUIアプリも作れるみたいです。
Xamarinも .NET 5で対応予定でしたが延期になったので .NET 6に期待ですね。
XamarinでクロスプラットフォームGUIアプリも作れるようになります。
お使いのPC、タブレット、キーボードをつないだスマホからGitpodへアクセスし
是非C#とF#、CUIアプリなら使えるVisual Basicを試してみてください。
refs
Discussion