Google Cloud용 Gemini 지원을 통한 Node.js 앱 개발

이 튜토리얼에서는 Google Cloud의 AI 기반 공동작업 도구인 Google Cloud의 Gemini를 사용하여 샘플 Node.js 앱을 탐색, 생성, 수정, 테스트, 배포하는 방법을 보여줍니다.

다음 단계에서는 사용자가 Node.js 개발자이고 기본 양식을 사용하는 자바스크립트로 간단한 웹 애플리케이션을 작성한다고 가정합니다. 이 시나리오에서는 앱에 Express 프레임워크를 사용하고 HTML 양식에 EJS 템플릿을 사용합니다.

이 가이드는 Gemini를 사용하여 개발 프로세스의 속도를 높이려는 Node.js 개발자를 대상으로 합니다. 여기서는 사용자가 기본 클라우드 개념에 익숙하다고 가정하지만, 반드시 Google Cloud에 익숙할 필요는 없습니다.

목표

이 튜토리얼에서는 Gemini를 사용하여 다음을 수행하는 방법을 설명합니다.

Cloud Shell에서 Node.js 웹 앱을 개발합니다.
Node.js 웹 앱의 단위 테스트를 작성합니다.
Node.js 웹 앱을 Cloud Run에 배포합니다.

사용된 Google Cloud 제품

이 튜토리얼에서는 다음 Google Cloud 제품을 사용합니다.

Gemini: 개발자 및 데이터 과학자를 포함하여 광범위한 사용자에게 생성형 AI 기반 지원을 제공하는 Google Cloud의 상시 공동 작업 도구입니다. 통합 지원 경험의 제공을 위해 Gemini는 많은 Google Cloud 제품에 포함되어 있습니다.
Cloud Shell용 Cloud Code 플러그인: Google Cloud에서 실행되는 앱의 개발 주기 지원을 제공하는 IDE 플러그인 확장 프로그램입니다.
Cloud Run: 컨테이너화된 앱을 빌드하고 배포할 수 있는 완전 관리형 서비스입니다. Google Cloud에서 확장과 기타 인프라 태스크를 처리하여 코드의 비즈니스 로직에 집중할 수 있습니다. 가격 책정 정보는 Cloud Run 가격 책정 페이지를 참조하고 가격 계산기를 사용하여 예상되는 사용량을 기반으로 예상 비용을 산출할 수 있습니다.

시작하기 전에

이 튜토리얼에 사용할 수 있는 기존 Google Cloud 프로젝트가 없으면 Google Cloud 프로젝트를 만듭니다.
Cloud Shell을 활성화합니다.
Gemini가 Google Cloud 사용자 계정과 프로젝트에 설정되어 있는지 확인합니다.
Gemini 기능에 대한 액세스 권한이 부여된 프로젝트를 선택하여 Cloud Shell용 Gemini를 사용 설정합니다.

Node.js 코드를 생성하도록 Gemini에 프롬프트 작성

Gemini는 채팅에서 제공하는 프롬프트와 코드 주석에 작성한 설명을 기반으로 Node.js 코드를 생성하는 데 도움이 됩니다. 더 많은 코드를 작성하고 Gemini에 더 많은 컨텍스트를 제공할수록 Gemini가 앱 개발에 더욱 도움이 될 수 있습니다. Gemini의 응답은 질문하거나 컨텍스트를 설명하는 방법에 따라 다를 수 있으므로 개발 프로세스 중 제안을 수락하기 전에 Gemini의 응답을 검토하는 것이 좋습니다.

Gemini에 시작 코드를 생성하기 전에 Cloud Shell 터미널을 사용하여 빈 디렉터리를 만들고 두 개의 빈 파일을 추가합니다.

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?
보내기 보내기를 클릭합니다.

