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

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

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

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

デモサイト

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

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

前提条件

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

Nuxtを利用します

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

備考

参考: NuxtJS Prerequisites

GitHubを利用します

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

備考

参考: GitHub Docs クイックスタート

サイトを構築する

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

会員制サイトサンプルリポジトリを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

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

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 from Gyazo

CORSの設定

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

Image from Gyazo

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

Image (fetched from Gyazo) フィールドが追加されるので、下記２つを追加し「保存する」をクリックします。

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

ヒント

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

Image (fetched from Gyazo) 以上でCORSの設定完了です。