メインコンテンツまでスキップ

コーポレートサンプルサイトを利用する

Kuroco構築時のテンプレートとして利用できるコーポレートサンプルサイトを公開しました。

コーポレートサンプルサイトには、一般的なコーポレートサイトで使われる内容のコンテンツ表示に加えて、ログイン機能もテンプレートに含まれています。

Kurocoでプロジェクトをはじめる際のテンプレートとしてご利用ください。

デモサイト​

Image from Gyazo

デモサイトURL：https://dev-nuxt-corporate.g.kuroco-front.app/
リポジトリ：https://github.com/diverta/front_nuxt_corporate

機能一覧​

  • コンテンツ管理
    • 記事一覧
    • 記事詳細
    • プレビュー
    • マスタの表示(アーカイブに利用)
    • フィルタ(日付)
  • 問い合わせフォーム
    • 回答項目の動的表示
    • フォーム送信
  • 会員機能
    • 登録・退会
    • ログイン・ログアウト
    • 会員情報の更新
    • パスワードリマインダー
    • 会員クラスによるコンテンツの出し分け
    • 非ログインユーザーにも会員限定コンテンツの一部を表示
    • 会員クラス変更の依頼を自動処理
      ※デモ用に追加されています。
      　設定を外して、手動処理 or Stripeと連携した有料会員機能としてご利用いただけます。

コンセプト​

本サンプルサイトは以下のコンセプトで作られています。

  • 機能紹介を目的とした制作事例のショーケースではなく、あくまでユーザーが編集して使うための"テンプレート"サイト
  • ユーザーで編集できることが必須のため、利便性よりも読みやすいコードを優先する
  • プラグイン等はできる限り入れず、欲しいプラグインはユーザー側で追加する
  • CSSフレームワークはユーザーが使い慣れたものを適用できるように、テンプレート側では使わない

前提条件​

プロジェクト開始前に、準備事項を記載します。

備考

本プロジェクトはNuxt3を利用しています。ご自身の環境でNuxtが利用できるようにあらかじめご対応をお願いいたします。
参考: NuxtJS インストール 前提条件

備考

プロジェクトをデプロイするためGitHubにソースをpushします。あらかじめGitHubのアカウント作成をお願いします。
参考: GitHub Docs クイックスタート

バックエンドの準備をする​

Kurocoの登録​

まずはKurocoのアカウント登録します。無料トライアルより必要項目を記入し、「登録する」をクリックします。

Image from Gyazo

注意

コーポレートサンプルサイトはサブサイトで運用します。
メインサイトとサブサイトで別々のサイトキーになるのでそれぞれ準備してください。

無料トライアルから登録するサイトキーはメインサイトのものになります。

登録したメールアドレスに登録完了のメールが届きます。メール内に記載されている管理画面URLをクリックし、ログインを行うと下記画面が表示されます。

Image from Gyazo

サブサイトの追加​

サイト一覧からコーポレートサンプルサイト用のサブサイトを追加します。

備考

メインサイトのデフォルトは会員制サンプルサイト用の設定になっています。メインサイトのフロントエンドは未使用で構いません。
お支払い用のクレジットカードはメインサイトで登録し、サブサイトの利用料を含めた費用がメインサイトに請求されます。

[環境設定] -> [サイト一覧]をクリックします。

Image from Gyazo

[追加]をクリックします。

Image from Gyazo

コピー元のサイト名を[Template]Nuxt Corporete(Default)に設定し、必須項目を入力して[追加する]をクリックします。

Image from Gyazo

サブサイトの登録完了のメールが届いたらログインをしてコンテンツを確認します。

注記

以降、Kuroco管理画面の説明はすべてサブサイトのものになります。

CORSの設定​

API画面より、CORSを設定します。 [API] -> [Default]をクリックし、「CORSを設定する」をクリックします。

Image from Gyazo

CORS_ALLOW_ORIGINSの「Add Origin」をクリックします。

Image (fetched from Gyazo)

フィールドが追加されるので、http://localhost:3000を追加し「保存する」をクリックします。

Image from Gyazo

以上でCORSの設定完了です。

フロントエンドの準備をする​

コーポレートサンプルサイトのリポジトリをcloneする​

GitHubのリポジトリよりソースコードをご自身のローカルディレクトリにcloneします。ターミナルで下記実行します。

git clone https://github.com/diverta/front_nuxt_corporate.git

clone後、front_nuxt_corporateディレクトリに移動し、プロジェクトのインストールをします。

cd front_nuxt_corporate
npm install

続いて、nuxt.config.tsを開き、のruntimeconfigのkurocoApiDomainを自身のサイトのAPIドメインに変更します。

Image from Gyazo

ヒント

APIドメインはアカウント設定もしくは、エンドポイント一覧のページで確認できます。
Image from Gyazo

