Kantan CMS Docs

Appearance

チュートリアル4: GitHub Actionsの作成 ​

ここまでで、Kantan CMSには強力なGitHub統合機能があることを発見されたことでしょう。このチュートリアルでは、コードやコンテンツに変更を加えるたびにウェブサイトを自動的にデプロイする、自動化されたGitHub Actionsワークフローの作成方法をご案内します。

前提条件 ​

このチュートリアルを始める前に、以下を確認してください：

  • GitHubにアップロードされたプロジェクト（前のチュートリアルから）
  • チュートリアル3からのMCPセットアップ
  • チュートリアル3で作成したbuild.shスクリプト
  • GitHubリポジトリへの管理者アクセス

GitHub統合のセットアップ ​

ステップ1: Kantan CMSアプリを認証する ​

  1. https://github.com/apps/kantan-cms-appにアクセスする
  2. **「インストール」または「設定」**をクリックする
  3. Kantan CMSと統合したいリポジトリを選択する
  4. 以下を許可するために必要な権限を付与する：
    • リポジトリへのアクセス
    • ビルドとデプロイメントのトリガー
    • リポジトリコンテンツの読み取り
    • デプロイメントステータスの作成

この認証により、Kantan CMSはGitHubリポジトリから直接ビルドとデプロイメントを自動的にトリガーできるようになります。

GitHub Actionsワークフローの生成 ​

ステップ1: MCPを使用してワークフローを作成する ​

MCPが有効なAIエディタを開き、以下のプロンプトを使用してGitHub Actionsワークフローを生成します：

CMSにウェブサイトをアップロードするために使用できるGitHub Actionsワークフローを生成してください。
`build.sh`を使用してウェブサイトをアップロードします。

ワークフローは以下を行う必要があります：
- mainブランチへのプッシュでトリガーする
- 必要な環境をセットアップする
- ビルドスクリプトを実行する
- 依存関係を処理する
- 明確なログとエラー処理を提供する

ステップ2: 生成されたワークフローを確認する ​

AIは通常.github/workflows/deploy.ymlのような名前のワークフローファイルを生成します。以下に注目してください：

  • ファイル名と場所
  • トリガー条件（ワークフローが実行されるタイミング）
  • 設定する必要がある環境変数
  • 依存関係とセットアップ手順

ステップ3: ワークフローをカスタマイズする（必要に応じて） ​

生成されたワークフローを確認し、特定のニーズに合わせてカスタマイズします：

  • トリガー条件の調整（特定のブランチ、プルリクエストなど）
  • 環境固有の設定の追加
  • 追加のテストまたは検証ステップの追加
  • 通知設定の構成

Kantan CMS統合の設定 ​

ステップ1: CMSでGitHub統合をセットアップする ​

  1. Kantan CMSダッシュボードで設定 > GitHub統合に移動する
  2. リポジトリ情報を入力する：
    • リポジトリURL: GitHubリポジトリのURL
    • ブランチ: デプロイしたいブランチ（通常はmainまたはmaster）
    • ビルドコマンド: build.shスクリプトへの参照
  3. 設定を保存する

ステップ2: 環境変数を設定する ​

GitHubリポジトリの設定で：

  1. 設定 > シークレットと変数 > アクションに移動する
  2. 以下のリポジトリシークレットを追加する：
    • CMS_API_KEY: Kantan CMS APIキー
    • PROJECT_ID: Kantan CMSプロジェクトID
    • ビルドスクリプトに必要なその他の環境変数

GitHub Actionsでのデプロイ ​

ステップ1: 初期デプロイメントをトリガーする ​

  1. Kantan CMSでホスティング > ビルドに移動する
  2. **「GitHubでビルド」**を選択する
  3. 必要な情報を入力する：
    • リポジトリの詳細
    • デプロイするブランチ
    • 追加の設定
  4. **「デプロイメントをトリガー」**をクリックする

