Kurocoのドキュメントにはチュートリアルがあり、Kurocoの使い方が学ぶことができます。
【Kurocoビギナーズガイド】
ですがKurocoのチュートリアルに使用しているサービスが「Nuxt2」であったり、「Kuroco × Nuxt3」の情報が少なかった為、開発に詰まってしまったので、
自身の勉強の為、またどなたかのお力になれればいいな。との気持ちでブログを書かせて頂きます！
ヘッドレスCMSとは？
WebサイトやWebサービスの表示機能を持たず、主にコンテンツの管理に特化した進化したCMS。
CMSは「Webサイトの画像」「テキスト」「デザイン・レイアウト情報」などを一元的に管理・保存できるシステムになります。
通常のCMS：コンテンツを表示するために「フロントエンド」と、コンテンツを入稿するための「バックエンド」が含まれています。
ヘッドレスCMS：フロントエンド部分、つまり「ヘッド」が存在せず、コンテンツの管理に焦点を当てたシステムです。
要約すると、ヘッドレスCMSはコンテンツ管理を目的としており、Webサイトやアプリケーションの表示に関する機能を持たないCMSです。
【Kuroco】の始め方
Kurocoのチュートリアル「Kurocoビギナーズガイド」のチュートリアルにそって作成を進めていきます！
Kurocoのフリートライアル申込
https://kuroco.app/ja/free_trial/
リージョンは「アジア(東京)」に設定し、その他登録に必要な内容を入れ込みしていきます。
リージョン：アジア(東京) サイトキー：test-kuroco-nuxt3 メールアドレス：自身のメールアドレス
*こちらの登録したメールアドレスに登録完了通知のメールが届きます。
「Kurocoの管理画面設定が完了いたしました！」のメールが届きますのでメールに記載されている管理画面にURLをクリックしログインします。
事前に必要なもの
・node.js
・GitHubのアカウント
Nuxt.jsをインストール
Node.jsの18系でインストールしました。
$ node -v v18.8.0
$ npx nuxi@3.10.0 init test-kuroco-nuxt3 Which package manager would you like to use? →npm Initialize git repository? →Yes
使用しているエディターにて作成したプロジェクト「test-kuroco-nuxt3」を開き
npm run dev
ローカルで起動をしブラウザで http://localhost:3000/ にアクセスし、Nuxt3のWelcomeページが表示されることを確認します。
GitHubリポジトリの準備
git init git add . git commit -m "first commit" git branch -M main git remote add origin https://github.com/GitHubユーザー名/リポジトリ名.git git push -u origin main
※Nuxt.jsをインストールしたディレクトリのまま実行
Nuxt.jsをインストールしたフォルダをGit管理化して、リモートリポジトリにファイルをプッシュできていることを確認します。
GitHubとKurocoの連携
Kurocoの管理画面の【KurocoFront】＞【GitHub】＞【GitHubリポジトリと接続する】をクリックします。
GitHubへログイン後にGitHubの画面の「Repository access」でリポジトリを選択
※１つのアカウントで複数のKurocoを利用したい場合は、KurocoのGitHub Appsは1つなので、ここの選択で複数のリポジトリを選択
「Repository access」で設定後「Save」を再度、遷移したKurocoへのログイン
ログインすると以下の様に変化しているので
プルダウンから対象のリポジトリを選択して「更新する」をクリック
デプロイ
現在はKurocoの管理画面の「サイトを表示」をクリックしても「404 Not Found (DEPLOYMENT NOT FOUND)」が表示されサイトを表示することができません。
こちらを「GitHubで管理しているコードをKurocoFrontにデプロイ」しサイトの表示できるようにしていきます。
チュートリアル【デプロイ】に沿って「kuroco_front.json」 と「YAMLファイル」をNuxt.jsプロジェクトに追加
※Nuxt3では/staticは/publicに変更になっているので「kuroco_front.json」は/publicに追加してください。
ファイルの追加し、変更をGitHubにプッシュ。
プッシュするとGitHubActionが実行され、ビルド&デプロイされます。
ビルド&デプロイ完了後に、管理画面の【サイトを表示】をクリックすると「404 Not Found (DEPLOYMENT NOT FOUND)」ではなくなり、Welcomeページが確認できます！
以降、コンテンツの追加をしNuxt.jsでコンテンツの表示やデザインの調整して同様に「プッシュ」 > 「GitHubAction」 > 「ビルド&デプロイ」していきサイトの構築ができます。
「Kuroco × Nuxt3での始め方」は以上になります！
最後まで見て頂きありがとうございました！
