長年にわたり、KinstaはMyKinstaを通じたウェブサイト管理の合理化において大きな進歩を遂げてきました。使いやすいコントロールパネルにより、PHPエンジンの再起動やサイトのキャッシュクリアなどの様々なメンテナンス関連の操作を実行することができます。

そして、最近のKinsta API導入により、ウェブサイト管理の利便性は一つ上のレベルに達しています。開発者の手間を省くKinsta APIの可能性は無限大です。管理プロセスを簡素化し、必要であればカスタムインターフェースを作成するなどして、重要なタスクを自動化する仕組みを構築することもできます。

今回の記事では、Kinsta APIの用途について掘り下げ、Kinsta APIを使用してPHPエンジンの再起動やキャッシュクリアなどのメンテナンスタスクを時間指定で実行する、Reactアプリケーションを構築する方法をご紹介します。

今回のアプリケーションのライブデモはこちらで確認可能です。

Site tools scheduler app demo
サイトツールスケジューラアプリのデモ

Kinsta APIを理解する

Kinsta APIは、KinstaのWordPress専用マネージドホスティングプラットフォームとプログラムを介してやり取りすることを可能にする強力な機能です。サイトの作成、サイト情報の取得、サイトのステータスの取得など、Kinstaが提供するサービスに関連する様々なタスクを自動化することができます。

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

APIキーを生成する方法は以下のとおりです。

  1. MyKinstaに移動
  2. 「APIキー」ページに移動（（お客様の名前）＞「企業の設定」＞「APIキー」）
  3. 「APIキーを作成」をクリック
  4. 有効期限を選択するか、「カスタム」から日付と時間を指定
  5. キーに一意の名前を付ける
  6. 「生成」をクリック
Create API Key on MyKinsta
MyKinstaでAPIキーを作成する

APIキーを作成したら（キーそのものを後から表示して確認することはできませんので）必ずコピーして安全な場所に保管してください（パスワードマネージャーの使用をおすすめします）。複数のAPIキー生成が可能で、その名前は「APIキー」ページに一覧で表示されます。APIキーを取り消す必要がある場合は、取り消したいAPIキーの横にある「アクセス取り消し」をクリックしてください。

Kinsta APIでKinstaのサイトツールを使用する方法

Kinstaでは、サイトの管理に使えるさまざまなツールをご用意しています。ツールはMyKinsta（「WordPressサイト」＞（サイト名）＞「ツール」）から利用できますが、現時点ではKinsta APIによってすべてがサポートされているわけではありません。スタッフ一同、フィードバックに耳を傾けながら次の機能の追加に取り組んでいます。Kinsta API開発チームリーダーKristof Siketのコメントをご紹介します。

お客様からのフィードバックは、機能公開の優先順位付けに直結する大事な要素です。現段階では、「ツール」ページのすべてを網羅していませんが、ユーザーの方々からのリクエストやフィードバックに基づいて選択しています。特定のツールやエンドポイントのKinsta APIでのご利用をご希望でしたらお気軽にフィードバックをお送りください。

Kinsta提供のサイトツールを利用するには、サイトの環境IDを取得する必要があります。MyKinstaの各サイトは少なくとも1つの環境を持っており、それぞれに固有のIDが付与されます。まずサイトIDを取得し、対応する環境データにアクセスするパラメータとして利用することで、Kinsta APIを活用することができます。

サイトIDを取得するには/sitesエンドポイントを使用します。サイトIDを取得したら、/sitesエンドポイントにGETリクエストを行います。この際にはIDを指定し、エンドポイントに/environmentsを追加します。

以下は、JavaScript Fetch APIを使用してこれを実現する一例です。

const siteId = 'YOUR_site_id_PARAMETER'; // 実際のサイトIDに置き換える
const resp = await fetch(
    `https://api.kinsta.com/v2/sites/${siteId}/environments`,
    {
        method: 'GET',
        headers: {
            Authorization: 'Bearer <YOUR_TOKEN_HERE>' // 実際のAPIキー/トークンに置き換える
        }
    }
);
const data = await resp.json();
console.log(data);

上記のコードでは、実際のサイトのIDでsiteId変数を定義しています。次に、指定したサイトの環境を取得するためにKinsta APIのエンドポイントにFetchリクエストを行います。AuthorizationヘッダにAPIキーが含まれていることを確認してください。

レスポンスを受信すると、そのデータがコンソールに表示されます。IDなど、次のような情報が確認できるはずです。

{
    "site": {
        "environments": [
            {
                "id": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
                "name": "first-site",
                "display_name": "First site",
                "is_blocked": false,
                "id_edge_cache": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
                "is_premium": false,
                "domains": [],
                "primaryDomain": {},
                "ssh_connection": {}
            }
        ]
    }
}

