このページでは、見本アプリケーションとデータベースのデプロイ方法を順を追ってご紹介します。以下の見本アプリケーションは、テスト用にご自由にお使いいただけますが、本番環境でのご使用はお控えください。このアプリケーションは、あくまでKinstaのデプロイメントをテストするためのものになります。

見本アプリケーション

天気を記録し、その結果をシンプルなページで表示する、簡単なアプリケーションを作成しました。このアプリケーションはGitHubで公開しています。

見本アプリケーションをフォークする

まず、GitHub上のアプリケーションweatherlogger-jsにアクセスし、そこにあるReadmeファイルに目を通し、アプリケーションについて簡単にご理解ください。これが完了したら、右上にある「Fork」ボタンをクリックして、ご自身のGitHubアカウントにフォークします。

GitHubでweatherlogger-jsのフォークを作成する
GitHubでweatherlogger-jsのフォークを作成する

APIキーの作成

このアプリには、OpenWeatherのAPIキーが必要です。サインアップすると、毎日1,000回のAPIコールができるAPIキーを無料で作成できます。API キーが有効になるまでに10-20分かかります。この時間をアプリケーションのセットアップに充てることができますので、この手順を最初に行ってしまうことをお勧めします。

プロセス

アプリケーションをKinstaにデプロイする際、2つのプロセスを実行する必要があります。

  • 気象データを見ることができるウェブサーバーが必要になります。これはnpm start コマンドを使用してローンチできます。
  • 数分ごとに気象データを取得するcronjobも必要です。これはnpm run weatherLogger コマンドでローンチします。

以上のプロセスを実行するための準備を始めましょう。

データベースの構築方法

MyKinstaで、「Applications」ページにいることを確認し、「Add service」をクリックし、ドロップダウンメニューで「Database」を選択します。フォームで次の値を使用し、データベースを作成します。

  • Database name:weatherloggerdb
  • Display name:Weather Logger データベース
  • Database type:MySQL
  • Version:8.0
  • データベースのユーザー名とパスワードはそのまま
  • Data center location:us-central1
  • Database size:0.25 CPU core – 256 MB RAM (Mini)

Create database」ボタンをクリックすると、すべての設定が完了します。

見本アプリケーション用に新しいデータベースを作成する
見本アプリケーション用に新しいデータベースを作成する

アプリケーションの構築方法

Applications」ページにいることを確認し、「Add service」をクリックし、ドロップダウンメニューから「Application」を選択します。GitHubのリポジトリフィールドのクリック時には、Kinstaによるお客様のリポジトリとの連携を許可する必要があります。

詳しいステップ毎のドキュメントについては、アプリケーションの追加をご覧ください。

以下の値を使用して、マルチパート形式でアプリケーションを作成していきます。

アプリケーションの詳細

  • GitHub repository:danielpataki/weatherlogger-js(実際にはyour-organization/weatherlogger-jsのようなものになります)
  • Default branch:main
  • Automatic deployment on commit:チェックしない
  • Application name:Weather Logger
  • Data center location:us-central1
アプリケーションの構築例
アプリケーションの構築例

ビルド環境

  • ビルドリソース:標準
  • ビルド環境:コンテナイメージを自動で設定
ビルド環境の設定例
ビルド環境の設定例

リソース

  • プロセスのセットアップ:
    • プロセス名:ウェブプロセス
    • プロセスの種類:ウェブ
    • startコマンド:npm start
    • ポッドサイズ:標準 0.5 CPU / 1 GB RAM
    • インスタンスカウント:1

アプリケーションを追加」をクリックすると、デプロイ処理が開始されます。

アプリケーションのウェブプロセス設定例
アプリケーションのウェブプロセス設定例

支払い方法

使用料と支払い方法を確認します。今回のアプリケーション例の場合、月額使用料は以下の通りです。

アプリケーションの支払い方法を確認
アプリケーションの支払い方法を確認

アプリケーションとデータベースの接続

データベースが接続可能な状態になったら(横に緑色のチェックマークが表示されます)、アプリケーションがまだデプロイ中であっても、アプリケーションに接続することができます。「Weather Logger」アプリケーションをクリックし、サイドバーの「Settings」 をクリックし、下にスクロールして「Internal connections」セクションを探します。

見本アプリケーションの内部接続
見本アプリケーションの内部接続

Add connection」をクリックし、表示されるモーダル/ポップアップウィンドウで、「Weather Logger Database」を選択します。「データベースにアクセスする環境変数を追加」、「ランタイムで利用可」、「ビルドプロセスで利用可」にそれぞれチェックを入れ、「接続を追加」をクリックしてください。

見本アプリケーションの内部接続を追加する
見本アプリケーションの内部接続を追加する

アプリケーションのセットアップ

続いては、アプリケーションに必要とされるすべての情報を、環境変数の形で追加します。ほとんどの情報は、前のステップでデータベース接続の変数を入力することで自動的に追加されています。

唯一不足しているのが、アプリケーションに必要なOpenWeatherMap APIキーです。「Settings」の「Internal connections」セクションのすぐ下に、「Environment variables」セクションが表示されます。「Add environment variable」をクリックし、キーにOPENWEATHER_KEYを、値にAPI キーを貼り付けます。

OpenWeather API Key を環境変数に追加する
OpenWeather API Key を環境変数に追加する

このアプリケーションは、更新頻度や使用する単位などを制御するために、さらにいくつかの変数をサポートしています。詳細はアプリケーションのドキュメントをご参照ください。

プロセスの設定

ウェブサーバーとcronjobが必要であることは、冒頭で述べた通りです。アプリケーションの「プロセス」タブに移動すると、アプリケーション追加時に作成したnpm startを実行するウェブプロセスを確認できます。

cronjobを設定するには、「Create process」ボタンをクリックし、表示されるポップアップのフォームに必要事項を記入してください。この例では、次の値を使用します。

Name:Worker
Type:Background job
Start commandnpm run weatherLogger
Pod size:Standard 0.5 CPU / 1 GB RAM
Instances:1

その後、「プロセスを作成」をクリックします。

見本アプリケーションのバックグラウンドプロセスを作成する
見本アプリケーションのバックグラウンドプロセスを作成する

アプリケーションをデプロイする

最後に、「Deployments」セクションに戻り、「Deploy now」ボタンをクリックします。通常、デプロイは約90秒で完了しますが、すべてのプロセスの開始までもう少し時間がかかる場合もあります。最初の気象の測定は、その数分後に記録されるはずです。問題なく機能していることを確認するには、「Logs」セクションをご覧ください。

見本アプリケーションのランタイムログ
見本アプリケーションのランタイムログ

数分後、「Runtime logs」にプロセスの成功が表示されるはずです。上の画像は、482行目でロガーが動作を開始したこと(Starting weather logging)、483行目でウェブサーバーが動作していること(Weather server is up and running)を示しています。245行目以降にロギングイベント(Weather data retrieved、およびWeather data logged)が表示されます。

ページ上部で、アプリケーションのURLを確認することができます(「デプロイメント」タブの「最近のデプロイ」でも確認可能)。URLをクリックすると、ウェブサービスで提供されているページが表示されます。

Weather loggerページに気象情報が表示されている
Weather loggerページに気象情報が表示されている