Gemini는 다음과 비슷한 응답을 반환합니다.
Node.js용 Express 및 ejs 패키지를 설치하려면 다음 명령어를 사용합니다.
```
npm install express ejs
```
Gemini에서 제공하는 명령어를 복사하고 Cloud Shell 터미널에서 실행합니다.

애플리케이션 파일 작성

패키지를 설치한 후 Gemini를 사용하여 설치된 패키지를 app.js 파일에 추가하는 방법을 알아봅니다.

Cloud Shell 편집기에서 app.js 파일을 엽니다.
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');
```
이를 위해서는 익스프레스 및 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의 경우)을 누른 다음, Tab 키를 눌러 Gemini의 코드 생성 기능을 사용하여 코드를 생성합니다.

Gemini의 응답에는 다음과 비슷하게 주석 아래에 두 줄의 코드가 포함됩니다.
```
// 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)
앱에서 실행할 수 있는 스크립트(시작)
앱의 종속 항목(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 테스트 및 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
```

오류가 없으면 테스트가 통과한 것으로 표시됩니다. 다른 경로에 테스트를 더 추가하려면 Gemini에 test.js 파일에 추가할 추천을 계속 요청합니다.

Cloud Run에 배포

이제 앱이 로컬에서 실행되므로 Google Cloud에 배포를 진행할 수 있습니다. Cloud Run은 소스 코드에서 배포할 수 있고 앱을 실행할 때 인프라를 관리할 필요가 없기 때문에 이 시나리오에 적합합니다.

Gemini 채팅에서 Gemini 에 gcloud를 사용하여 소스 코드에서 직접 Cloud Run에 배포하는 방법을 요청합니다.

What is the gcloud command for deploying a Cloud Run service from source code?

Gemini는 다음과 같이 응답해야 합니다.
gcloud를 사용하여 현재 디렉터리의 소스 코드에서 Cloud Run으로 직접 배포할 수 있습니다. 이렇게 하려면 gcloud run deploy 명령어를 --source flag와 함께 사용하면 됩니다. 이 플래그는 gcloud에 소스 코드를 사용하여 컨테이너 이미지를 빌드하고 이를 Cloud Run에 배포하도록 지시합니다.

예를 들어 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 명령어를 사용합니다.
리전을 선택하라는 메시지에 따라 테스트 앱에 인증되지 않은 호출을 허용하는 옵션을 선택합니다. 앱이 성공적으로 배포되면 출력에 서비스 URL이 반환됩니다.

삭제

이 튜토리얼에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 이 튜토리얼에서 만든 Google Cloud 프로젝트를 삭제하면 됩니다. 또는 개별 리소스를 삭제할 수 있습니다.

주의: 프로젝트를 삭제하면 다음과 같은 효과가 발생합니다.
- 프로젝트의 모든 항목이 삭제됩니다. 이 문서의 태스크에 기존 프로젝트를 사용한 경우 프로젝트를 삭제하면 프로젝트에서 수행한 다른 작업도 삭제됩니다.
- 커스텀 프로젝트 ID가 손실됩니다. 이 프로젝트를 만들 때 앞으로 사용할 커스텀 프로젝트 ID를 만들었을 수 있습니다. appspot.com URL과 같이 프로젝트 ID를 사용하는 URL을 보존하려면 전체 프로젝트를 삭제하는 대신 프로젝트 내의 선택된 리소스만 삭제하세요.
여러 아키텍처, 튜토리얼 또는 빠른 시작을 살펴보려는 경우 프로젝트를 재사용하면 프로젝트 할당량 한도 초과를 방지할 수 있습니다. Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다.

리소스 관리로 이동
프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제를 클릭합니다.
대화상자에서 프로젝트 ID를 입력하고 종료를 클릭하여 프로젝트를 삭제합니다.

다음 단계

Google Cloud용 Gemini 개요를 읽어봅니다.
Gemini 할당량 및 한도와 지원되는 위치를 파악합니다.
Cloud Run을 사용하여 소스 코드에서 배포에 대해 자세히 알아봅니다.