GitHubからKurocoFrontへソースをデプロイする方法
KurocoFrontへGitHubを利用したデプロイ方法を紹介します。
KurocoFrontへのデプロイ手順
1. リポジトリ準備
GitHubにてKurocoFrontへデプロイしたいリポジトリを準備します。
前提条件として、静的なファイルしかホスティングできませんのでリポジトリにはNuxt.js等のJavaScriptフレームワークや、HTML/CSS/JSファイルや画像などのメディアファイルが登録されている必要があります。 上記画面はNuxt.jsのリポジトリを表示しております。
2. KurocoFrontよりGitHubリポジトリと接続する
[KurocoFront] -> [GitHub] をクリックし、KurocoFrontを表示します。
KurocoFrontより「GitHubリポジトリと接続する」をクリックします。
GitHubへログインが求められますので、ログインをします。
ログインするとGitHubの画面が表示されます。
「Repository access」より接続するリポジトリを選択します。
リポジトリ接続設定は後から変更が可能です。１つのアカウントで複数のKurocoを利用する場合は、KurocoのGitHub Appsは1つですので、ここで複数のリポジトリを選択することになります。
接続できるリポジトリは管理者権限を持っているリポジトリのみになりますので、ご注意ください。
リポジトリを選択したら、「Save」をクリックします。
再度Kurocoへのログインを求められますので、ログインをします。
接続が完了すると、KurocoFrontの画面に遷移します。
以上でKurocoFrontとGitHubリポジトリの接続が完了となります。
3. kuroco_front.jsonを作成する
KurocoFrontを利用するために、kuroco_front.jsonをルートディレクトリに配置する必要があります。
Nuxtの場合は下記kuroco_front.jsonを /static 配下に作成します。
{
"rewrites": [
{
"source": ".*",
"destination": "/index.html"
}
],
"redirects": [],
"basic":[],
"ip_restrictions":[]
}
kuroco_front.jsonではURLのリライト処理やBasic認証やIPアドレス制限の利用が可能です。Basic認証のパスワードはプレーンテキストになっております。リポジトリをpublicにする場合はご注意ください。
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へご連絡ください。サポートいたします。