Kuroco フロントエンド統合パターン
Kuroco HeadlessCMSとNuxt.js/Next.jsなどのフロントエンドフレームワークの統合パターン、およびAI自動デプロイメント。
ドキュメント参照: /kuroco-docs スキルを使用してKuroco公式ドキュメントを検索・参照できます。
チュートリアル: フロントエンドのデプロイ手順やサンプルサイトの構築方法は Kurocoサンプルサイトチュートリアル を参照してください。
目次
- サポートフレームワーク
- 環境設定
- API設定の前提条件
- 認証実装
- Nuxt.js統合 → 詳細は references/nuxt.md
- Next.js統合 → 詳細は references/nextjs.md
- AI自動デプロイ → 詳細は references/ai-deployment.md
サポートフレームワーク
| フレームワーク | バージョン | 推奨ユースケース |
|---|---|---|
| Nuxt.js 3.x | Vue 3系 | 新規プロジェクト（推奨） |
| Nuxt.js 2.x | Vue 2系 | 既存プロジェクト |
| Next.js 13+ | React (App Router) | 新規Reactプロジェクト |
| Next.js (Pages) | React (Pages Router) | 既存Reactプロジェクト |
環境設定
環境変数
# .env.local
NUXT_PUBLIC_API_BASE=https://example.g.kuroco.app
NEXT_PUBLIC_API_BASE=https://example.g.kuroco.app
API_ID=1プロジェクト構成
Nuxt.js:
pages/
├── news/
│ ├── index.vue # 一覧
│ └── [slug].vue # 詳細 (Nuxt3)
├── login.vue
└── profile.vue
composables/
├── useAuth.ts
└── useApi.tsNext.js (App Router):
app/
├── news/
│ ├── page.tsx # 一覧
│ └── [slug]/page.tsx
├── login/page.tsx
└── profile/page.tsx
lib/
├── auth.ts
└── api.tsAPI設定の前提条件
1. セキュリティ設定（Cookie認証）
- 管理画面 → API → セキュリティ → Cookieを選択
- フロントエンドとAPIドメインをサブドメイン違いに設定
- 例: www.example.com と api.example.com
2. CORS設定
管理画面: [API] → [セキュリティ] → [CORS設定]
CORS_ALLOW_ORIGINS:
- http://localhost:3000
- https://your-frontend-domain.com
CORS_ALLOW_CREDENTIALS: true
CORS_ALLOW_METHODS:
- GET
- POST認証実装
ログイン
interface LoginResponse {
grant_token: string
status: number
member_id: number
}
async function login(email: string, password: string): Promise<LoginResponse> {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/login',
{
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
}
)
if (!response.ok) {
const error = await response.json()
throw new Error(error.errors?.[0]?.message || 'ログインに失敗しました')
}
return response.json()
}ログアウト
async function logout(): Promise<void> {
await fetch('https://example.g.kuroco.app/rcms-api/1/logout', {
method: 'POST',
credentials: 'include'
})
}ログイン状態の確認
async function checkAuth(): Promise<ProfileResponse | null> {
try {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/profile',
{ credentials: 'include' }
)
if (!response.ok) return null
return response.json()
} catch {
return null
}
}会員登録
async function signup(memberData: SignupData): Promise<void> {
const response = await fetch(
'https://example.g.kuroco.app/rcms-api/1/member/insert',
{
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(memberData)
}
)
if (!response.ok) {
const error = await response.json()
throw new Error(error.errors?.[0]?.message || '登録に失敗しました')
}
}Nuxt.js統合
詳細な実装例: references/nuxt.md を参照
クイックスタート（Nuxt 3）:
// composables/useKurocoApi.ts
export function useKurocoApi() {
const config = useRuntimeConfig()
async function get<T>(endpoint: string, params?: Record<string, any>): Promise<T> {
const query = params ? `?${new URLSearchParams(params)}` : ''
return await $fetch<T>(
`${config.public.apiBase}/rcms-api/${config.public.apiId}/${endpoint}${query}`,
{ credentials: 'include' }
)
}
return { get }
}Next.js統合
詳細な実装例: references/nextjs.md を参照
クイックスタート（App Router）:
// lib/api.ts
export async function apiGet<T>(endpoint: string): Promise<T> {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_BASE}/rcms-api/1/${endpoint}`,
{ credentials: 'include', cache: 'no-store' }
)
if (!response.ok) throw new Error(`API Error: ${response.status}`)
return response.json()
}KurocoPages統合
KurocoPagesはKurocoが提供するフロントエンドホスティングサービス。
// kuroco_front.json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}デプロイ: 管理画面 → フロントエンド → KurocoPages → GitHubリポジトリ連携
注意事項
サードパーティCookie問題
SafariなどではサードパーティCookieがブロックされます。
解決策: APIドメインとフロントエンドドメインを同一ドメイン（サブドメイン違い）に設定
HTMLサニタイズ
v-html や dangerouslySetInnerHTML を使用する際はXSSに注意:
import DOMPurify from 'dompurify'
const sanitizedHtml = DOMPurify.sanitize(htmlContent)AI自動デプロイ
AIがKurocoサイトの登録からフロントエンドのビルド・デプロイまでを自動実行します。
詳細なワークフロー: references/ai-deployment.md を参照
デプロイの流れ
- 認証確認（whoami）
- ユーザー確認（デプロイ先、モード）
- サイト登録（新規の場合）
- フロントエンドビルド（nuxt generate / next build / vite build）
- アーティファクトアップロード（署名付きURL → S3）
- デプロイ実行（KurocoFront）
関連リファレンス
- references/ai-deployment.md - デプロイワークフロー全体
- references/schemas.md - パラメータリファレンス
- references/site-registration.md - サイト登録API詳細
- references/temp-upload.md - 一時アップロードAPI詳細
- references/deploy.md - デプロイAPI詳細
関連スキル
/kuroco-api-content- API設計・認証パターン、コンテンツCRUD操作/kuroco-admin-api- 管理API（admin_api）の操作
関連ドキュメント
../kuroco-docs/docs/tutorials/integrate-kuroco-with-nuxt.md- Nuxt.js統合../kuroco-docs/docs/tutorials/integrate-login.md- ログイン実装../kuroco-docs/docs/tutorials/signup.md- 会員登録../kuroco-docs/docs/tutorials/beginners-guide.md- ビギナーズガイド../kuroco-docs/docs/tutorials/corporate-sample-site-to-ssg.md- SSG対応- Kurocoサンプルサイトチュートリアル - サンプルサイトの構築・デプロイ手順