Kinstaは、企業や開発者向けに、ウェブプロジェクトのより迅速かつ効率的な出荷、管理を支援するクラウドホスティング会社です。

開発者をはじめとするお客様に、WordPressサイト、アプリケーション、およびデータベースの管理に役立つAPIを提供しています。

Kinsta APIを使用すると、MyKinstaにアクセスせずにタスクの自動化、データの取得、他のアプリケーションとの統合などを行うことができます。なお、APIを使用するには、APIキーが必要です。この記事では、Kinsta APIキーの作成方法および使用方法について詳しくご説明します。

APIキーの作成方法

KinstaのAPIを使用するには、MyKinstaに少なくとも1つのWordPressサイト、アプリケーション、またはデータベースのアカウントが必要になります。また、先にも触れた通り、APIを通してアカウントを認証し、アクセスするには、APIキーを作成します。

APIキーの生成方法は、以下の通りです。

  1. MyKinstaにログインします
  2. 「APIキー」画面に移動します（画面右上のユーザーアイコン＞「企業の設定」＞「APIキー」）
  3. 「APIキーを作成」をクリックします
  4. 有効期限を選択します（「カスタム」を選択すると、有効期限の開始日と時間を手動で設定可能）
  5. 一意のAPIキー名を入力します
  6. 「生成」をクリックします
MyKinstaでAPIキーを作成
MyKinstaでAPIキーを作成

APIキーを作成したら、コピーして安全な場所に保管してください。APIキーは「APIキー」画面に表示されます。APIキーを削除する場合は、APIキーの横にある「取り消す」をクリックしてください。

APIキーでKinsta APIを使用する方法

APIキーを取得すると、Kinsta API経由でKinstaのすべてのサービス（WordPress専用マネージドホスティング、アプリケーション＆データベースホスティング）とやり取りすることができるようになります。

例えば、MyKinstaの企業サイトの一覧を取得する場合、エンドポイントは/sitesとなり、APIキーは認証ヘッダーとして機能します。また、企業ID（必須パラメータ）が必要になります。cURLを使用して、以下のようにAPIリクエストを行ってください。

curl -i -X GET 
  'https://api.kinsta.com/v2/sites?company=' 
  -H 'Authorization: Bearer <YOUR_API_KEY_HERE>'

YOUR_API_KEY_HEREは、作成したAPIキーに置き換えます。

COMPANY_ID_HEREは、 企業IDに置き換えます。これによって、MyKinsta内にあるすべての企業サイトのJSONデータが返されます。

{
    "company": {
        "sites": [
            {
                "id": "YOUR_SITE_ID",
                "name": "my-test-site",
                "display_name": "Test site",
                "status": "live",
                "site_labels": []
            }
        ]
    }
}

別の例として、IDで特定のサイトを取得したいとします（GETリクエスト）。この場合のエンドポイントは、/sites/{site_id}。{site_id}は、取得したいサイトのIDに置き換えます。Node.jsを使用して、以下のようにAPIリクエストを実行します。

import fetch from 'node-fetch';

async function fetchSite() {
  const siteId = 'YOUR_SITE_ID';
  const response = await fetch(
    `https://api.kinsta.com/v2/sites/${siteId}`,
    {
      method: 'GET',
      headers: {
        Authorization: 'Bearer 
      }
    }
  );

  const data = await response.json();
  console.log(data);
}

fetchSite();

他にも、Kinsta APIで様々なタスクを実行することができます。利用可能なAPIエンドポイントと必要なパラメータの詳細については、KinstaのOpenAPI仕様書をダウンロード、エンドポイントを試すにはAPIリファレンスドキュメントをご覧ください。

アクセス権

企業の所有者、管理者、開発者は、APIキーを作成することができます。Kinsta APIへのアクセス権は、企業でのユーザー役割によって異なります。

例えば、企業の開発者によって作成されたAPIキーは、企業の所有者や管理者によって作成されたキーと同じレベルのアクセス権を持つことはありません。各ユーザー役割に設定された特定の権限によって、Kinsta APIへのアクセス制御およびセキュリティが保証されます。

Kinsta APIを使ったステータスチェッカーの構築

アプリケーション、サイト、データベースは、MyKinstaで複数の段階を経て作成されます。この段階は、ステータスで識別します。例えば、アプリケーションのデプロイメントには、「デプロイメント実行中」、「デプロイメント成功」、「デプロイメント失敗」の3段階のステータスがあります。

Kinsta APIは、MyKinsta上にあるプロジェクトのステータス情報を取得できるエンドポイントを提供します。ステータスチェッカーの構築では、JavaScript Fetch APIを使って、すべてのアプリケーション、サイト、データベースの配列を取得するために、3つのエンドポイント、/applications、/sites、/databasesとやりとりします。

