会員制サンプルサイトをコピーして、Kurocoで会員制サイトを構築する方法

Kuroco構築時のテンプレートとして利用できる会員制サンプルサイトをオープンソース化しました。

本プロジェクトをコピーすることで、簡易的な会員制サイトを構築できます。Kurocoでプロジェクトをはじめる際のテンプレートとしてご利用ください。

リポジトリ:https://github.com/diverta/front_nuxt_auth

デモサイト

今回構築するサイトのデモサイトは、下記より動作確認できます。

https://dev-nuxt-auth.g.kuroco-front.app/

前提条件

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

Nuxtを利用します

本プロジェクトはNuxtを利用しています。ご自身の環境でNuxtが利用できるようにあらかじめご対応をお願いいたします。

GitHubを利用します

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

サイトを構築する

それではサイトの構築をはじめます。

会員制サイトサンプルリポジトリをcloneする

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

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

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

cd front_nuxt_auth
npm install
npm run dev

http://localhost:3000 にアクセスするとログイン画面が表示されます。

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

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

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

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

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

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

git remote -v

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

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

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

git push -u origin main

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

Image (fetched from Gyazo)

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

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

kurocoの登録

次にKurocoのアカウント登録します。Free Trialより必要項目を記入し、「送信する」をクリックします。

「パッケージ」は「シンプルな会員制サイト」をご選択ください。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

CORSの設定

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

フィールドが追加されるので、下記2つを追加し「Save」をクリックします。

  • フロントエンドドメイン
  • http://localhost:3000

注意:
フロントエンドドメインは、[環境設定] -> [アカウント設定]より確認できます。
(参考: 管理画面マニュアル アカウント設定
独自ドメインを利用しない場合、フロントエンドドメインはhttps://サイトキー.g.kuroco-front.appとなります。 https://サイトキー.g.kuroco-front.appはすでにCORS_ALLOW_ORIGINSに登録されているので、追加で登録する必要はありません。

Image (fetched from Gyazo)

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

KurocoFrontの設定

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

ログインするとGitHubの画面が表示されます。

Image (fetched from Gyazo)

「Repository access」より接続するリポジトリを選択します。

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

build.ymlファイル修正

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

ファイルを保存し、GitHubにpushします。すると、GitHub Actionsが実行されます。

GitHubの「Actions」タブをクリックし、ビルドの状況を確認できます。

Image (fetched from Gyazo)

ビルドが成功するとデプロイ完了です。

画面確認

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

下記でログインします。

  • Your sitekey:あなたのsitekey
  • ID:kuroco登録時のメールアドレス
  • Password:kuroco登録時のパスワード

全て記入し「Sign In」をクリックすると、ログイン後のトップページが表示されます。

Image (fetched from Gyazo)

テストデータが1件投稿されているので、Latest articlesには1件記事が表示されています。

利用例

お知らせの追加

Kurocoの管理画面より、[コンテンツ] -> [お知らせ]より「お知らせ追加」をクリックします。

Image (fetched from Gyazo)

お知らせ追加ページより、必要項目を記入し「追加する」をクリックします。

Image (fetched from Gyazo)

お知らせを追加すると、一覧にも追加されます。 Image (fetched from Gyazo)

参考:サイト概要

機能一覧

本プロジェクトのサイト概要を記載します。

  • ログイン/ログアウト
  • 会員登録
  • パスワードリマインダー
  • 記事一覧表示
  • 記事詳細表示
  • お気に入り機能
  • メンバー一覧表示
  • メンバー詳細表示
  • 自分のプロフィール編集
  • お問い合わせフォーム

利用フレームワーク

本プロジェクトで利用している技術・フレームワークです。

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

以上で会員制サイトサンプルコピー方法の説明を終わります。

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

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