GithubからKurocoFrontへソースをデプロイする方法

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

KurocoFrontへのデプロイ手順

1. リポジトリ準備

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

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

2. KurocoFrontよりGitHubレポジトリと接続する

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

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

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

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

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

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

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

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

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

以上でKurocoFrontとGitHubレポジトリの接続が完了となります。

3. kuroco_front.jsonを作成する

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

[[info]] Nuxtの場合は下記kuroco_front.jsonを /static 配下に作成します。

kuroco_front.json

{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":[],
    "ip_restrictions":[]
}

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

参考: kuroco_front.jsonとは何ですか？

4. `.github/workflows` にYAMLファイルを配置する

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

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

次に作成したbuild.ymlを.github/workflows 配下に配置し完了です。

参考:
GitHub アクションを利用するため、YAMLファイルを作成しワークフローの定義を行なっております。 YAMLファイルについての説明や、書き方については下記ドキュメントをご確認ください。

5. サイトを表示する

[サイトを表示]をクリックします。

すると、デプロイされたサイトへ遷移します。問題なく画面が表示されればデプロイ完了です。

ドメインについて

KurocoFrontのドメインですが、デフォルトでは https://サイトキー.g.kuroco-front.app のようになります。
独自ドメインへの変更については KurocoFrontで独自ドメインを利用する手順をご確認ください。

うまくデプロイできない場合

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

管理画面にKurocoFrontログがありますので、そちらでログのご確認をお願いします。
KurocoFrontにファイルが反映されないのですが、何をチェックすればよいですか？を参考に、設定の再確認をお願いします。

また、Github Actionsの設定が分からない場合はサポートのSlackへご連絡ください。サポートいたします。