---
title: GitHubからKurocoFrontへソースをデプロイする方法
description: KurocoFrontへGitHubを利用したデプロイ方法を紹介します。 
---

KurocoFrontへGitHubを利用したデプロイ方法を紹介します。 

## KurocoFrontへのデプロイ手順
### 1. リポジトリ準備

GitHubにてKurocoFrontへデプロイしたいリポジトリを準備します。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/5ae8411ce2640c6f0c5b97576e29ee97.png)
:::info
前提条件として、静的なファイルしかホスティングできませんのでリポジトリにはNuxt.js等のJavaScriptフレームワークや、HTML/CSS/JSファイルや画像などのメディアファイルが登録されている必要があります。
上記画面はNuxt.jsのリポジトリを表示しております。
:::

### 2. KurocoFrontよりGitHubリポジトリと接続する
[KurocoFront] -> [GitHub] をクリックし、KurocoFrontを表示します。  
KurocoFrontより「GitHubリポジトリと接続する」をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/875b9ce003a701696e278a4454c49535.jpg)
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/296ac6fb71ddea36ace52dbe804fd126.png)
接続が完了すると、KurocoFrontの画面に遷移します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d4222c9238bbed8c3ad14461e29344ee.png)
以上でKurocoFrontとGitHubリポジトリの接続が完了となります。

### 3. kuroco_front.jsonを作成する
KurocoFrontを利用するために、`kuroco_front.json`をルートディレクトリに配置する必要があります。

:::tip
Nuxtの場合は下記kuroco_front.jsonを `/static` 配下に作成します。
:::

```json title="kuroco_front.json"
{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":[],
    "ip_restrictions":[]
}
```

`kuroco_front.json`ではURLのリライト処理やBasic認証やIPアドレス制限の利用が可能です。Basic認証のパスワードはプレーンテキストになっております。リポジトリをpublicにする場合はご注意ください。  

参考: [kuroco_front.jsonとは何ですか？](/ja/docs/faq/what-is-kuroco_front_json/)  

### 4. `.github/workflows` にYAMLファイルを配置する  
KurocoFrontではGitHubアクションを利用するため、 `.github/workflows` にYAMLファイルを配置します。  

まずはKurocoFront画面のリポジトリフィールドの内容をコピーし、ビルドコマンドやブランチ名などを調整して `build.yml` を作成します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/dad5a689e0e8c160b7d7fd1de65bd09e.png)
次に作成した`build.yml`を`.github/workflows` 配下に配置し完了です。

参考:  
GitHub アクションを利用するため、YAMLファイルを作成しワークフローの定義を行なっております。
YAMLファイルについての説明や、書き方については下記ドキュメントをご確認ください。
- [GitHub Docs GitHub Actions について学ぶ](https://docs.github.com/ja/actions/learn-github-actions)
- [GitHub Docs GitHub Actionsのワークフロー構文](https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions)

:::info
YAMLファイルに記載されているアクションのバージョンが古くなると、エラーが表示される可能性があります。  
自動でアクションのバージョンを更新する方法は、[GitHub Actionsワークフローのアクションを最新バージョンに保つ方法はありますか？](/ja/docs/faq/how-to-keep-github-actions-up-to-date/) をご確認ください。
:::

### 5. 実際にデプロイのGithubActionsを動かす  
作成した`build.yml`は、Github上にアップロードされ次第動作しますので、実際にGithubへ更新をpushして、GithubActionsが動作開始することを確認します。

以下のコマンドを実行して、Githubへ更新をpushしてください。
```sh
git add .
git commit -m "ops: provide kuroco deployment"
git push
```

Githubのリポジトリ画面へアクセスし、[Actions]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/39a7350cf279af2413129060d40edab1.png)

GithubActionsが動作開始していることが確認できます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ffab5abcf0f34c6f64fc99119aeb98c4.png)

しばらく待機すると、GithubActionsの動作が完了していることが確認できます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/bebbb2d5f64889833c37e3cbd7e4dfbb.png)

#### GithubActionsが完了しなかった場合

GithubActionsが何らかの理由でエラーとなり、デプロイが完了しなかった場合、失敗していることが表示されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/09c632162aff04a3decbf9740df9e26a.png)

