メインコンテンツまでスキップ

ローカル開発

このドキュメントでは、Geekleで作業するためのローカル開発環境を設定する方法について説明します。このガイドに従えば、Geekleアプリケーションの個々の部分または全体をローカルで実行できるようになります。

前提条件​

  • Geekleの既存のデプロイメント。
  • @basaldev パッケージに対する読み取り権限を持つNodeblocks NPMトークン。
  • Node.js 18.x以降。
  • （推奨）VSCode。

NPMトークンの設定​

プライベートパッケージをインストールするには NODEBLOCKS_DEV_TOKEN が必要です。続行する前に、ローカル環境に NODEBLOCKS_DEV_TOKEN を設定してください。

シェルプロファイル（例：~/.bashrc、~/.zshrc など）に以下を追加します。

export NODEBLOCKS_DEV_TOKEN=__INSERT_YOUR_TOKEN_HERE__

MongoDBへの接続​

Geekleは主要なデータベースとして MongoDB Atlas を使用しています。バックエンドサービスのローカル開発において、ローカルのMongoDBインスタンスを使用することは可能ですが、以下の理由からMongoDB Atlasの使用を推奨します。

  • ローカルの開発環境が本番環境にできるだけ近いものになります。
  • MongoDB Atlas固有の機能を必要とする場合、それらが正しくテストされます。
  • インデックスや他のデータベース設定がローカルと本番環境で一貫しています。

MongoDB Atlasに接続するには:

  1. 新しいクラスターを作成するか、既存のクラスターを使用します。
  2. データベースに読み書きする権限を持つ新しいデータベースユーザーを作成します。
  3. （オプション）ローカルマシンからの接続を許可するために、IPアドレスをホワイトリストに登録します。
  4. MongoDB Atlasクラスターの接続文字列を取得します。これはクラスターの「接続」タブで確認できます。手順2で作成したユーザー名とパスワードを使用してデータベースに接続します。

接続文字列が取得できたので、テスト用にローカルサービスからMongoDB Atlasに接続できます。

バックエンドサービスをローカルで実行する​

各バックエンドサービス（geekle-xxx-service）について、次の手順でローカルでサービスを実行できます。

  1. 実行したいサービスのリポジトリをクローンします。

  2. 依存関係をインストールします。

npm install

  1. サービスの .env ファイルを、デフォルトの .env.example ファイルから作成します。

  2. Nodeblocks Cloudから取得した必要な設定値で .env ファイルを更新します。これらの値にアクセスするには、Google App Engineにアクセスし、現在デプロイされているサービスの環境変数を確認するのが最も簡単です。サービスの「バージョン」タブで確認できます。

  3. MongoDB Atlasの場合、DATABASE_URL 環境変数を先ほど取得した接続文字列に設定します。

  4. サービスを実行します。

npm run build
npm run start
警告

ローカル開発では、単一のサービスをローカルで実行し、Nodeblocks Cloud上にデプロイされたサービスと接続するのが最も簡単です。これにより、Geekleアプリケーションの他の部分から切り離してサービスを開発できます。

ただし、他のサービスからこのサービスに対するリクエストは、他のサービスもローカルで実行しない限り成功しません。効率を考え、開発中の機能に必要なサービスのみを実行するように計画しましょう。

編集を行う​

VSCodeやお好みのエディタを使用して、サービスに変更を加えます。バックエンドサービス用のエディタ設定は提供していません。

テストの実行​

バックエンドサービスにはローカルで実行できる単体テストがあります。テストを実行するには:

npm run test

Geekleアプリケーションに新機能やカスタマイズを追加する場合は、テストを書くことをお勧めします。

変更をリリースする​

Geekleリポジトリに対して変更を含むPRを作成します。PRがマージされると、準備が整ったときにNodeblocks Cloudで適切なサービスを再デプロイできます。Nodeblocks Cloudにはブランチパラメータがあり、どのブランチがデプロイに使用されるかを設定できます。これにより、PRをマージする前に実験的なブランチをテストできます。

フロントエンドをローカルで実行する​

各フロントエンドサービス（geekle-frontend-xxx）について、次の手順でアプリをローカルで実行できます。

  1. 実行したいアプリのリポジトリをクローンします。

  2. 依存関係をインストールします（フロントエンドサービスにはyarnを使用します）。

nvm use
yarn
  1. ローカル開発用の自己署名SSL証明書を作成します。

これはMac環境を前提としています。他の環境については、自己署名SSL証明書の作成に関する該当のドキュメントを参照してください。

brew install mkcert
mkcert -install
mkcert localhost
  1. これらの証明書がリポジトリにコミットされないように .gitignore ファイルに追加します。
echo "localhost-key.pem" >> .gitignore
echo "localhost.pem" >> .gitignore
  1. 提供されたエディタ設定を使用してリポジトリをVSCodeで開きます。
code .vscode/geekle-frontend-xxx.code-workspace
  1. ローカル開発用の vite.config.ts ファイルを設定し、正しいバックエンドサービスを指すようにし、証明書を使用するようにします。
import fs from 'fs';

const safeLoadFile = (path: string) => {
  if (fs.existsSync(path)) {
    return fs.readFileSync(path, 'utf8');
  }
  return undefined;
};

export default (defineConfig as typeof testConfig)({
  ...

  server: {
    https: {
      key: safeLoadFile('./localhost-key.pem'),
      cert: safeLoadFile('./localhost.pem'),
    },
    open: '/',
    proxy: {
      '/api/demand-auth': {
        target: 'https://<service-url-here>',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/demand-auth/, ''),
      },
      ...
    },
  },
});

フロントエンドアプリから接続する必要のある全てのバックエンドサービスに対して、proxyオブジェクト内で設定を行います。 利用可能なサービスは.gcloud/router-service/server.js にてご確認ください。

  1. アプリを実行します。

アプリは自動的にデフォルトのブラウザで開きます。

yarn dev

バックエンドサービスの代替URLを指定したい場合、上記のように vite.config.ts ファイルのプロキシ設定を変更して行うことができます。

編集を行う​

VSCodeを使用してアプリに変更を加えます。フロントエンドサービスには、typescriptの問題を検出するエディタ設定が用意されています。

Storybookの実行​

次のコマンドでStorybookを実行します。

これにより、新しいブラウザウィンドウが開き、StorybookのUIを使用してフロントエンドサービス内のコンポーネントを表示およびテストできます。

yarn storybook

変更をリリースする​

Geekleリポジトリに対して変更を含むPRを作成します。フロントエンドサービスにはCI/CDパイプラインがあり、PRに問題がないか確認します。

メインにマージされた後、変更は自動的にApp Engineにデプロイされます。デプロイ状況はGoogle Cloud ConsoleまたはGithub Actionsで確認できます。