Web制作会社にとって、急激なスケールは大きな負担になりがちです。繰り返し作業が増え、リソースは不足し、ワークフローは分断され、運用プロセスも次第に非効率化していきます。その結果、チーム全体の負荷も高まっていきます。
健全で持続可能な成長を実現するには、「より多く働く」のではなく「より効率的に働く」という発想への転換が必要です。自動化は、単なる便利機能ではなく、成長を維持するための重要な戦略です。
「効率的に働く」という考え方を、実際の運用フローへ落とし込むには、インフラと管理ツールを連携させるのは一つの手です。
この記事では、KinstaのサーバーインフラとTrelloのプロジェクト管理システムを連携し、カスタム自動化による同期レイヤーを構築する方法をご紹介します。
インフラと管理ツールの分断
Trelloで制作案件を管理している場合、新規サイト立ち上げ時の定型作業には馴染みがあるはずです。サイトを公開するたびに、Trelloボードを手動で作成・設定し、DNS設定からSEO最適化まで、必要なタスクをチェックリストとして登録していく必要があります。
さらに、日々の運用保守では、クライアントサイトを安定稼働させるために、リソース使用量の確認やアップデート状況の監視など、同じ確認作業を繰り返すことになります。手動運用では、帯域幅やディスク使用量を確認するだけでも、複数の管理画面を行き来しなければなりません。
クライアントサイトが増えるほど、ヒューマンエラーのリスクも高まり、「監視疲れ」が起こりやすくなります。一般的なクライアントサイト運用では、以下のような工程が発生します。
- オンボーディング：環境のプロビジョニング、DNS設定、SSL導入、CI/CDセットアップ
- 運用フェーズ：サーバーの健全性やリソース使用量の監視、ダウンタイムや想定外のコスト超過の防止
実際には、これら2つのフェーズでは継続的なチーム間の連携が欠かせません。しかし最大の問題は、サイロ化にあります。サーバー運用とプロジェクト管理が、それぞれ分断された別々の環境で管理されているのです。
たとえば、サイトがリソース上限へ近づいていたとしても、その情報がプロジェクトマネージャーへ共有されなければ、対応の遅れや運用の非効率化につながります。
成長を目指す現代の制作会社では、こうした手作業による連携には限界があります。インフラ（Kinsta）と管理ツール（Trello）の間で、情報が自動的かつシームレスに流れる仕組みが必要です。
そこで役立つのがKinsta APIです。サーバー環境のデータを取得し、プロジェクトマネージャーが実際に活用できる情報へ変換することで、インフラと運用管理をつなぐ役割を果たします。
KinstaとTrelloを組み合わせるメリット
効果的な自動化を実現するには、適切なツール選びが欠かせません。KinstaとTrelloは、技術運用とプロジェクト管理の間に自動化された連携を構築できる強力なAPIを備えているため、非常に相性の良い組み合わせです。
- Kinsta API：KinstaはREST APIを提供しており、環境のプロビジョニング、リアルタイム分析の取得、サーバーログの抽出など、さまざまな技術・運用タスクをプログラムから実行可能。そのため、単なるサーバー環境ではなく、「操作可能なインフラ」として活用できる。
- Trello：Trelloは単なるタスク管理ツールではなく、カンバンボードを通じて、制作会社のワークフローを可視化できるプロジェクト管理システム。さらにTrello APIを利用することで、静的なタスクボードを、サーバーイベントに応じて自動的に更新される動的な運用環境へ変えることができる。
KinstaとTrelloを統合することで、MyKinsta上のインフラデータを、チームにとって実用的な運用情報へ変換できます。手作業による確認、対応漏れ、不要な運用負荷を減らし、開発チームはより価値の高い業務へ集中できるようになります。
以下、必要なツールを準備し、自動化環境を構築する実例をご紹介していきます。
必要なツールを準備する
コードを書き始める前に、以下を用意してください。
- Kinsta APIキー
- Trello APIキー
- Trelloトークン
- GitHubコードリポジトリ
まずはKinsta APIキーを作成します。
ステップ1. Kinsta APIキーの生成
Kinsta APIキーを使用すると、API経由でサーバーサービスにアクセスできます。以下の手順で、新規Kinsta APIキーを作成します。
- MyKinstaに移動
- 右上のユーザー名をクリックして「企業の設定」＞「APIキー」に移動
- 「APIキーを作成」をクリック
- 有効期限を選択するか、キーの有効期限の開始日時を設定
- キーに一意の名前をつける
- 「生成」をクリック
生成したAPIキーは、二度と確認することができなくなるため、安全な場所に保管してください。紛失した場合は、APIキーを失効させて新たにAPIキーを生成する必要があります。
ステップ 2. Trello APIキーとトークンの生成
TrelloでAPIキーを生成するにはまず、Trello Power-Up（Trelloアプリ）を作成する必要があります。最初に、TrelloのPower-Up管理画面へアクセスしてください。
「New」をクリックし、ポップアップするフォームに必要事項を入力してください。
情報を入力して保存すると、Power-Upのダッシュボードへリダイレクトされます。必要な項目を設定したら、左側メニューの「API Key」をクリックし、画面中央の「Generate a new API key」を選択してください。
以上で完了です。これでTrello APIキーを取得できました。後で必要になるため、安全な場所に保管しておいてください。
ただし、Trelloをアプリへ統合するには、APIキーだけでなく、トークンも生成する必要があります。画面右側の「Token」をクリックすると、Power-Upへ付与する権限一覧が表示されます。内容を確認したうえで、Trelloデータへのアクセスを許可してください。
Trelloトークンは、安全な場所へコピーして保管してください。
ステップ3. GitHubにコードリポジトリを作成
GitHubは単なるコードリポジトリではありません。繰り返し実行するタスクや自動化を構築・実行するためのプラットフォームとしても活用できます。
GitHubでは以下の3つを設定します。
- コードを保存するリポジトリ
- APIキーやトークンを安全に保管するためシークレット
- 自動化処理の手順を定義するワークフロー
1. GitHubリポジトリを作成する
GitHubで緑色の「New」をクリックします。
- リポジトリ名を入力
- 説明を追加
- 「Private」を選択
- 「Add a README file」にチェック
- 「Create repository」をクリック
2. GitHub Actionsのシークレットを設定する
次に、GitHub Actionsのシークレットを設定します。このステップは、APIキーをコードへ直接記述せず、安全に管理するために必要になります。
作成したリポジトリを開き、ページ上部の「Settings」タブをクリックします。続いて、左側メニューの「Secrets and variables」＞「Actions」を選択してください。
「New repository secret」をクリックし、APIキーとトークンを追加します。
3. ワークフローを設定する
次に、GitHub Actionsへリポジトリの書き込み権限を付与します。リポジトリの「Settings」から「Actions」＞「General」へ移動します。
その後、「Workflow permissions」セクションまでスクロールし、「Read and write permissions」を選択します。最後に「Save」をクリックしてください。
Kinsta APIとTrelloでオンボーディングを自動化
これで、APIキーとTrelloトークンの準備が整いました。続いて、Kinstaのサーバー環境とTrelloのプロジェクト管理システムを連携させます。
ここでは、GitHub Actionsを使って、KinstaとTrelloを同期するスクリプトを定期実行します。この自動化プロセスでは、Kinsta APIを一定間隔で照会して新しいサイトを確認し、Trello APIを使って、TrelloボードがKinsta上のサイトポートフォリオと一致するように更新します。
GitHubでは、スクリプトをいつ実行するかを定義するYAML設定ファイルを作成します。この例では、スクリプトを30分ごとに実行します。
リポジトリの「Code」画面に戻り、「Add file」＞「Create new file」をクリックします。
ファイル名に.github/workflows/main.ymlを貼り付けます。GitHubが自動的に.githubとworkflowsフォルダを作成したら、以下のコードを貼り付けます。
name: Kinsta-Trello Integration
on:
schedule:
- cron: '*/30 * * * *' # Run every 30 minutes
workflow_dispatch: # Allows to start it manually for testing
jobs:
run-sync:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Run automation script
env:
KINSTA_API_KEY: ${{ secrets.KINSTA_API_KEY }}
KINSTA_COMPANY_ID: ${{ secrets.KINSTA_COMPANY_ID }}
TRELLO_API_KEY: ${{ secrets.TRELLO_API_KEY }}
TRELLO_TOKEN: ${{ secrets.TRELLO_TOKEN }}
run: node index.js完了したら、緑色の「Commit changes…」をクリックします。これで初期設定は完了です。次に、同期スクリプトを作成していきます。
ステップ2. スクリプトを作成
GitHubプロジェクトのルートディレクトリにindex.jsファイルを作成し、以下のセクションで示すコードを追加します。
1. 変数の宣言
まず、スクリプトがタスクを実行するために必要な変数を宣言します。
const KINSTA_API_URL = 'https://api.kinsta.com/v2';
const TRELLO_API_URL = 'https://api.trello.com/1';
const secrets = {
kinsta: process.env.KINSTA_API_KEY,
company: process.env.KINSTA_COMPANY_ID,
trelloKey: process.env.TRELLO_API_KEY,
trelloToken: process.env.TRELLO_TOKEN
};2. 自動化関数の定義
続いて、自動化処理を実行する関数を定義します。
async function startAutomation() {
try {
console.log("🚀 Starting Kinsta-Trello automation...");
const kinstaUrl = `${KINSTA_API_URL}/sites?company=${secrets.company}`;
const kinstaResponse = await fetch(kinstaUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${secrets.kinsta}`
}
});
if (!kinstaResponse.ok) throw new Error(`Kinsta API error: ${kinstaResponse.status}`);
const kinstaData = await kinstaResponse.json();
const sites = kinstaData.company?.sites || [];
console.log(`✅ Successfully fetched ${sites.length} sites from Kinsta.`);
const trelloResponse = await fetch(`${TRELLO_API_URL}/members/me/boards?key=${secrets.trelloKey}&token=${secrets.trelloToken}`);
if (!trelloResponse.ok) throw new Error(`Trello API error: ${trelloResponse.statusText}`);
const trelloBoards = await trelloResponse.json();
for (const site of sites) {
const boardExists = trelloBoards.find(board => board.name === site.name);
if (!boardExists) {
console.log(`✨ New site found: ${site.name}. Provisioning workflow...`);
const createBoardUrl = `${TRELLO_API_URL}/boards/?name=${encodeURIComponent(site.name)}&defaultLists=false&key=${secrets.trelloKey}&token=${secrets.trelloToken}`;
const newBoardResponse = await fetch(createBoardUrl, { method: 'POST' });
const newBoard = await newBoardResponse.json();
if (newBoardResponse.ok) {
console.log(`✅ Board created for ${site.name}. Setting up workflow...`);
const toDoListId = await createWorkflow(newBoard.id);
if (toDoListId) {
await createGoLiveCard(toDoListId);
}
} else {
console.log(`❌ Failed to create board for ${site.name}.`);
}
} else {
console.log(`ℹ️ Site "${site.name}" already has a board. Skipping.`);
}
}
console.log("🏁 Automation workflow finished!");
} catch (error) {
console.error("❌ Critical error during automation:", error.message);
}
}
startAutomation();この関数を、ブロックごとに見ていきましょう。
最初のconsole.logは、処理が開始されたことを示しています。
console.log("🚀 Starting Kinsta-Trello automation...");以下は、MyKinstaの企業アカウントからサイトを取得します。
const kinstaUrl = `${KINSTA_API_URL}/sites?company=${secrets.company}`;
const kinstaResponse = await fetch(kinstaUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${secrets.kinsta}`
}
});
if (!kinstaResponse.ok) throw new Error(`Kinsta API error: ${kinstaResponse.status}`);
const kinstaData = await kinstaResponse.json();
const sites = kinstaData.company?.sites || [];
console.log(`✅ Successfully fetched ${sites.length} sites from Kinsta.`);kinstaResponse.okがfalseの場合は、エラーメッセージを返す。APIが正常なレスポンスを返した場合、この関数はサイト一覧をsites配列へ保存し、成功メッセージを表示。
次に既存のTrelloボードを取得します。
const trelloResponse = await fetch(`${TRELLO_API_URL}/members/me/boards?key=${secrets.trelloKey}&token=${secrets.trelloToken}`);
if (!trelloResponse.ok) throw new Error(`Trello API error: ${trelloResponse.statusText}`);
const trelloBoards = await trelloResponse.json();次に、同期ロジックを見ていきます。
for (const site of sites) {
const boardExists = trelloBoards.find(board => board.name === site.name);
if (!boardExists) {
console.log(`✨ New site found: ${site.name}. Provisioning workflow...`);
const createBoardUrl = `${TRELLO_API_URL}/boards/?name=${encodeURIComponent(site.name)}&defaultLists=false&key=${secrets.trelloKey}&token=${secrets.trelloToken}`;
const newBoardResponse = await fetch(createBoardUrl, { method: 'POST' });
const newBoard = await newBoardResponse.json();
if (newBoardResponse.ok) {
console.log(`✅ Board created for ${site.name}. Setting up workflow...`);
const toDoListId = await createWorkflow(newBoard.id);
if (toDoListId) {
await createGoLiveCard(toDoListId);
}
} else {
console.log(`❌ Failed to create board for ${site.name}.`);
}
} else {
console.log(`ℹ️ Site "${site.name}" already has a board. Skipping.`);
}
}-
forループでは、sites配列の各要素、つまりMyKinsta企業アカウント内の各サイトを順番に処理し、それぞれに対応するTrelloボードが存在するかどうかを確認。サイト名と一致するボードが存在しない場合は、新しいボードを作成する。 -
新規ボードが正常に作成された場合（
if (newBoardResponse.ok) { ... }）、後述するcreateWorkflow()とcreateGoLiveCard()を呼び出し。createGoLiveCard()は「To Do」リストに対してのみ呼び出されます。
3. createWorkflow() 関数の定義
createWorkflow()は、Trelloボード内に3つのデフォルトリストを作成し、To DoリストのIDを返します。
async function createWorkflow(boardId) {
const lists = ['To Do', 'Doing', 'Done'];
let toDoListId = null;
for (const listName of lists) {
const url = `${TRELLO_API_URL}/boards/${boardId}/lists?name=${encodeURIComponent(listName)}&key=${secrets.trelloKey}&token=${secrets.trelloToken}`;
const response = await fetch(url, { method: 'POST' });
const newList = await response.json();
console.log(` - List "${listName}" created.`);
if (listName === 'To Do') toDoListId = newList.id;
}
return toDoListId;
}4. ヘルパー関数 createGoLiveCard() の定義
次に、Go-Live Pipeline用のチェックリストを生成する関数を定義します。
async function createGoLiveCard(listId) {
const cardUrl = `${TRELLO_API_URL}/cards?idList=${listId}&name=${encodeURIComponent('🚀 Go-Live Pipeline')}&desc=${encodeURIComponent('Standard agency tasks for site launch.')}&key=${secrets.trelloKey}&token=${secrets.trelloToken}`;
const cardResponse = await fetch(cardUrl, { method: 'POST' });
const card = await cardResponse.json();
if (cardResponse.ok) {
const checklistUrl = `${TRELLO_API_URL}/checklists?idCard=${card.id}&name=Launch%20Tasks&key=${secrets.trelloKey}&token=${secrets.trelloToken}`;
const checklistResponse = await fetch(checklistUrl, { method: 'POST' });
const checklist = await checklistResponse.json();
const tasks = [
'Point DNS to Kinsta',
'Install & Force SSL (Let\'s Encrypt)',
'Set up Search Console & Analytics',
'Performance Test (Kinsta APM)',
'Final Backup before Launch'
];
for (const task of tasks) {
await fetch(`${TRELLO_API_URL}/checklists/${checklist.id}/checkItems?name=${encodeURIComponent(task)}&key=${secrets.trelloKey}&token=${secrets.trelloToken}`, {
method: 'POST'
});
}
console.log(` - Go-Live Pipeline card with checklist created.`);
}
}この関数では、以下の処理を行います。
- Trello APIを使って「Go-Live Pipeline」カードを作成
cardResponse.okがtrueの場合、「To Do」カードへ5項目のチェックリストを追加
5. ワークフローの実行
続いては、コードをテストしてみます。まず変更をコミットし、その後、上部メニューの「Actions」タブへ移動します。
完了したら、左側メニューからアプリをクリックします。以下は、「Kinsta-Trello Integration」アプリです。
右側の「Run workflow」ボタンをクリックすると、ワークフローが開始されます。その後、実行中のワークフローを選択し、「Run automation script」をクリックしてください。ここでは、実行中プロセスの各ステップに加え、console.logによる成功メッセージや、問題が発生した場合のエラーメッセージを確認できます。
上のスクリーンショットのように、このスクリプトはTrelloボードを作成し、「Go-Live Pipeline」を含む3つのリストを自動生成します。次の画像では、新規作成されたTrelloボードと、「To Do」カード内に追加された「Go-Live Pipeline」チェックリストを確認できます。
Kinsta APIとTrelloによるプロアクティブな監視
KinstaサーバーとTrelloの連携は、初期オンボーディングだけにとどまりません。両APIを活用することで、インフラとプロジェクト管理ツールの間で継続的な情報連携を実現し、チームはサイトの状態をリアルタイムで把握できるようになります。
たとえば、帯域幅の急増やディスク容量不足といった重要なイベントが発生した場合、自動的にTrelloカードを作成してチームへ通知できます。さらに、対応用のチェックリスト付きカードを技術チーム向けボードへ自動追加することも可能です。
また、オンボーディング自動化で使用したのと同じロジックとツールを利用して、サイト監視やヘルスチェック管理も自動化できます。そのためには、新しい設定ファイルと専用スクリプトを追加します。GitHubへ戻り、以下のコードを使って .github/workflows/health-check.ymlファイルを作成してください。
name: Daily Health Check
on:
schedule:
- cron: '0 9 * * *' # Runs at 09:00
workflow_dispatch: # Start manually
jobs:
health-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- name: Run Health Check
env:
KINSTA_API_KEY: ${{ secrets.KINSTA_API_KEY }}
KINSTA_COMPANY_ID: ${{ secrets.KINSTA_COMPANY_ID }}
TRELLO_API_KEY: ${{ secrets.TRELLO_API_KEY }}
TRELLO_TOKEN: ${{ secrets.TRELLO_TOKEN }}
run: node health-check.jsこの設定スクリプトの主なポイントは以下の通りです。
schedule: - cron: '0 9 * * *'により、毎日 UTC 09:00 にスクリプトを実行する自動タイマーを設定workflow_dispatchを追加することで、GitHub の「Actions」タブから任意のタイミングでスクリプトを実行（開発時やデバッグ時に特に便利）- さらに一連の処理ステップを定義。最後のコマンドでは、
nodeを使ってhealth-check.jsファイルを実行
1. 変数の宣言
リポジトリのルートディレクトリへ移動し、health-check.jsという名前のファイルを作成します。続いて、以下の変数を宣言してください。
const KINSTA_API_URL = 'https://api.kinsta.com/v2'；
const TRELLO_API_URL = 'https://api.trello.com/1'；
const secrets = {
kinsta: process.env.KINSTA_API_KEY、
company: process.env.KINSTA_COMPANY_ID、
trelloKey: process.env.TRELLO_API_KEY、
trelloToken: process.env.TRELLO_TOKEN
};2. Kinstaサイトの取得
getKinstaSites()関数を定義します。
async function getKinstaSites() {
const url = `${KINSTA_API_URL}/sites?company=${secrets.company}`;
const response = await fetch(url, {
method: 'GET',
headers: { 'Authorization': `Bearer ${secrets.kinsta}` }
});
if (!response.ok) throw new Error(`Kinsta API error: ${response.status}`);
const data = await response.json();
return data.company?.sites || [];
}この関数は、MyKinsta内の企業のサイトのリストか空の配列を返します。
3. 帯域幅の使用量を取得
サイトの帯域幅使用量を返すgetBandwidthUsage()という関数を定義します。
async function getBandwidthUsage(siteId) {
const url = `${KINSTA_API_URL}/sites/${siteId}/usage/bandwidth/this-month`;
const response = await fetch(url, {
method: 'GET',
headers: { 'Authorization': `Bearer ${secrets.kinsta}` }
});
if (!response.ok) return null;
const data = await response.json();
const bytes = data.site?.this_month_usage?.bandwidth;
return bytes !== undefined ? Math.round(bytes / (1024 * 1024)) : 0;
}4. Trelloカードの作成
以下の関数は、「⚠️ Bandwidth Alert: High Traffic」というタイトルのTrelloカードを生成します。
async function postTrelloAlert(siteName, message) {
const boardsResp = await fetch(`${TRELLO_API_URL}/members/me/boards?key=${secrets.trelloKey}&token=${secrets.trelloToken}`);
const boards = await boardsResp.json();
const board = boards.find(b => b.name === siteName);
if (board) {
const listsResp = await fetch(`${TRELLO_API_URL}/boards/${board.id}/lists?key=${secrets.trelloKey}&token=${secrets.trelloToken}`);
const lists = await listsResp.json();
const targetList = lists.find(l => l.name === 'To Do') || lists[0];
const cardsResp = await fetch(`${TRELLO_API_URL}/lists/${targetList.id}/cards?key=${secrets.trelloKey}&token=${secrets.trelloToken}`);
const cards = await cardsResp.json();
const alertTitle = `⚠️ Bandwidth Alert: High Traffic`;
if (!cards.find(c => c.name === alertTitle)) {
await fetch(`${TRELLO_API_URL}/cards?idList=${targetList.id}&name=${encodeURIComponent(alertTitle)}&desc=${encodeURIComponent(message)}&key=${secrets.trelloKey}&token=${secrets.trelloToken}`, {
method: 'POST'
});
console.log(`📌 Alert posted for ${siteName}`);
}
}
}if (!cards.find(...))という条件にも注目。これは同じ通知カードが重複して作成されるのを防ぎ、Trelloボードが不要なアラートで埋まってしまうのを防ぐためのもの。
5. スクリプトの実行
最後に、サイトを監視する関数を定義します。
async function runMonitoring() {
console.log("📊 Starting standalone Health Check...");
const sites = await getKinstaSites();
for (const site of sites) {
const usage = await getBandwidthUsage(site.id);
if (usage !== null) {
console.log(`Site: ${site.name} | Usage: ${usage} MB`);
if (usage > 100) { // Test threshold
await postTrelloAlert(site.name, `Bandwidth usage: ${usage} MB.`);
}
}
}
}
runMonitoring().catch(console.error);実行されると、この関数は以前に定義した関数を呼び出します。
getKinstaSites()：MyKinstaの企業サイトの一覧を取得getBandwidthUsage()：各サイトの今月の帯域幅使用量をチェックpostTrelloAlert()：しきい値に達し、以前のカードが存在しない場合にのみ、自動的にTrelloカードを生成
Kinstaでより効率的にスケール
事業規模が拡大しても、それに比例して作業量を増やす必要はありません。適切に設計された自動化戦略を導入することで、繰り返し発生する手作業を削減し、運用負荷を増やすことなく、新規クライアント案件やサイトを追加できるようになります。
また、サイトインフラとプロジェクト管理ツールを連携することで、サーバー環境のデータを実際の運用対応へスムーズにつなげられるようになります。
Kinsta APIとGitHub Actionsを組み合わせれば、オンボーディングや監視業務を自動化でき、ヒューマンエラーの削減、チーム負荷の軽減、問題発生時の迅速な対応につながります。その結果、問題が起きてから対応する「火消し型」の運用ではなく、先回りして管理できる「予防型」に切り替えることができます。
運用ワークフローの自動化をお考えの方は、Kinstaのプランをぜひチェックしてみてください。
