Google Cloud で Svelte を使ってみる

※この投稿は米国時間 2024 年 1 月 30 日に、Google Cloud blog に投稿されたものの抄訳です。

Svelte をもうお試しになりましたか。Svelte は、他とは一線を画すウェブ フレームワークで、多くの煩雑な作業が実行時のブラウザでの処理からビルド フェーズに移されます。Svelte の前処理アプローチにより、JavaScript コードがより小さく、より高速で、よりシンプルになります。Svelte 上では、ルーティング、サーバーサイドのレンダリング、Node.js サポートなどに SvelteKit メタ フレームワークを使用できます。

Google Cloud のデベロッパー ツールとサーバーレス ランタイムは、SvelteKit ワークフローにシームレスに組み込まれます。では、アプリを起動して実行するには何をすればよいかを見てみましょう。ここでは RealWorld サンプルアプリのシナリオを使用します。これはデモアプリのフルスタック仕様で、さまざまなフロントエンドおよびバックエンド フレームワークの 100 を超える実装が含まれています。

Cloud Shell での Svelte コードの使用

最初に、Google Cloud Shell を起動します。ide.cloud.google.com に移動するだけでよく、Google Cloud アカウントは必要ありません。Google アカウントさえあれば誰でもアクセスできます。Cloud Shell は、コードエディタ、ターミナル、拡張機能などを備えた機能豊富な IDE です。

次に [Clone Git Repository...] を選択して URL https://github.com/sveltejs/realworld を指定し、[Clone from URL] を選択します。

これでリポジトリのクローンが作成されました。エクスプローラ ビューにサンプル アプリケーション コードが表示されるはずです。詳しく見ていく前に、構文のハイライト表示やその他の便利な機能を提供する Svelte 拡張機能をインストールしておきましょう。

スクリプト、スタイル、マークアップは、構成要素またはコンポーネントにパッケージ化できます。少し見てみましょう。src/lib/ArticleList/index.svelte では、ArticleList コンポーネントが、ArticlePreview コンポーネントを埋め込んで、各記事の HTML マークアップを表示する様子を確認できます。

アプリのプレビュー

コードを確認したので、次にアプリケーションをプレビューしましょう。IDE の右上にあるプロンプト アイコンを使用して、ターミナル ウィンドウを開きます。必要に応じて、ディレクトリをリポジトリのクローンを作成した realworld ディレクトリに変更します。次に、npm install を実行して必要なパッケージをインストールしてから、プレビュー モードで npm run dev を実行します。

リンクを直接「コマンドクリック」して、プロキシ サービスを使用してアクセスすることもできます。では、見てみましょう。

簡単であることをおわかりいただけたことと思います。次に、Cloud Run でアプリを本番環境にデプロイする準備をしましょう。

デプロイの準備

スムーズなエクスペリエンスになるように、初期設定の状態のデモ アプリケーションにいくつかの小さな変更を加える必要があります。

まず、使用される SvelteKit アダプターを Vercel から Node.js に更新しましょう。ターミナルから、以下を実行します。

• npm uninstall @sveltejs/adapter-vercel

• npm install -D @sveltejs/adapter-node

次に、新しいアダプターを使用するために svelte-config.js を更新します。

最後に Dockerfile を作成して、アプリをビルドして実行しましょう。コンテナに必要なファイルのみを含めるために、.dockerignore ファイルを含めます。

Dockerfile

.dockerignore

アプリのデプロイ

自動スケーリング、高可用性、アイドルコストなし、CI / CD 統合など、Cloud Run には必要なものがすべて揃っています。あとはソースコードをコンテナ イメージにパッケージ化し、そのイメージをデプロイするだけです。

CLI をご利用のユーザーなら、gcloud run deploy を使用すれば、次のステップはとても簡単です。ただし、ここではプロセスを順を追って説明しながら素晴らしい UI ツールをご紹介したいと思います。Cloud Code 拡張機能（スクリーンショットの左下）を使用すると、一般的なデプロイ手順を UI で直接実行できます。Cloud Run に移動し、プロジェクト上のデプロイ アイコンを選択します。

デフォルト設定のままで問題ありません。サービスの名前を選択し、作成した Dockerfile を使用してデプロイしていることを確認するだけです。

数分後には、パッケージ化の手順がすべて完了するはずです。これで Cloud Run 上でアプリが稼働されました。コンソールで詳細を確認できます。

まとめ

このブログ投稿では、Google Cloud 上での Svelte アプリの開発と本番環境へのデプロイをいかに簡単に始めることができるかをご紹介しました。Svelte についてさらに学習するには、オンライン チュートリアルを利用するか、Svelte と Vertex AI を使用したハンズオンラボをお試しください。次のアプリ開発がうまくいくことを願っています。

ー Cloud プロダクト DevRel 担当責任者 Karl Weinmeister