環境IDの確認方法がわかったところで、Kinstaのサイトツールを使用してみましょう。

Kinsta APIでサイトのキャッシュをクリアする方法

Kinsta APIでサイトのキャッシュをクリアするには、/sites/tools/clear-cacheエンドポイントにPOSTリクエストを送信します。これには、リクエストのボディとして環境IDを渡す必要があります。

JavaScriptでFetch APIを使用する方法は以下のとおりです。

const clearSiteCache = async () => {
  const resp = await fetch(
    `https://api.kinsta.com/v2/sites/tools/clear-cache`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer <YOUR_TOKEN_HERE>"
      },
      body: JSON.stringify({
        environment_id: "e.g. 54fb80af-576c-4fdc-ba4f-b596c83f15a1"
      })
    }
  );

  // レスポンスをJSONとして解析
  const data = await resp.json();
  console.log(data);
};

上記のコードでは、clearSiteCache関数が定義されており、APIエンドポイントのURLと、フェッチリクエストの構成を含むオブジェクトという2つのパラメータを受け取ります。構成にはmethod、headers、bodyがあります。

bodyフィールドでリクエストのペイロード（環境ID）を渡します。JSON.stringifyを使用して、オブジェクトをJSON文字列に変換します。environment_idの値は、再起動したい環境の実際のIDに置き換えてください。リクエストが送信されると、レスポンスデータがコンソールに記録されます。

Kinsta APIを使ってメンテナンスに便利なReactアプリケーションを構築する

Kinsta APIの導入により、柔軟性の高いカスタムインターフェースを構築できます。例えば、サイトのメンテナンスタスクを助けるアプリケーションです。サイトのキャッシュクリアやPHPエンジンの再起動を、深夜などに自動で行うように指定することができます。これにより、手間なくパフォーマンスの向上が期待できます。

はじめに

以後の説明を理解するには、HTML、CSS、JavaScriptの基本的な知識、そしてReactをある程度理解していることが望ましいです。このプロジェクトの主な焦点はKinsta APIの活用を実証することなので、この記事ではUIの作成やスタイリング、その他のロジックの詳細については掘り下げません。

プロジェクトのセットアッププロセスを効率化するために、スターターテンプレートを使います。以下のステップに従って進めてください。

1. GitHubのこちらのテンプレートを使ってGitリポジトリを作成します。「Use this template」＞「Create a new repository」を選択し、スターターコードをGitHubアカウント内の新しいリポジトリにコピーします。

2. リポジトリをローカルコンピュータにプルし、以下のコマンドを使ってstarter-filesブランチに切り替えます。

git checkout starter-files

3. npm installコマンドを実行して、必要な依存関係をインストールします。インストールが完了したら、npm run startでプロジェクトを起動できます。これでhttp://localhost:3000/でプロジェクトが開きます。

プロジェクトファイルについて

このプロジェクトのsrcフォルダの中には、componentsとpagesという2つのサブフォルダがあります。componentsフォルダには、すべてのページ（Home、Operations、Tools、Schedule）で利用されるHeaderやFooterなどの再利用可能なコンポーネントが含まれています。

このプロジェクトでは、HomeとToolsページのロジックを実装することに主眼を置いています。

Homeページには、MyKinstaアカウントのすべてのサイトをリストするフォームがあります。このページがレンダリングされるたびに、useEffectフックがすべてのサイトのリストを取得し、selectフォームフィールドに入力します。そして各サイトのIDは、対応するオプションの値として使用されます。

<select className="form-control" value={selectedSiteId} onChange={(e) => setSelectedSiteId(e.target.value)}>
    <option value=""></option>
    {sites && (
        sites.map((site) => {
            return (
                <option> key={site.id} value={site.id}>{site.display_name}</option>
            )
        })
    )}
</select>
Custom React app for Kinsta site tools management
Kinstaサイトツール用のカスタムReactアプリ

サイトが選択され、「Proceed」 ボタンがクリックされると、handleSubmission関数がトリガーされます。この関数では、Kinsta APIを使用してサイトの環境IDを取得します。次に、このIDをToolsページのルートパラメータとして渡します。

Toolsページでは、サイトのキャッシュクリアやPHPエンジンの再起動など、選択したサイトのメンテナンスタスクを実行したりスケジュールしたりできます。Toolsページでこれらのアクションを実行するには、環境IDが必要です。したがって、これがページのルートパラメータとして渡されます。

Kinsta site tools management
Kinstaのツールを操作する

