Zenn
🔨

Project IDX での Web アプリケーション開発

2024/09/02に公開
Cloud Run
Google Cloud
Remix
Project IDX
tech

概要

Project IDX (以下 IDX) は Google Cloud の Cloud Workstations をベースに Google がホストする仮想実装環境を提供してくれるサービスになります。
https://idx.dev/
PWA 対応しているため、install して利用することが可能です。（私は、 https://open-vsx.org/extension/k--kato/intellij-idea-keybindings こちらの extensions を利用しているため keybind を考えると install したほうが扱いやすいというのがあります)

  • 無料で最大で5つのワークスペースが作成でき、個人開発では十分な量だと感じています。
  • editor の見え方としては、vscode に似ており同じ様に extensions を追加することができます。
  • dev.nix を使って各ワークスペースのベースをカスタマイズすることもでき、ワークスペース立ち上げ時に package を追加することができます。
  • Experimental ではありますが web アプリケーションではなく Android アプリを作成できる（Android Studio が web 上で起動する）というのも、IDX の特徴になります。
  • コード作成支援として、Gemini を利用することができます。とはいえ以下のように言われているため、利用に関しては注意をしてください。

IDX で生成 AI 機能を使用すると、Google はチャット テキスト、プロンプト、関連コード、生成された出力、関連機能の使用情報、フィードバック（以下「AI 機能データ」）を収集します。Google ではこのデータをプライバシー ポリシーに従って使用し、Google のプロダクト、サービス、機械学習技術（Google Cloud など、Google の企業向けプロダクトを含む）の提供、向上、開発に使用します。

https://developers.google.com/idx/support/privacy?hl=ja

アプリケーションを作成する

IDX は様々な アプリケーションtemplate がありますが、今回は Blank な状態から Remix アプリケーションを作成してみたいと思います。

アプリケーションの枠を作成すると以下のような、ワークスペースが立ち上がります。
新規ワークスペース画面

terminal を起動して、 https://remix.run/docs/en/main/other-api/create-remix の通り以下コマンドを使って Remix を作成していきます。

npx create-remix@latest . --overwrite

Remix インストール

起動自体は npm をそのまま利用してください。

npm run dev

立ち上げたアプリケーションは http://localhost:5173/ で立ち上がりましたが、こちらにアクセスするには、マウスでクリックすることでアクセスすることができます。

https://5173-idx-sample-remix-app-***.cloudworkstations.dev/

しかし、これだと live reload がつかえません。その際には .idx/dev.nix の preview 機能を利用します。

    previews = {
      enable = true;
      previews = {
        web = {
          command = ["npm" "run" "dev"];
          manager = "web";
          env = {
            PORT = "$PORT";
          };
        };
      };
    };

アプリケーションの方で、PORT 環境変数を使って起動するようにしておきましょう。
そして、Rebuild Environment を行うと自動的に preview 画面が立ち上がります(iframe で表示します)

https://developers.google.com/idx/guides/preview-apps?hl=ja

ワークスペース内で MySQL を起動する

ワークスペース内で MySQL または Postgres などの DB を仮で立てることができます。
例えば、ローカル開発などで、アプリケーションが DB 接続をするような際に作成しておくと便利かと思います。

利用としては、基本的に以下のように .idx/dev.nix に追記するだけです。

  services = {
    mysql = {
      enable = true;
      package = pkgs.mysql80;
    };
  };

すると、以下コマンドで MySql サーバがローカルに立ち上がっているのがわかります。

mysql -u root

以下のようなテーブルを作成して、アプリケーションから接続してみます。

create table items ( id MEDIUMINT NOT NULL AUTO_INCREMENT, name CHAR(30) NOT NULL, PRIMARY KEY (id) );

今回は prisma client を使ってみます。

npx prisma init
npx prisma db pull

すると以下のようにエラーがでてきます。

Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to "openssl-1.1.x". Please manually install OpenSSL and try installing Prisma again. Environment variables loaded from .env Prisma schema loaded from prisma/schema.prisma

この場合 openssl のバージョンを上げることが必要になるので、dev.nix のパッケージに以下を追加し、環境を再起動します。

  packages = [
    pkgs.nodejs_20
    pkgs.openssl.dev
  ];

すると、エラーがなく prisma に対してコマンドを起動することができます。
サンプルの _index.tsx に対して以下のように修正すると mysql からデータを取得できているのが分かると思います。

import { json, type MetaFunction } from "@remix-run/node";
import { PrismaClient } from '@prisma/client'
import { useLoaderData } from "@remix-run/react";

const prisma = new PrismaClient()

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export const loader = async () => {
  const list = await prisma.items.findMany();
  return json({ list });
};

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return (
    <div className="font-sans p-4">
      <ul className="list-disc mt-4 pl-6 space-y-2">
        {data.list.map((item) => {
          return <li>{item.name}</li>
        })}
      </ul>
    </div>
  );
}

loader 内で DB のデータが参照されていることが確認できたと思います。

アプリケーションを Deploy する

IDX には Google Cloud の Cloud Run、Firebase AppHosting に対してデプロイするための簡単な仕組みがあります。
今回は Cloud Run へ Deploy を行い、かつ、先ほどの MySQL への接続を Cloud SQL に変更します。
以下画面の Cloud Run の Authenticate を実行すると、現状IDXにログインしている Google Account でアクセスできる Google Cloud のプロジェクトの一覧がでてきます。

Deploy したいプロジェクトを選択すると、認証が完了します。

build の root ディレクトリ、未認証で実行するか、region をどうするかなどが聞かれますので適宜、答えてやると進みます。
先ほど選択した Google Cloud の Cloud Build にて gcr.io/k8s-skaffold/pack を使って Docker Image を作成し、Cloud Artifact へ保存され、そして Cloud Run へ Deploy が行われます。

環境変数については Deploy後の service environment variables のリンクを使って更新します。

まとめ

Project IDX を使うことで簡単に web アプリケーションの環境が作成できました。
企業などで導入する場合で考えるのであれば、セキュリティ面などを考えても Cloud Workstations を利用するほうが良いと思いますが、個人開発であれば、十分な機能を持ち合わせています。

また、無料での利用ですので、利用者が増えることで workspace の起動ができないこともあるかと思います。

ここまでのサンプルコードはこちらに配置しておりますので、Project IDX で Github Repository を clone して使ってみてください。
database の設定を自動で行う部分等、含めて記載しているので import a repo から実行可能です。
https://github.com/SatohJohn/sample-remix-app

Discussion