---
title: 会員制サンプルサイトをコピーして、Kurocoで会員制サイトを構築する方法
description: Kuroco構築時のテンプレートとして利用できる会員制サンプルサイトをオープンソース化しました。本プロジェクトをコピーすることで、簡易的な会員制サイトを構築することができます。Kurocoでプロジェクトをはじめる際のテンプレートとしてご利用ください。
---

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

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

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

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

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

## 前提条件

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

### Nuxtを利用します

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

:::info
参考: [NuxtJS Prerequisites](https://nuxt.com/docs/getting-started/installation#prerequisites)
:::

### GitHubを利用します

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

:::info
参考: [GitHub Docs クイックスタート](https://docs.github.com/ja/github/getting-started-with-github/quickstart)
:::

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

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

[GitHubのリポジトリ](https://github.com/diverta/front_nuxt_auth)よりソースコードをご自身のローカルディレクトリに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)](https://t.gyazo.com/teams/diverta/4ccca26427689829fbadc4351618e348.png)
### GitHubにリポジトリを作成しファイルをpushする

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/77864b81ba1d3d0f46cd49aa456b83dd.png)
リポジトリ作成画面が表示されるので、必要事項を記入し「Create repository」をクリックします。  
（今回は「Repository name」に「kuroco_front_nuxt_auth」と記入しました。）

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/4cfa87a561bbcd23aac699ac6a462969.png)
以上でリポジトリが完成しました。

それでは、先ほど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)](https://t.gyazo.com/teams/diverta/0b35802a4969603bbb8f8277e83db8c7.png)
以上でフロントエンドの準備は完了です。次に、ご自分のKurocoと接続する方法を記載します。

:::tip
注: pushでエラーになる場合の対応方法  
今回のサンプルサイトでは、ファイルにGitHubActions用のymlファイルが含まれます。  
そのため、GitHubの設定によってはエラー表示される可能性がございます。エラーが表示された場合は、[FAQ -> GitHubリポジトリにpushした際、エラーが表示されます。エラー解決方法を教えてください。](/ja/docs/faq/i-get-an-error-message-when-i-push-to-the-github-repository/)を参考に対応をお願いします。  
:::

### Kurocoの登録
次にKurocoのアカウント登録します。[Free Trial](https://kuroco.app/ja/free_trial/)より必要項目を記入し、「送信する」をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f0b35156d68f35e64d1f9f6d3679806e.jpg)
登録したメールアドレスに登録完了のメールが届きます。メール内に記載されている管理画面URLをクリックし、ログインを行うと下記画面が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8a370334b8d179ad7d55cf6b62756802.png)
### CORSの設定
API画面より、CORSを設定します。
[API] -> [Default]をクリックし、「CORSを設定する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4de3b09b0972d5ed0b7ebef45817c7f8.png)

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/88f828d364b4bca60cfae2883f65a08d.png)
フィールドが追加されるので、下記２つを追加し「保存する」をクリックします。

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

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d71252ed9b91d272f7ddbef131d07fa1.png)
以上でCORSの設定完了です。

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bd4e237dba89ac81d82e7297dfc39692.png)
「GitHubリポジトリと接続する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e41debef535542ae805cda392baec9a7.png)
GitHubへログインが求められますので、ログインをします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/214c1957e75be4de2ea7bc01d10499ab.png)
ログインするとGitHubの画面が表示されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d42942104b7b668e7d80c44696db4429.png)
「Repository access」より接続するリポジトリを選択します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/afef17946cbde0c9d11433dcb08564a4.png)
:::tip
リポジトリ接続設定は後から変更が可能です。１つのアカウントで複数のKurocoを利用する場合は、KurocoのGitHub Appsは1つですので、ここで複数のリポジトリを選択することになります。
:::

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

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1baf2798ac40f953e489b09040a5d1ce.png)
再度Kurocoへのログインを求められますので、ログインをします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/4d89886433dac6ad24ebcc40cdc7ce90.png)
接続が完了すると、KurocoFrontの画面に遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f036a90da0c9c28942e775330b12ae91.png)
「リポジトリ」でcloneしたリポジトリを選択し、「更新する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d7824e17e00e7f479b4ada293cde1948.png)
「GitHubの連携対象」で下記選択し、「更新する」をクリックします。
- ワークフロー：Build and deploy
- 対象ブランチ：main

![Image from Gyazo](https://t.gyazo.com/teams/diverta/732762647b502b764dd8a15b90e027f0.png)
以上でKurocoFrontの設定が完了です。

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/53bf0aa8fc530571879dfecda6062eba.png)
/.github/workflow/build.yml を開き、コピーした内容で上書きします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/6f5d150f5418e49c22fb2d5264b02a21.png)
ファイルを保存し、GitHubにpushします。すると、GitHub Actionsが実行されます。

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c5cf18a799e97703eae9ec35e9aae8bd.png)
ビルドが成功するとデプロイ完了です。

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/72216a3afc86e1b59c4548b4a1bba828.png)
すると、front_nuxt_auth をクローンしたサイトが表示されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/5acd1dcd3cf287b9c0ef00014e0cae80.png)
下記でログインします。
- Your sitekey：あなたのsitekey
- ID：kuroco登録時のメールアドレス
- Password：kuroco登録時のパスワード

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fc1850f8dac95cafa43d515ede9a06af.png)

:::caution
「アジア(東京)」以外のリージョンをお使いの場合はAPIドメインが異なりますので、該当箇所を探して調整してください。  
例：`.g.kuroco.app` -> `.g3.kuroco.app`
:::

## 利用例

### コンテンツの追加

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7195e22863cc482c85e4fef568d41387.png)
コンテンツ追加ページより、必要項目を記入し「追加する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7a95e389752ba7ef1392bddee3a51887.png)
コンテンツを追加すると、一覧にも追加されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/13f510e3289e705f291e43bdd1a54fb7.png)
## 参考：サイト概要

### 機能一覧

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

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

### 利用フレームワーク

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

- [Nuxt.js](https://nuxt.com/)
- [Vuetify](https://vuetifyjs.com/) 


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

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

ご不明点やご質問ありましたら[お問い合わせ](https://kuroco.zendesk.com/)よりご連絡ください。  
また、コードの不具合等ありましたら[リポジトリ](https://github.com/diverta/front_nuxt_auth)よりissueまたはPRをお願いします。