リストの取得後は、JavaScriptのfind()メソッドで、ユーザーインターフェース（UI）で特定のプロジェクト名を検索することができます。プロジェクトが存在すれば、その名前とステータスが返されます。

ステータスチェッカー（ウェブアプリケーション）
ステータスチェッカー（ウェブアプリケーション）

前提条件

ステータスチェッカーの構築には、HTML、CSS、JavaScriptの基礎知識、Reactでの開発経験が求められます。なお、このプロジェクトの目的はKinsta APIの活用方法の実演にあるため、UIの作成やスタイリングの詳細については触れません。

GitHubのこのテンプレートで、Gitリポジトリを作成します。「Use this template」＞「Create a new repository」を選択し、スターターコードをGitHubアカウント内の新規リポジトリにコピーして、「include all branches」ボックスを選択してください。ローカルコンピューターにプルしたら、スターターファイルを使用するため、以下のコマンドを使って、status-checker-uiブランチに切り替えます。

git checkout status-checker-ui

npm installコマンドを実行して、必要な依存関係をインストールします。インストールが完了したら、npm run startコマンドを実行し、ローカルコンピューター上でステータスチェッカーを起動します。http://localhost:3000/にアクセスしてください。

MyKinstaプロジェクトのステータスを確認
MyKinstaプロジェクトのステータスを確認

ホームページとサービスページの2つのメインページがあり、ホームページには、Kinstaのサービス（WordPressサイト、アプリケーション、データベース）の一覧が表示されます。いずれかのサービスをクリックすると、選択したサービスの関連情報が表示されるサービスページに移動します。

例えば、「アプリケーション」をクリックすると、アプリケーション専用のサービスページに移動します。このページでは、一意の名前または表示名を使って、MyKinstaアカウント内の任意のアプリケーションを検索し、アプリケーションのステータスを取得することができます。

Kinsta APIとの対話

検索機能を実装するには、Kinstaの各サービス（WordPress専用マネージドホスティング、アプリケーション＆データベースホスティング）の取得リクエストを処理する3つの関数を作成します。それから、データの配列全体をスキャンし、検索値が存在するかどうかを検証する検索機能を実装します。

Kinsta APIを使って、MyKinstaアカウントで利用可能なデータベース、アプリケーション、ウェブサイトの一覧を取得するには、企業IDとAPIキーが必要になります。それから、プロジェクトのルートフォルダに.envファイルを作成し、Reactアプリケーションの環境変数として保存します。

REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'

これで、process.env.THE_VARIABLEを使って、プロジェクト内のどこからでもこの値にアクセスできるようになります。例えば、REACT_APP_KINSTA_COMPANY_IDにアクセスするには、process.env.REACT_APP_KINSTA_COMPANY_IDを使用します。

APIを使用する前に、Service.jsxページに3つのステートを作成し、サイト、アプリケーション、データベースの検索時に生成される出力のステータスと名前を保存します。3つ目のステートは、エラー情報を保存するためのものです。

let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');

また、Kinsta APIのURLを格納する変数も作成します。

const KinstaAPIUrl = 'https://api.kinsta.com/v2';

完了したら、Service.jsxページのフォームにある送信ボタンに、CheckQuery()関数を持つonClickイベントを貼り付け、スラッグに基づいた関数をトリガーするようにします。つまり、スラッグがデータベースを示している場合は、CheckDatabases()関数がトリガーされます。

const CheckQuery = async (name) => {
  if (slug === 'wp-site') {
      await CheckSites(name);
  } else if (slug === 'application') {
      await CheckApplications(name);
  } else if (slug === 'database') {
      await CheckDatabases(name);
  }
}

Kinsta APIでサイトの一覧を取得する

Kinsta APIを使用して、MyKinstaの企業アカウントで利用可能なサイトの一覧を取得するには、関数を作成し、企業IDをパラメータとしてクエリを渡し、APIキーでリクエストを承認します。エンドポイントは、/sitesを使用します。

const CheckSites = async (name) => {
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/sites?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
}

上記は、MyKinstaアカウントにあるすべてのサイトを取得するコードです。検索クエリが名前または表示名に一致する場合、find()メソッドを使って検索可能です。

const data = await resp.json();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);

これで、何らかの値を返したかどうかを確認する条件を作成し、ステートを設定します。そうでなければ、エラーステータスを更新し、そのようなサイトが存在しない旨を伝えるメッセージを表示することができます。

if (site) {
    setName(site.display_name);
    if (site.status === 'live') {
        setStatus('🟢 Running');
    } else if (site.status === 'staging') {
        setStatus('🟡 Staging');
    } else {
        setStatus('🟡 Unknown');
    }
    setUniqueName('');
} else {
    setError('No such site found for your account');
    setUniqueName('');
}

まとめると、特定のサイトのステータスを確認するコードは、以下のようになります。