準備ができたら以下をコマンドラインで実行し、ローカルでの表示を確認します。 

npm run dev

http://localhost:3000 にアクセスするとサイトが表示されます。

GitHubにリポジトリを作成しファイルをpushする​

次に、先ほどcloneしたリポジトリをご自身のリポジトリにpushします。
GitHubにログインし、[Repositories] -> [New]をクリックします。

Image (fetched from Gyazo)

リポジトリ作成画面が表示されるので、必要事項を記入し「Create repository」をクリックします。
（今回は「Repository name」に「kuroco_front_nuxt_corporate」と記入しました。）

Image from Gyazo

以上でリポジトリが完成しました。

それでは、先ほどcloneしたファイルをこちらのリポジトリにpushします。 現在はclone元の https://github.com/diverta/front_nuxt_corporate.gitに紐づいているので、こちらを先ほど作成したリポジトリに変更します。

コマンドラインより下記実行します。

git remote set-url origin https://github.com/GitHubアカウント/kuroco_front_nuxt_corporate.git

注： 下記２点はご自身のアカウントに合わせて変更してください。

  • GitHubアカウント：ご自身のGitHubアカウント名
  • kuroco_front_nuxt_corporate：先ほど作成したリポジトリ名

これでリモートリポジトリが変更されました。念の為コマンドラインで下記実行します。

git remote -v

すると、設定したリポジトリに変更されていることが確認できます。

origin  https://github.com/GitHubアカウント/kuroco_front_nuxt_corporate.git (fetch)
origin  https://github.com/GitHubアカウント/kuroco_front_nuxt_corporate.git (push)

それではファイルを作成したGitHubリポジトリにpushします。 下記実行してください。

git push -u origin main

GitHubのリポジトリを確認すると、ファイルがpushされていることが確認できます。

ヒント

注: pushでエラーになる場合の対応方法
今回のサンプルサイトでは、ファイルにGitHubActions用のymlファイルが含まれます。
そのため、GitHubの設定によってはエラー表示される可能性がございます。エラーが表示された場合は、FAQ -> GitHubリポジトリにpushした際、エラーが表示されます。エラー解決方法を教えてください。を参考に対応をお願いします。

以上でフロントエンドの準備は完了です。次に、ご自分のKurocoと接続する方法を説明します。

KurocoとGitHubを連携してデプロイする​

KurocoFrontの設定​

KurocoFrontを利用し、Kurocoと先程cloneしたGitHubリポジトリを連携します。

[KurocoFront] -> [GitHub] をクリックし、KurocoFrontを表示します。

Image from Gyazo 「GitHubリポジトリと接続する」をクリックします。

Image from Gyazo GitHubへログインが求められますので、ログインをします。

Image (fetched from Gyazo) ログインするとGitHubの画面が表示されます。

Image (fetched from Gyazo) 「Repository access」より接続するリポジトリを選択します。

Image (fetched from Gyazo)

ヒント

リポジトリ接続設定は後から変更が可能です。１つのアカウントで複数のKurocoを利用する場合は、KurocoのGitHub Appsは1つですので、ここで複数のリポジトリを選択することになります。

ヒント

接続できるリポジトリは管理者権限を持っているリポジトリのみになりますので、ご注意ください。

リポジトリを選択したら、「Save」をクリックします。

Image from Gyazo

再度Kurocoへのログインを求められますので、ログインをします。

Image (fetched from Gyazo)

接続が完了すると、KurocoFrontの画面に遷移します。

Image from Gyazo

「リポジトリ」でcloneしたリポジトリを選択し、「更新する」をクリックします。

Image from Gyazo

「GitHubの連携対象」で下記選択し、「更新する」をクリックします。

  • ワークフロー：Build and deploy
  • 対象ブランチ：main

Image from Gyazo

以上でKurocoFrontの設定が完了です。

build.ymlファイル修正​

/.github/workflow/build.yml ファイルを修正します。
[KurocoFront] -> [GitHub]にアクセスし、Frameworkをnuxt3に設定して、「リポジトリ」のテキストエリア内をコピーします。

Image from Gyazo

/.github/workflow/build.yml を開き、コピーした内容で上書きします。

Image from Gyazo

ファイルの更新ができたら、変更をGitHubにプッシュします。GitHubActionが実行され、ビルド&デプロイが正常終了したら完了です。

表示の確認​

Kuroco管理画面より、「サイトを表示」をクリックします。

Image from Gyazo

すると、front_nuxt_corporate をクローンしたサイトが表示されます。

Image from Gyazo

ご質問や不具合連絡について​

以上でコーポレートサンプルサイトの使用準備は完了です。

ご不明点やご質問ありましたらお問い合わせよりご連絡ください。
また、コードの不具合等ありましたらリポジトリよりissueまたはPRをお願いします。

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする
Slackコミュニティに参加する