Project IDX によるフルスタック開発

11月 07, 2023

Prakhar Srivastav Software Engineer

Kaushik Sathupadi Software Engineer

Kristin Bi Software Engineer

Alex Geboff Technical Writer

Project IDX の試験運用版をリリースしました。Project IDX は新しいブラウザベースの開発エクスペリエンスであり、フルスタックアプリを構築する際の複雑さを解消し、エンドツーエンド（バックエンドからフロントエンドまで）の開発プロセスを効率化します。

私たちの経験によると、ほとんどのウェブアプリケーションは、フロントエンド（UI）レイヤーとバックエンドレイヤーという少なくとも 2 種類のレイヤーで構成されています。ブラウザベースのデベロッパーワークスペースで開発できるアプリにはどのような種類があるかについて考えたとき、完全に動作する堅牢なバックエンドを備えたフルスタックアプリを即座に思いつく人はいないでしょう。ウェブベースの環境でバックエンドを開発すると、すぐに小回りが利かずコストがかかるものになってしまう可能性があります。開発環境と本番環境で認証設定を変える、バックエンドとフロントエンドとの間で安全に通信する、完全自己完結型（密閉型）テスト環境を構築するために複雑な設定を行うなど、コストと不便さは増すばかりのように感じられます。

早く IDX を試したいと思っている方も多いと思いますが、それを待つ間に、この投稿で Project IDX によるフルスタック開発について共有したいと思います。ウェブベースのワークスペースでフロントエンドとバックエンドの両方のレイヤーを構築する場合、デベロッパーは複雑な状況に直面する場合があります（デベロッパー認証、フロントエンドとバックエンドとの通信、密閉型テストなど）。ここでは、そのうちのいくつかを解消し、問題を少しばかり簡単にするために私たちが試した方法を説明します。もちろん、他に何があればフルスタック開発がもっと楽になるかについて、皆さんの意見をお待ちしています！

アプリのプレビューの効率化

何よりもまず、アプリケーションのフロントエンドが VM 内のバックエンドサービスと通信できるようにするプロセスを効率化し、ブラウザでフルスタックアプリケーションを簡単にプレビューできるようにしました。

IDX のワークスペースは、Google Cloud Workstations 上に構築されており、サービスアカウントを通して安全にサービスに接続してアクセスします。サービスアカウントはワークスペースごとに一意で、アプリケーションフロントエンド用のシームレスな認証つきプレビュー環境をサポートします。つまり、Project IDX では、アプリケーションのプレビューがワークスペースに直接組み込まれるため、UI をプレビューするために別の認証パスを設定する必要はありません。現在の IDX は、ウェブのプレビューのみをサポートしていますが、近日中に Android および iOS アプリのプレビューにも対応する予定です。

さらに、IDX で開発中のバックエンド API に対して、ブラウザのプレビュー以外から通信を行いたい場合のために、一時的に API バックエンドをホストするポートにアクセスできるようにする仕組みも準備しています。

フロントエンドからバックエンドへの単純な通信

同じポートからバックエンドとフロントエンドの両方のレイヤーを提供するフレームワークを使用している場合は、$PORT フラグを渡すことで、ワークスペース構成ファイル（Nix を使っており、ワークスペースに直接保存されます）でカスタム PORT 環境変数を使用できるようになります。これは Project IDX の基本的な設定フローの一部なので、（構成ファイルでの変数の設定以外に）特別なことを行う必要はありません。次に、Nix ベースの構成ファイルの例を示します。

