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を動かすことができます。

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)