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 をご覧ください。