サイトのキャッシュクリアやPHPエンジンの再起動などのアクションを開始すると、自動的にOperationsページに移動します。ここでは、割り当てられたIDを使用して操作の進捗状況を追跡できます。

Kinsta site tools operation status
Kinstaサイトツールの操作ステータス

タスクの日時指定を行うと、スケジュールを設定したタスクの詳細情報が表示されるScheduleページに移動します。

Kinsta site tools schedule information page
Kinstaサイトツールのスケジュール情報ページ

スケジュールの時間に達すると、特定の操作が開始され、自動的にOperationsページにリダイレクトされます。

ReactでKinsta APIと対話する

ユーザーインターフェース（UI）ができたので、続いては、Homeページでフォームの投稿内容を処理し、Kinsta APIを介して選択したサイトの環境IDを取得してから、IDをルートパラメータとしてユーザーをToolsページに遷移します。

Kinsta APIとの連動には、企業IDとAPIキーが必要です。クラウド上でホストされるプロジェクトでAPI呼び出しを行う場合、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を使用します。

ReactのKinsta APIで環境IDを取得する

Homeページで、サイト選択の上で送信ボタンがクリックされると、handleSubmission関数がトリガーされます。この関数は、Fetch API（またはお好みのHTTPリクエストメソッド）を使用してKinsta APIにGETリクエストを行います。

APIコールのたびにヘッダとKinsta API URLを繰り返すのを避けるために、headersとKinstaAPIUrlを定数として保存しましょう。

const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
    return {
        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
    }
}, [])

KinstaAPIUrl変数には、Kinsta APIのベースURLが格納されます。定数headers は、useMemoフックを使用して作成されます。これにより、ヘッダオブジェクトが一度だけ作成され、レンダリング間で変更されないようになっています。またここでは、環境変数から取得したKinsta APIキーを含むAuthorizationヘッダが使用されています。

const handleSubmission = (e) => {
    e.preventDefault();

    const fetchEnvironmentId = async (siteId) => {
        const resp = await fetch(
            `${KinstaAPIUrl}/sites/${siteId}/environments`,
            {
                method: 'GET',
                headers
            }
        );

        const data = await resp.json();
        let envId = data.site.environments[0].id;
        navigate(`/tools/${envId}`)
    }
    fetchEnvironmentId(selectedSiteId);
}

上記のコードでは、非同期関数 (fetchEnvironmentId) が作成され、選択したサイトから取得したsiteIdを受け取り、これをAPIエンドポイントに渡して環境の詳しい情報を取得します。

レスポンスを受信したら、データから環境IDを抽出し（ステージング環境と本番環境の2つ以上の環境があるかもしれません。そのため、配列での保存となります。このデモでは本番環境を使用します）、navigate関数（すでにインポートされ、インスタンス化されています）を使用して、環境IDをルートパラメータとしてToolsページにユーザーをリダイレクトします。

注）上記のルートはすべて、App.jsファイルですでに設定されています。

ReactでKinsta APIを使ってメンテナンスタスクを実行する

Toolsページには、サイトのメンテナンスに使用できる2つのツールがあり、それぞれ、操作をすぐに実行するか、操作のタイミングを指定するかの2つのボタンがあります（関数は作成済みで、onClickイベントがすべてのボタンに紐づけられています）。この説明では、サイトのPHPエンジンを再起動する方法のみを説明します。サイトのキャッシュをクリアする方法とほとんど同じ操作です。

PHPエンジンを再起動したり、サイトツールの操作を実行したりするには、環境IDが必要です。この環境IDはすでにルートパラメータとしてToolsページに渡されています。次のステップとして、このパラメータを取得して変数に格納し、Kinsta APIにリクエストを送信します。

const { envId } = useParams();

リクエストヘッダとAPI URLは変更されないので、定数変数として保存します。GETリクエストと異なり、POSTリクエストのヘッダにはContent-Typeがあることがわかります。

const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
    return {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
    }
}, [])

Restartボタンがクリックされると、restartEngine関数が呼び出されます。この関数では、（環境IDをペイロードとして受け取る）POSTリクエストをKinsta APIに送信してみましょう。

const restartEngine = async () => {
    const resp = await fetch(
        `${KinstaAPIUrl}/sites/tools/restart-php`,
        {
            method: 'POST',
            headers,
            body: JSON.stringify({
                environment_id: envId
            })
        }
    );
    const data = await resp.json();
    navigate(`/operations/${data.operation_id}`);
}

上記のコードが実行されるたびに、サイトのPHPエンジンの再起動が行われます。その後すぐにMyKinstaをチェックすると、ページの上部にこの通知が表示されていることが確認できます。

