CATEGORY .NET Core

Headless CMSを作る

最初の業務で使ったVue.jsと業務で使うことの多い.NET系のフレームワークで何か作ってみたいと思い、Headless CMSでブログを作ってみた。CI/CDまで組んで継続的に開発をしていこうと思ったら土台を作るだけで1週間ほどかかったのでその時の手順を後世に残していこうと思う。 Headless CMSの選定 Vueの公式サイトではButter CMSを使ったブログの作成手順が紹介されているがこれは個人利用であってもお金がかかってしまうため、1ユーザーであればFreeのPrismicを使った。Prismicは言語ごとのチュートリアルがものすごく充実しているのでやりたいことは探せばほぼDocumentに乗っていると思う。これで無料はヤバイ。 ローカルで動かす。 .NET Coreプロジェクトの作成 以下のコマンドで.NET Coreプロジェクトの作成とSPA Extensionパッケージの追加をやります。

ここにVue cliプロジェクトを追加し、Coreに設定を追加していきます。 Vue.jsを埋め込むための設定 PrismicのGitHubにVueのテンプレートがあるのでクローンします。

npm installも忘れずに ここまででフォルダ構成はこんな感じ

次は.csprojを書き換えていきます。vue cli使ったことのある人なら見覚えのあるコマンドが並んでいるはず。

コード側 Vue.jsとCoreを繋ぐコードを書きます。

次にStartup.csの編集

これで.NET Coreの上でVue.jsを動かすことができます。

.NET Core 3.0 MVCで作成したプロジェクトが起動しない

プロジェクトを作成した直後のデフォルトの状態で、エラーが起きた時の備忘録 状況① Visual Studio for MAC バージョン8.3 .NET Core3.0 MVC (プロジェクトの作成直後) 2019年11月28日時点 ふと、C#でプログラムを書いてみたくなり、.NET Core 3.0 プロジェクトを新規作成し、GUIでビルドすると、起動するはずのブラウザが起動しなかった。 .csprojファイルをいじったりと無駄な努力をしてみたが、結局解決せず。 dotnet コマンドでビルドを行い、ログから開いているポート番号を確認した。 localhost:5000 にアクセスし、アプリが起動していることを確認できた。 どのポートを開くかは、launch.jsonで設定できるっぽい

状況② プロジェクト作成後のデフォルト時に怒る時のエラーです。 <code>dotnet run</code>の後に証明書がないというエラーが出る。

.NET Coreプロジェクトの作成時にHTTPS/HSTS をオプトアウトする必要があります。 プロジェクト作成時の HTTPS/HSTS のオプトアウト

Azure Functionチュートリアルをやってみた

.NET Core2.2でAzure Functionのプロジェクトを作成できるチュートリアルがあったのでやってみました。 Link:関数の作成 – C# (公式ドキュメント) Azure Functionはサーバーレスなサービスで、料金もあまりかからないところも魅力です。 Functionの価格設定は、毎月の関数の実行回数から算出されており、100万回アクセスまでは、無料(参考)となっているため、個人利用であればほぼ使い放題です。 今回は、このAzure Functionを試していきます。 プロジェクトの作成 選択するのはマーカーで印がつけられた部分 Function ランタイム :.NET Core2.2 関数テンプレート : HTTPトリガー → HTTP要求がトリガーとなって関数が呼ばれます。 ストレージアカウント : ストレージアカウントエミュレーター 承認レベル : Anonymous →Anonymousとすると、全てのクライアントからトリガーできます。チュートリアルのなので、とりあえずAnonymousとしました。 作成ボタンをクリックすると、プロジェクトが作成されます。 関数だけなので、かなりシンプルな構成ですね。

の部分が、関数名になります。 試しに「F5」キーを押して実行してみましょう。 Azure Function Core Toolsと呼ばれるコンソールが表示され、アプリケーションの動作が確認できます。 Visual Studioさん流石です コンソール画面の出力から、 赤線部のURLをコピーし、ブラウザーでの応答を確認します。 http://localhost:7071/api/Function1?name=debobonetとURLをたたいたら、Hello, debobonetという出力が返ってくることが確認できます。 これで、ローカル環境での開発は終わりです。簡単ですね Azureにデプロイ 次はAzureにプロジェクトを発行していきます。本来であれば、コマンドを叩いたりなどの操作が必要だったりすることが多いのですが、Visual Studioにはデプロイの機能も備わっています。 「ソリューションエクスプローラー」から、プロジェクトを右クリックし、「発行」を選択すると以下の画面へと遷移します。 Visual Studio Proのライセンスを持っていると、5000円分のAzureクレジットも付いてくるため、Visual Studio Professionalというサブスクリプションが選択できます。…