このチュートリアルでは、Google Cloud の AI を活用したコラボレーターである Google Cloud 向け Gemini for Google Cloud を使用して、サンプルの Node.js アプリを探索、作成、変更、テスト、デプロイする方法について説明します。
次のステップでは、自身を Node.js デベロッパーとして、基本的なフォームを使用する簡単なウェブ アプリケーションを JavaScript で記述する場合について考えてみましょう。このシナリオでは、アプリには Express フレームワークを、HTML フォームには EJS テンプレートを使用します。
このガイドは、Gemini を使用して開発プロセスをスピードアップすることを検討している Node.js デベロッパーを対象としています。クラウドのクラウドの基本コンセプトに精通していることを前提としていますが、必ずしも Google Cloud のコンセプトを理解している必要はありません。
目標
このチュートリアルは、Gemini を使用して以下を行う方法を学習するのに役立ちます。
- Cloud Shell で Node.js ウェブアプリを開発する。
- Node.js ウェブアプリの単体テストを作成する。
- Node.js ウェブアプリを Cloud Run にデプロイする。
使用する Google Cloud 製品
このチュートリアルでは、次の Google Cloud プロダクトを使用します。
- Gemini: Google Cloud の常時接続のコラボレーターで、デベロッパーやデータ サイエンティストなどの幅広いユーザーに、生成 AI を活用したアシスタンスを提供します。統合されたアシスタンスのエクスペリエンスを提供するために、Gemini は多くの Google Cloud プロダクトに組み込まれています。
- Cloud Code for Cloud Shell プラグイン: Google Cloud で実行されるアプリの開発サイクルをサポートする IDE プラグインの拡張機能。
- Cloud Run: コンテナ化アプリを構築してデプロイできるフルマネージド サービス。Google Cloud がスケーリングなどのインフラストラクチャ タスクを処理するので、デベロッパーはコードのビジネス ロジックに集中できます。 料金情報については、Cloud Run の料金ページをご覧になり、料金計算ツールを使用して、予測される使用量に基づいて費用見積もりを作成してください。
始める前に
- このチュートリアルで使用できる既存の Google Cloud プロジェクトがない場合は、Google Cloud プロジェクトを作成します。
- Cloud Shell をアクティブにします。
- Gemini が Google Cloud ユーザー アカウントとプロジェクト用に設定されていることを確認します。
- Gemini 機能へのアクセス権が付与されているプロジェクトを選択して、Gemini for Cloud Shell を有効にします。
Node.js コードを生成するように Gemini に指示する
Gemini では、チャットで入力したプロンプトとコードコメントに記述した説明に基づいて、Node.js コードを生成できます。記述するコードが多く、Gemini に提供するコンテキストが多いほど、Gemini がアプリの開発の支援により役立ちます。Gemini からのレスポンスは、質問方法やコンテキストの記述によって異なる場合があるため、開発プロセス中に提案を受け入れる前に、Gemini のレスポンスを確認することをおすすめします。
Gemini にスターター コードの生成を依頼する前に、Cloud Shell ターミナルを使用して空のディレクトリを作成し、2 つの空のファイルを追加します。
mkdir node-js-with-gemini
cd node-js-with-gemini
touch app.js test.js
Cloud Shell エディタで、content_copy [エクスプローラ] を選択し、Cloud Shell ターミナルで作成したフォルダを開きます。
パッケージをインストール
Node.js アプリに express
パッケージと ejs
パッケージをインストールします。これらのパッケージのインストールについて Gemini に依頼するには、次の手順に従います。
Cloud Shell エディタの左側のパネルで、spark [Gemini] をクリックします。
[Gemini] ペインで、次のようなプロンプトを入力します。
What is the command to install express and ejs packages for node.js?
send [送信] をクリックします。
Gemini から次のようなレスポンスが返されます。
Node.js 用の express パッケージと ejs パッケージをインストールするには、次のコマンドを使用します。
npm install express ejs
Gemini から提供されたコマンドをコピーして、Cloud Shell ターミナルで実行します。
アプリケーション ファイルを作成する
パッケージをインストールしたら、Gemini を使用して、インストールされたパッケージを app.js
ファイルに追加する方法についてガイダンスを受けます。
app.js
ファイルを Cloud Shell エディタで開きます。Gemini チャットに次のようなプロンプトを入力します。
How do I add these packages to my app.js file?
Gemini から、次のような回答が返されます。
app.js ファイルに express パッケージと ejs パッケージを追加するには、次のコードを使用します。
const express = require('express'); const ejs = require('ejs');
そのためには、express パッケージと ejs パッケージが必要であり、これらを app.js ファイルで使用できるようにします。
Gemini によって提供されたコードを
app.js
ファイルに追加します。
コメント付きのコードを生成する
Cloud Code プラグインには、Gemini にファイル コメントを使用してコードを生成させる機能があります。たとえば、ファイルにコメントをプレースホルダとして追加すると、コメントに記載されているように Gemini にコードの生成を指示することができます。
app.js
ファイルでこの機能を利用するには、Cloud Shell エディタで Gemini が有効になっていることを確認してください。
ファイルの末尾にコメント プレースホルダを追加して、ウェブアプリを初期化します。例:
// Initialize express web app using ejs templating engine
テキスト カーソルをコメントの末尾に移動し、
Control+Enter
(Windows および Linux の場合)またはControl+Return
(MacOS の場合)キーを押してから、タブを押して Gemini のコード生成機能を使用してコードを生成します。Gemini のレスポンスには、次のようにコメントの下に 2 行のコードが含まれます。
// Initialize express web app using ejs templating engine const app = express(); app.set('view engine', 'ejs');
コード生成の出力が期待したものと異なる場合は、必要に応じて追加コンテンツを修正または削除します。
次に、Express ウェブアプリの基本的な機能を生成するためのコメントを追加します。
app.js
ファイルの一番下に移動し、次のコメントを追加します。// add urlencoded middleware to parse form data // define the home route // create a /greeting POST route with a `name` parameter // create a /greeting route that accepts a name parameter // start the server on port 8080
前にコードを生成したのと同様に、ファイルのコメントごとにコードを生成します。
提案を受け入れる前に、生成されたコードの精度を確認してください。
これで、
app.js
ファイル内のコメントに、次のように対応するコードが含まれるようになりました。// add urlencoded middleware to parse form data app.use(express.urlencoded({ extended: true })); // define the home route app.get('/', (req, res) => { res.render('index'); }); // create a /greeting POST route with a `name` parameter app.post('/greeting', (req, res) => { const name = req.body.name || 'World'; res.render('greeting', { name }); }); // start the server const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`App listening on port ${port}`); console.log('Press Ctrl+C to quit.'); }); // create a /greeting route that accepts a name parameter app.get('/greeting/:name', (req, res) => { res.render('greeting', { name: req.params.name }); });
package.json ファイルを作成する
ベースアプリのコードを生成したら、コンテンツを作成して package.json
ファイルに追加します。
app.js
ファイルと同じディレクトリにpackage.json
ファイルを作成します。Cloud Shell エディタで、spark [Gemini] を選択し、次のようなプロンプトを入力します。
Based on my app.js file, can you create a package.json file?
Gemini からの応答には、指定する起動スクリプトと依存関係が提案され、次のような内容になります。
app.js ファイルとともに使用できる package.json ファイルは次のとおりです。
{ "name": "my-app", "version": "1.0.0", "description": "A simple Node.js web app using Express and EJS.", "main": "app.js", "scripts": { "start": "node app.js" }, "dependencies": { "express": "^4.17.1", "ejs": "^3.1.6" } }
この package.json ファイルには、次の情報が含まれています。
アプリの名前(my-app)
アプリのバージョン(1.0.0)
アプリの説明(Express と EJS を使用するシンプルな Node.js ウェブアプリ)
アプリのメインファイル(app.js)
アプリで実行できるスクリプト(start)
アプリの依存関係(express と ejs)Gemini から提供されたコンテンツのみをコピーして、
package.json
ファイルに貼り付けます。
ejs テンプレートを作成する
ウェブアプリを完成させるには、app.js
ファイルおよび package.json
ファイルと同じディレクトリに ejs
テンプレート用の views
ディレクトリを作成します。
ターミナルで次のように入力します。
mkdir views touch views/index.ejs views/greeting.ejs
エディタで
index.ejs
ファイルを開き、次の内容を貼り付けます。<html> <body> <form action="/greeting" method="post"> <label for="name">What's your name?</label> <input type="text" id="name" name="name" autofocus /> <button type="submit">Submit</button> </form> </body> </html>
エディタで
greeting.ejs
ファイルを開き、次の内容を貼り付けます。<html> <body> <a href="/">Home</a> <p>Hello <%= name %>~</p> </body> </html>
ブラウザでアプリをプレビューする
アプリのコード、テンプレート、要件がすべて完成したら、アプリが動作するかどうかを確認できます。
次のコマンドを実行して、依存関係をインストールします。
npm install
次のコマンドを実行してアプリを起動します。
npm start
アプリが正常に動作することを確認します。Cloud Shell タスクバーの右上にある [ウェブでプレビュー] ボタンを選択します。次に、表示されたメニューからポート番号を選びます。Cloud Shell が、新しいブラウザ ウィンドウでプレビュー URL を開きます。
単体テストを作成する
Node.js アプリが正常に動作することを確認したら、アプリを Cloud Run にデプロイする前に test.js
ファイルにユニットテストを記述できます。次の例では、HTTP レスポンス コードが 200 のとき、単体テストの生成の支援を Gemini に依頼します。
app.js
ファイルの最後に次の行を追加して、アプリファイルをエクスポートします。module.exports = app;
test.js
ファイルを開きます。レスポンスが HTTP 200 ステータス コードを返すタイミングをテストするには、Gemini とのチャット ペインを開き、次のようなプロンプトを入力します。
Can you generate a unit test for my home route in app.js to assert that the response code is 200?
Gemini から、次のような回答が返されます。
レスポンス コードが 200 であることを確認する、app.js のホームルートの単体テストを以下に示します。
const assert = require('assert'); const request = require('supertest'); const app = require('./app.js'); describe('GET /', () => { it('should return a 200 response code', async () => { const response = await request(app).get('/'); assert.equal(response.status, 200); }); });
このテストでは、ホームルートがステータス コード 200 を返すことを確認します。
提案されたコードブロックを
test.js
ファイルに追加します。ターミナルで次のコマンドを実行して、mocha test パッケージと supertest パッケージをインストールします。
npm i mocha supertest
package.json
ファイルを更新して、新しいテスト スクリプトとそのパッケージを含めます。例:{ "name": "my-app", "version": "1.0.0", "description": "A simple Node.js web app using Express and EJS.", "main": "app.js", "scripts": { "start": "node app.js", "test": "mocha" }, "dependencies": { "express": "^4.17.1", "ejs": "^3.1.6", "mocha": "^10.2.0", "supertest": "^6.3.3" } }
次のコマンドを実行してテストを実行します。
npm test
エラーがなければ、テストは合格として表示されます。他のルートにテストを追加する場合は、test.js
ファイルに追加する提案について Gemini への依頼を続けます。
Cloud Run にデプロイする
アプリをローカルで実行したら、Google Cloud へのデプロイに進みます。ソースコードからデプロイでき、アプリの実行時にインフラストラクチャを管理する必要がないため、Cloud Run はこのシナリオに適しています。
Gemini とのチャットで、gcloud を使用してソースコードから直接 Cloud Run にデプロイする方法を Gemini に質問します。
What is the gcloud command for deploying a Cloud Run service from source code?
Gemini から、次のような回答が返されます。
gcloud を使用して、現在のディレクトリ内のソースコードから Cloud Run に直接デプロイできます。これを行うには、
--source flag
を付けてgcloud run deploy
コマンドを使用します。このフラグは、ソースコードを使用してコンテナ イメージをビルドし、Cloud Run にデプロイするように gcloud に指示します。たとえば、app.js ファイル内のコードを Cloud Run にデプロイするには、次のコマンドを使用します。
gcloud run deploy app --source .
このコマンドは、app.js ファイルからコンテナ イメージをビルドし、Cloud Run にデプロイします。
--region フラグを使用して、アプリをデプロイするリージョンを指定することもできます。たとえば、アプリを us-central1 リージョンにデプロイするには、次のコマンドを使用します。
gcloud run deploy app --source . --region us-central1
ソースコードから Cloud Run にデプロイする方法については、Cloud Run のドキュメントをご覧ください。
Gemini がレスポンスで提供した gcloud コマンドを使用します。
プロンプトに従ってリージョンを選択し、テストアプリの未認証の呼び出しを許可するオプションを選択します。アプリが正常にデプロイされると、出力で Service URL が返されます。
クリーンアップ
このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、このチュートリアルで作成した Google Cloud プロジェクトを削除します。また、リソースを個別に削除することもできます。
- 注意: プロジェクトを削除すると、次のような影響があります。
- プロジェクト内のすべてのものが削除されます。このドキュメントのタスクで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
- カスタム プロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタム プロジェクト ID を作成した可能性があります。appspot.com URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。
複数のアーキテクチャ、チュートリアル、クイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。Google Cloud コンソールで、[リソースの管理] ページに移動します。
プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
次のステップ
- Gemini for Google Cloud の概要を読む。
- Gemini の割り当てと上限およびサポートされているロケーションについて理解する。
- Cloud Run を使用したソースコードからのデプロイの詳細を学習する。