{ pkgs, ... }: {
 
# メモ: これは完全な Nix 構成サンプルからの抜粋です。
 
# プレビューを有効化して構成をカスタマイズする
idx.previews = {
  enable = true;
  previews = [
    {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
      id = "web";
    }
  ];
};

ただし、バックエンドサーバーが UI サーバーとは異なるポートで動作している場合は、別の戦略を用いる必要があります。1 つの方法は、Vite のカスタムサーバーオプションで行うように、フロントエンドプロキシをバックエンドにすることです。

ポート間の通信を確立する方法はもう 1 つあります。それは、UI で実行されている JavaScript が AJAX リクエストでバックエンドサーバーと通信するようにコードを記述する方法です。

まずは、バックエンドとフロントエンドの両方を含むサンプルコードから始めます。次に示すのは、Express.js で記述したバックエンドサーバーです。

import express from "express";
import cors from "cors";
 
 
const app= express();
app.use(cors());
 
app.get("/", (req, res) => {
    res.send("Hello World");
});
 
app.listen(6000, () => {
    console.log("Server is running on port 6000");
})

サンプルの太字の行「app.use(cors());」では、CORS ヘッダーを設定しています。選んだ言語やフレームワークによって設定が異なる場合がありますが、ローカルで開発しているか、IDX で開発しているかにかかわらず、バックエンドはこのヘッダーを返す必要があります。

IDX ターミナルでサーバーを実行すると、IDX パネルにバックエンドポートが表示されます。サーバーが動作しているすべてのポートは、自動的に URL にマッピングされるので、それを呼び出すことができます。

次に、このサーバーに対して AJAX 呼び出しを行うクライアントコードを書きます。

// この URL を、バックエンド ポート ビューが表示されているサイドパネルからコピーする
const WORKSPACE_URL = "https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/";
 
async function get(url) {
  const response = await fetch(url, {
    credentials: 'include',
  });
  console.log(response.text());
}
 
// バックエンドを呼び出す
get(WORKSPACE_URL);

fetch() 呼び出しにも、認証情報を含めるようにします。IDX の URL は認証つきなので、認証情報を含める必要があります。上のようにすると、AJAX 呼び出しに Cookie が追加され、サーバーで認証が行われます。

fetch の代わりに XMLHttpRequest を使う場合は、次のようにして「withCredentials」プロパティを設定します。

const xhr = new XMLHttpRequest();
xhr.open("GET", WORKSPACE_URL, true);
xhr.withCredentials = true;
xhr.send(null);

AJAX 呼び出しに使うクライアントライブラリによっては、コードがサンプルと異なる場合があります。その場合は、お使いのクライアントライブラリのドキュメントで、認証つきリクエストの作成方法を確認してください。いずれの場合でも、認証つきのリクエストを送信する必要があります。

ログイン不要のサーバーサイドテスト

Project IDX のアプリケーションにアクセスする際に、Google アカウントにログインしない場合や、Google アカウントにログインできない環境からアクセスする場合もあるでしょう。たとえば、IDX で開発している API にアクセスする際に、個人用ノートパソコンのコマンドラインから Postman や cURL を使う場合です。このような場合は、Project IDX が生成した一時的なアクセストークンを使います。

Project IDX でサーバーを起動すると、コマンドメニューを表示してアクセストークンを生成できます。このアクセストークンは短時間だけ有効なトークンで、ワークステーションに一時的にアクセスする際に使うことができます。

非常に重要な点として、このアクセストークンを使うと、プレビューするアプリケーションだけでなく、IDX ワークスペース全体にアクセスできるようになることを覚えておいてください。そのため、トークンは誰とも共有せず、テストにのみ使うことをおすすめします。

IDX でこのコマンドを実行すると、アクセストークンがダイアログウィンドウに表示されます。ワークステーションで実行しているサービスに cURL リクエストを行うには、アクセストークンをコピーして、次のように使います。

$ export ACCESS_TOKEN=myaccesstoken
$ curl -H "Authorization: Bearer $ACCESS_TOKEN" https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/
Hello world

これで、認証つきのサーバー環境でテストを実行できます。

ウェブベースの完全密閉型テスト

ここまで見てきたように、IDX を使うと、認証つきの安全な完全に自己完結型の環境で、アプリケーションのフロントエンドとバックエンドをテストすることができます。ウェブベースの開発環境でローカルエミュレータを実行すれば、アプリケーションのバックエンドサービスをテストすることもできます。

たとえば、IDX ワークスペースから Firebase Local Emulator Suite を直接実行できます。エミュレータスイートをインストールするには、IDX のターミナルタブから firebase init emulators を実行し、手順に従って、どのポートにどのエミュレータを配置するかを設定します。

インストールが完了したら、ローカル開発環境の場合と同じように、IDX ターミナルから設定したり使用したりできます。

次のステップ

ご覧のとおり、Project IDX は、フロントエンドからバックエンド、そしてその間に存在するすべてのエミュレータまで、フルスタック開発のニーズのほとんどを満たすことができます。

すでに Project IDX をお使いの方は、ソーシャルメディアに #projectidx タグを付けて、Project IDX がフルスタック開発にどのように役立ったかをお知らせください。待機リストに登録したい方は、idx.dev をご覧ください。