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

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

KurocoFrontへのデプロイ手順

1. リポジトリ準備

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

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

以上で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 を作成します。

Image (fetched from Gyazo)

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

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

5. サイトを表示する

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

Image (fetched from Gyazo)

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

ドメインについて

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

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

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

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