また、メールで通知されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/716c8da642050b2974d8be5db1567fe6.png)

### 6. サイトを表示する  
[サイトを表示]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f0041c26480eec068c794e4bdd4b6ad4.png)
すると、デプロイされたサイトへ遷移します。問題なく画面が表示されればデプロイ完了です。

## KurocoFrontへプレビューデプロイする手順

KurocoFrontでは、通常のデプロイの他、プレビューとして一時的なデプロイをさせることができます。  

ある修正をGithubのPullRequestとして適用しようとする場合、ローカル上でしか動作確認ができないとき、レビュアーはそのPullRequestを自分のローカルにいちいちcheckout/ビルドして動作確認しなくてはならず、不便です。  
このため、そのPullRequestのソースコードが、一時的な仮URL上にビルド/デプロイでき(プレビューデプロイ)、誰でもPullRequestの成果物をブラウザで確認できるようになると便利です。

`build.yml`には、PullRequestに**特定のコメントが記載されたら**プレビューデプロイするようにあらかじめスクリプトが組み込まれています。  
上記通常のデプロイ手順を行なっている方は、ファイルの変更等は必要ありません。

### プレビューデプロイ手順

#### テスト用PullRequestの作成

動作確認用に、空ファイルを作成して、PullRequestします。
```sh
git checkout -b preview_deploy
touch test.txt
git add .
git commit -m "chore: tmp"
git push --set-upstream origin preview_deploy
```

Githubのリポジトリ画面へアクセスし、[Pull requests]、[New pull request]とクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/30e0f4ce522f56b17e53adeeb2a64c4c.png)

[compare: ***]をクリックし、[preview_deploy]を選択、[Create pull request]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9c360322adfe36d1ff5c0f7e37d1d302.png)

[Create pull request]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1d43216d2defda21b8b4eb0776562ed6.png)

PullRequestを作成できました。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/eb00d665a8bf98b5d5987ec1f61a7869.png)

#### プレビューデプロイする

PullRequest画面下部のコメント欄に、`/kuroco stage`と入力、[Comment]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cb2301d837284c03d5662ba4040eac0f.png)

コメントがされたのを確認した後、[Actions]タブをクリックしてみると、GithubActionsが`/kuroco stage`のコメントに反応し、プレビューデプロイを開始していることが確認できます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e418ce8668741af1028ec8e5a1e6f571.png)

PullRequestの画面に戻り、しばらく後に画面更新をすると、仮URLのリンクと一緒にプレビューデプロイのコメントが追加されていることが確認できます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/75a0ac2f3728fd934658696bc8a959a2.png)

仮URLのリンクにアクセスして、PullRequestの内容がデプロイされていることを確認します。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f652d02b27fc9120c4e9d3a6d69fa974.png)

:::tip
プレビューデプロイで発行される仮URL上から操作したとき、CORSエラーが発生する場合、ワイルドカードで仮URLからのアクセスを許可する指定をしてください。  
仮URLは`https://ハッシュ値-サイトキー.g.kuroco-front.app`の様に発行されるため、  
`https://*-サイトキー.g.kuroco-front.app`という指定をすることで、CORSエラーを回避できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/37dd46e77bc289ad77a83018e259866f.png)
:::

## ドメインについて
KurocoFrontのドメインですが、デフォルトでは `https://サイトキー.g.kuroco-front.app` のようになります。  
独自ドメインへの変更については [KurocoFrontで独自ドメインを利用する手順](/ja/docs/tutorials/using-a-custom-domain-name-on-kurocofront/)をご確認ください。

## うまくデプロイできない場合
KurocoFrontへうまくデプロイできない場合や、エラーが表示されてしまう場合は下記をご確認ください。

- 管理画面に[KurocoFrontログ](/ja/docs/management/front-log-list/)がありますので、そちらでログのご確認をお願いします。
- [KurocoFrontにファイルが反映されないのですが、何をチェックすればよいですか？](/ja/docs/faq/what-should-I-do-if-file-updates-are-not-reflected-in-kurocofront/) を参考に、設定の再確認をお願いします。

また、GitHub Actionsの設定が分からない場合は[サポートのSlack](/ja/docs/about/support/)へご連絡ください。サポートいたします。