const CheckSites = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/sites?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);
  if (site) {
      setName(site.display_name);
      if (site.status === 'live') {
          setStatus('🟢 Running');
      } else if (site.status === 'staging') {
          setStatus('🟡 Staging');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such site found for your account');
      setUniqueName('');
  }
}

注）CheckSites()関数がトリガーされるたびに、3つのステータスは、いずれも空の文字列として初期化されます。これは、以前の検索データをすべて削除するために必要になります。

Kinsta APIでアプリケーションの一覧を取得する

上でサイトの一覧を取得したのと同じ要領で、/applicationsエンドポイントを使用して、企業IDを含むクエリを渡し、find()メソッドで返された配列を検索します。

const CheckApplications = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/applications?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let appsData = data.company.apps.items;
  let app = appsData.find(app => app.unique_name === name || app.name === name || app.display_name === name);
  if (app) {
      setName(app.display_name);
      if (app.status === 'deploymentSuccess') {
          setStatus('🟢 Running');
      } else if (app.status === 'deploymentFailed') {
          setStatus('🔴 Failed');
      } else if (app.status === 'deploymentPending') {
          setStatus('🟡 Pending');
      } else if (app.status === 'deploymentInProgress') {
          setStatus('🟡 In Progress');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such app found for your account');
      setUniqueName('');
  }
}

Kinsta APIでデータベースの一覧を取得する

データベースの一覧を取得する場合は、/databasesエンドポイントを使用します。

const CheckDatabases = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/databases?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let databasesData = data.company.databases.items;
  let database = databasesData.find(database => database.name === name || database.display_name === name);
  if (database) {
      setName(database.display_name);
      if (database.status === 'ready') {
          setStatus('🟢 Running');
      } else if (database.status === 'creating') {
          setStatus('🟡 Creating');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such database found for your account');
      setUniqueName('');
  }
}

これが完了したら、Kinsta APIを使用したReactプロジェクトが完了です。アプリがうまく動作するよう、この関数から返されるデータをマークアップコードに追加します。

{status !== '' && (
  <div className="services">
      <div className="details">
          <div className="name-details">
              <span> className="tag">Name: </span>
              <span> className="value">{name}</span>
          </div>
          <div className="status-details">
              <span> className="tag">Status: </span>
              <span> className="value"> {status}</span>
          </div>
      </div>
  </div>
)}

また、エラー発生時にトリガーされる条件も追加します。例えば、ユーザーがMyKinstaに存在しないプロジェクトを検索すると、エラーが表示されます。

{error !== '' && (
  <div className="services">
      <div className="details">
          <p>{error}</p>
      </div>
  </div>
)}

これでステータスチェッカーが正常に動作し、MyKinstaのアプリケーション、サイト、またはデータベースのステータスを確認することができる状態になりました。こちらのGitHubリポジトリでコードをクロスチェックすることも可能です。

ステータスチェッカーをKinstaにデプロイする方法

ReactプロジェクトをKinstaにデプロイするには、任意のGitサービスにプロジェクトをプッシュします。GitHub、GitLab、Bitbucketのプロジェクトは、Kinstaにデプロイ可能です。

リポジトリをKinstaにデプロイするには、以下の手順に従ってください。

  1. MyKinstaにログイン、またはアカウントを作成します
  2. 左側メニューで「アプリケーション」を選択して「サービスを追加」をクリックします
  3. ドロップダウンメニューから「アプリケーション」を選択し、KinstaでReactアプリケーションをデプロイします
  4. 表示されたウィンドウでデプロイしたいリポジトリを選択します（複数のブランチがある場合は、ブランチを選択し、アプリケーションに名前をつけてください）
  5. 25箇所のデータセンターの中から任意の場所を選択します（アプリケーションのstartコマンドは自動検出されます）

なお、APIキーをGitサービスなどにプッシュするのは安全ではありません。.envファイルで指定された同じ変数名と値を使用し、環境変数として追加してホストしてください。

デプロイ時にMyKinsta上で環境変数を設定
デプロイ時にMyKinsta上で環境変数を設定

アプリケーションのデプロイは、通常数分以内に完了します。デプロイが完了すると、デプロイ済みアプリケーションへのリンクが表示されます。この場合のリンクは「https://status-checker-1t256.kinsta.app/」になります。

まとめ

Kinsta APIキーによって、容易にタスクを自動化したり、データを取得したり、他のアプリケーションと統合したりすることができます。ただし、アクセスキーは必ず安全な保管場所に保存してください。

早速Kinsta APIを活用して、レポートの作成、タスクのスケジュール、WordPressサイトの作成、あらゆるアクティビティの自動化などを行ってみてください。

Kinsta APIに追加してほしいエンドポイントはありますか？ご要望がありましたら、以下のコメント欄でお聞かせください。

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.