ステップ2: デプロイメントを監視する ​

  1. GitHubリポジトリのアクションタブを確認する
  2. ワークフローの実行を監視する
  3. エラーや問題がないかログを確認する
  4. ビルドが正常に完了することを確認する

ウェブサイトの公開 ​

ステップ1: 結果をプレビューする ​

  1. GitHub Actionが正常に完了したら
  2. Kantan CMSでホスティング > プレビューに移動する
  3. デプロイされたウェブサイトを確認する
  4. すべてのコンテンツが正しく表示されていることを確認する
  5. フォームやインタラクティブな要素をテストする

ステップ2: 本番環境にデプロイする ​

  1. プレビューに満足したら、**「デプロイ」**をクリックする
  2. ウェブサイトはライブドメインにデプロイされます
  3. デプロイメントはチュートリアル1で設定したカスタムドメインからアクセスできます

自動化ワークフローのメリット ​

GitHub Actionsが設定されたことで、いくつかのメリットが得られます：

継続的インテグレーション ​

  • コード変更をプッシュすると自動ビルド
  • コンテンツの更新が自動デプロイメントをトリガー
  • すべての変更にわたる一貫したデプロイメントプロセス

バージョン管理 ​

  • Gitを通じてウェブサイトへのすべての変更を追跡
  • 問題が発生した場合のロールバック機能
  • チームメンバーとの協調的な開発

効率的な開発 ​

  • 手動アップロードステップ不要
  • 自動テストを統合可能
  • デプロイメント通知で情報を把握

ワークフローカスタマイズの例 ​

複数環境へのデプロイメント ​

yaml
# developブランチでステージングにデプロイ
# mainブランチで本番環境にデプロイ
on:
  push:
    branches: [main, develop]

条件付きデプロイメント ​

yaml
# 特定のファイルが変更された場合のみデプロイ
paths:
  - 'src/**'
  - 'content/**'
  - 'build.sh'

高度なビルドステップ ​

yaml
# デプロイメント前にテストを含める
- name: テストを実行
  run: npm test
  
- name: ビルドとデプロイ
  run: ./build.sh

一般的な問題のトラブルシューティング ​

ワークフローが開始しない ​

  • Kantan CMSアプリのリポジトリ権限を確認する
  • ワークフローファイルの構文を確認する
  • 必要なすべてのシークレットが設定されていることを確認する

ビルドスクリプトエラー ​

  • GitHub Actionsのログを確認する
  • すべての依存関係がCI環境で利用可能であることを確認する
  • 環境変数が適切に設定されていることを確認する

デプロイメントの問題 ​

  • APIキーが有効で適切な権限を持っていることを確認する
  • Kantan CMSサービスのステータスを確認する
  • CMS設定でリポジトリ構成を確認する

高度な設定 ​

カスタムビルド環境 ​

GitHub Actions環境をカスタマイズできます：

  • 特定のNode.jsバージョンを使用する
  • 追加の依存関係をインストールする
  • カスタムビルドツールを設定する
  • データベース接続を設定する（必要な場合）

他のサービスとの統合 ​

ワークフローを拡張して以下と統合します：

  • デプロイメントステータスのためのSlack/Discord通知
  • パフォーマンス監視ツール
  • コンテンツ配信ネットワーク（CDN）
  • アナリティクスとトラッキングサービス

次のステップ ​

おめでとうございます！これで完全に自動化されたデプロイメントパイプラインが完成しました：

  • 変更をプッシュすると自動的にウェブサイトをビルドしてデプロイ
  • Kantan CMSコンテンツをシームレスに統合
  • プロフェッショナルな開発ワークフローを提供
  • チームとプロジェクトのニーズに合わせてスケール

Kantan CMSのセットアップは、プロフェッショナルグレードの自動化で完了しました。システムが自動的にデプロイメントを処理する間、コンテンツの作成と機能の開発に集中できます。

TechMO LLC.

Copyright © 2025-present