PHP restart on MyKinsta
MyKinstaでPHPを再起動した結果（通知が表示されている）

Kinsta APIの/operationsエンドポイントを使用して確認することも可能です。上記のコードでは、このリクエストが成功すると、ルートパラメータとしてオペレーションIDを用いてOperationsページに自動で遷移し、オペレーションステータスを確認することができます。これがどのように処理されるかについては、オペレーション（Operations.jsx）をご確認ください。

ReactでKinsta APIを使ってタスクの実行時間を指定する

JavaScriptでタスクの実行タイミングを管理するには、タスクが発生するまでの推定時間をミリ秒単位で計算し、setTimeout関数を使用できます。

Toolsページで、「Schedule」ボタンがクリックされると、2つのフォームフィールドを持つポップアップが表示されます。このフィールドで、操作の実行希望日時（日付と時刻）を選択することができます。入力されたデータは、現在から操作開始までの合計時間をミリ秒単位で計算するのに使用されます。

Site tools scheduler interface
スケジューラのインターフェース

これを実現するには、new Dateオブジェクトに日付を渡すことで、日付フィールドから日、月、年を抽出し、それぞれを別々の変数に格納します。

let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();

次に、時刻のフィールドから時間と分を抽出します。

let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);

上記の値を取得すれば、ミリ秒単位で時間を計算することができます。

const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;

この時点で、ミリ秒単位での時刻が用意できました。続いて、指定した日時に実行するsetTimeout関数を作成します。

setTimeout(function () {
    restartEngine();
}, eta_ms);

上のコードでは、指定した時刻に達するとrestartEngine()関数が呼び出され、PHPエンジンが再起動します。

コード全体は以下のようになります。

const schedulePhpEngineRestart = async (e) => {
    e.preventDefault();

    let year = new Date(scheduleDate).getFullYear();
    let month = new Date(scheduleDate).getMonth();
    let day = new Date(scheduleDate).getDate();

    let timeArray = scheduleTime.split(":");
    let hour = parseInt(timeArray[0]);
    let minute = parseInt(timeArray[1]);

    const now = new Date();
    let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;

    setTimeout(function () {
        restartEngine();
    }, eta_ms);

    let date = `${day}-${month + 1}-${year}`;
    let time = `${hour}:${minute}`;
    navigate(`/schedule/${date}/${time}`);
}

タスクの実行タイミングを設定すると、Scheduleページに移動し、スケジュールの詳細を見ることができます。指定の時間に達すると、setTimeout関数が呼び出され、Operationsページへの遷移を経て、オペレーションのステータス追跡が行われます。

これで、スケジュール機能の実装が完了です。Kinsta APIをトリガーしてサイトのPHPエンジンを再起動することができます。同じようにサイトのキャッシュをクリアすることも可能です。

KinstaでReactアプリケーションをデプロイする方法

Kinstaのアプリケーションホスティングを使ったReactプロジェクトのデプロイは簡単です。お好みのGitサービス（GitHub、GitLab、またはBitbucket）にプロジェクトをプッシュしたら、すぐさまKinstaへのデプロイに進むことができます。

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

  1. MyKinstaにログインするか、新規アカウントを作成（プラン契約を開始）
  2. 左側のサイドバーで「アプリケーション」＞「サービスを追加」をクリック
  3. ドロップダウンメニューから「アプリケーション」を選択して、KinstaにReactアプリケーションをデプロイ
  4. 表示されるポップアップ画面で、デプロイしたいリポジトリを選択（複数のブランチがある場合は、希望のブランチを選択してから、アプリケーションに名前を付けてください）
  5. 25のデータセンターから好みの場所を1つ選択（Kinstaのシステムにより自動的にアプリケーションのstartコマンドが検出されます）

最後に、APIキーをGitサービスのようなパブリックホストにプッシュしないようにご注意ください。.envファイルで指定したのと同じ変数名と値を使用して環境変数として追加することができます。

Set environment variables on MyKinsta when deploying
デプロイ時にMyKinstaで環境変数を設定する

アプリケーションのデプロイを開始すると、プロセスが開始され、通常は数分以内に完了します。デプロイが成功すると、http://site-tools-scheduler-6u1a5.kinsta.app/ のようなアプリケーションのリンクが生成されます。

まとめ

Kinsta APIを使用すると、WordPressサイトの定期的なタスクを効率的に処理することができます。近い将来、さらに多くのことができるようになるでしょう。

今回の記事では、Kinsta上でホストするReactアプリケーションをゼロから構築することで、Kinsta APIを活用する方法を学びました。

あなたは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.