Cloud Run용 WebSocket 채팅 서비스 빌드 튜토리얼

이 튜토리얼에서는 양방향 통신을 위한 영구적인 연결을 통해 WebSockets를 사용하여 멀티룸 실시간 채팅 서비스를 만드는 방법을 보여줍니다. WebSockets를 사용하면 클라이언트와 서버 모두에서 서버 업데이트 폴링 없이 서로 메시지를 푸시할 수 있습니다.

세션 어피니티를 사용하도록 Cloud Run을 구성할 수 있지만 이 경우 최선의 어피니티가 제공되므로 새 요청은 여전히 잠재적으로 다른 인스턴스로 라우팅될 수 있다는 것을 의미합니다. 따라서 하나의 인스턴스에 연결된 클라이언트 사이뿐만 아니라 모든 인스턴스 간에 채팅 서비스의 사용자 메시지를 동기화해야 합니다.

디자인 개요

이 샘플 채팅 서비스는 Redis용 Memorystore 인스턴스를 사용하여 모든 인스턴스에서 사용자 메시지를 저장하고 동기화합니다. Redis는 Pub/Sub 메커니즘(Cloud Pub/Sub 제품이 아님)을 사용하여 모든 인스턴스에 연결된 구독 클라이언트로 데이터를 푸시하고 업데이트를 위해 HTTP 폴링을 제거합니다.

하지만 푸시 업데이트를 사용하더라도 작동되는 인스턴스는 컨테이너에 푸시된 새 메시지만 수신합니다. 이전 메시지를 로드하려면 메시지 기록을 저장하고 영구 스토리지 솔루션에서 검색해야 합니다. 이 샘플은 객체 저장소의 Redis의 기존 기능을 사용하여 메시지 기록을 캐싱하고 검색합니다.

아키텍처 다이어그램 — 이 다이어그램은 각 Cloud Run 인스턴스에 대한 여러 클라이언트 연결을 보여줍니다. 각 인스턴스는 서버리스 VPC 액세스 커넥터를 통해 Redis용 Memorystore 인스턴스에 연결합니다.

Redis 인스턴스는 Redis 인스턴스와 동일한 가상 사설망(VPN)에서 실행되는 서비스로 액세스가 제어 및 제한되는 비공개 IP를 사용하여 인터넷으로부터 보호됩니다. 따라서 Cloud Run 서비스를 Redis에 연결하려면 서버리스 VPC 액세스 커넥터가 필요합니다. 서버리스 VPC 액세스에 대해 자세히 알아보기

제한사항

이 튜토리얼에서는 최종 사용자 인증이나 세션 캐싱을 보여주지 않습니다. 최종 사용자 인증에 대한 자세한 내용은 최종 사용자 인증에 대한 Cloud Run 튜토리얼을 참조하세요.
이 튜토리얼에서는 채팅 메시지 기록을 무기한 저장하고 검색하기 위해 Firestore와 같은 데이터베이스를 구현하지 않습니다.
이 샘플 서비스를 프로덕션에 사용하기 위해서는 추가 요소가 필요합니다. 표준 등급 Redis 인스턴스는 복제 및 자동 장애 조치를 사용하여 고가용성을 제공하기 위해 권장됩니다.

목표

WebSockets를 사용하는 Cloud Run 서비스를 작성, 빌드, 배포하기
Redis용 Memorystore 인스턴스에 연결하여 모든 인스턴스에서 새 메시지를 게시하고 구독하기
서버리스 VPC 액세스 커넥터를 사용하여 Cloud Run 서비스를 Memorystore와 연결하기

비용

이 문서에서는 비용이 청구될 수 있는 다음과 같은 Google Cloud 구성요소를 사용합니다.

프로젝트 사용량을 기준으로 예상 비용을 산출하려면 가격 계산기를 사용하세요. Google Cloud를 처음 사용하는 사용자는 무료 체험판을 사용할 수 있습니다.

시작하기 전에

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Go to project selector

Google Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Go to project selector

Google Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다.

Enable the Cloud Run, Memorystore for Redis, Serverless VPC Access, Artifact Registry, and Cloud Build APIs.
Enable the APIs

gcloud CLI를 설치하고 초기화합니다.

필요한 역할

튜토리얼을 완료하는 데 필요한 권한을 얻으려면 관리자에게 프로젝트에 대한 다음 IAM 역할을 부여해 달라고 요청하세요.

Artifact Registry 리더(roles/artifactregistry.reader)
Cloud Build 편집자(roles/cloudbuild.builds.editor)
Cloud Memorystore Redis 관리자(roles/redis.admin)
Cloud Run 관리자(roles/run.admin)
서비스 계정 만들기(roles/iam.serviceAccountCreator)
프로젝트 IAM 관리자(roles/resourcemanager.projectIamAdmin)
서버리스 VPC 액세스 서비스 에이전트(roles/vpcaccess.serviceAgent)
서비스 계정 관리자(roles/iam.serviceAccountAdmin)
서비스 사용량 소비자(roles/serviceusage.serviceUsageConsumer)

역할 부여에 대한 자세한 내용은 프로젝트, 폴더, 조직에 대한 액세스 관리를 참조하세요.

커스텀 역할이나 다른 사전 정의된 역할을 통해 필요한 권한을 얻을 수도 있습니다.

`gcloud` 기본값 설정

Cloud Run 서비스의 기본값으로 gcloud를 구성하려면 다음 안내를 따르세요.

기본 프로젝트를 설정합니다.
```
gcloud config set project PROJECT_ID
```
PROJECT_ID를 이 튜토리얼용으로 만든 프로젝트 이름으로 바꿉니다.
선택한 리전에 맞게 gcloud를 구성합니다.
```
gcloud config set run/region REGION
```
REGION을 지원되는 Cloud Run 리전 중 원하는 리전으로 바꿉니다.

Cloud Run 위치

Cloud Run은 리전을 기반으로 합니다. 즉, Cloud Run 서비스를 실행하는 인프라가 특정 리전에 위치해 있으며 해당 리전 내의 모든 영역에서 중복으로 사용할 수 있도록 Google이 관리합니다.

Cloud Run 서비스를 실행하는 리전을 선택하는 데 있어 중요한 기준은 지연 시간, 가용성 또는 내구성 요구사항입니다. 일반적으로 사용자와 가장 가까운 리전을 선택할 수 있지만 Cloud Run 서비스에서 사용하는 다른 Google Cloud 제품 위치도 고려해야 합니다. 여러 위치에서 Google Cloud 제품을 함께 사용하면 서비스 지연 시간과 비용에 영향을 미칠 수 있습니다.

Cloud Run은 다음 리전에서 사용할 수 있습니다.

등급 1 가격 적용

asia-east1(타이완)
asia-northeast1(도쿄)
asia-northeast2(오사카)
europe-north1(핀란드) 낮은 CO₂
europe-southwest1(마드리드) 낮은 CO₂
europe-west1(벨기에) 낮은 CO₂
europe-west4(네덜란드) 낮은 CO₂
europe-west8(밀라노)
europe-west9(파리) 낮은 CO₂
me-west1(텔아비브)
us-central1(아이오와) 낮은 CO₂
us-east1(사우스캐롤라이나)
us-east4(북 버지니아)
us-east5(콜럼버스)
us-south1(댈러스) 낮은 CO₂
us-west1(오리건) 낮은 CO₂

등급 2 가격 적용

africa-south1(요하네스버그)
asia-east2(홍콩)
asia-northeast3(대한민국 서울)
asia-southeast1(싱가포르)
asia-southeast2 (자카르타)
asia-south1(인도 뭄바이)
asia-south2(인도 델리)
australia-southeast1(시드니)
australia-southeast2(멜버른)
europe-central2(폴란드 바르샤바)
europe-west10(베를린) 낮은 CO₂
europe-west12(토리노)
europe-west2(영국 런던) 낮은 CO₂
europe-west3(독일 프랑크푸르트) 낮은 CO₂
europe-west6(스위스 취리히) 낮은 CO₂
me-central1(도하)
me-central2(담맘)
northamerica-northeast1(몬트리올) 낮은 CO₂
northamerica-northeast2(토론토) 낮은 CO₂
southamerica-east1(브라질 상파울루) 낮은 CO₂
southamerica-west1(칠레 산티아고) 낮은 CO₂
us-west2(로스앤젤레스)
us-west3(솔트레이크시티)
us-west4(라스베이거스)

Cloud Run 서비스를 이미 만들었다면 Google Cloud 콘솔의 Cloud Run 대시보드에서 리전을 확인할 수 있습니다.

코드 샘플 검색

사용할 코드 샘플을 검색하려면 다음 안내를 따르세요.

샘플 저장소를 로컬 머신에 클론합니다.
Node.js
```
git clone https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git
```
또는 zip 파일로 샘플을 다운로드하고 압축을 풀 수 있습니다.
Cloud Run 샘플 코드가 포함된 디렉터리로 변경합니다.
Node.js
```
cd nodejs-docs-samples/run/websockets/
```

코드 이해하기

Socket.io는 브라우저와 서버 간의 실시간 양방향 통신을 가능하게 하는 라이브러리입니다. Socket.io는 WebSocket 구현이 아니지만 향상된 안정성, 자동 재연결, 클라이언트 전체 또는 하위 집합에 대한 브로드캐스팅과 같은 추가 기능으로 여러 통신 프로토콜에 더 간단한 API를 제공하는 기능을 래핑합니다.

클라이언트 측 통합

<script src="/socket.io/socket.io.js"></script>

클라이언트는 모든 연결에 대해 새 소켓 인스턴스를 인스턴스화합니다. 이 샘플은 서버 측에서 렌더링되므로 서버 URL을 정의할 필요가 없습니다. 소켓 인스턴스는 이벤트를 방출하고 리슨할 수 있습니다.

// Initialize Socket.io
const socket = io('', {
  transports: ['websocket'],
});

// Emit "sendMessage" event with message
socket.emit('sendMessage', msg, error => {
  if (error) {
    console.error(error);
  } else {
    // Clear message
    $('#msg').val('');
  }
});

// Listen for new messages
socket.on('message', msg => {
  log(msg.user, msg.text);
});

// Listen for notifications
socket.on('notification', msg => {
  log(msg.title, msg.description);
});

// Listen connect event
socket.on('connect', () => {
  console.log('connected');
});

서버 측 통합

서버 측에서는 Socket.io 서버가 초기화되어 HTTP 서버에 연결됩니다. 클라이언트 측과 마찬가지로 Socket.io 서버가 클라이언트에 연결하면 모든 연결에 대해 소켓 인스턴스가 생성되어 메시지를 내보내고 수신하는 데 사용될 수 있습니다. Socket.io는 소켓이 합류하거나 나갈 수 있는 임의의 채널 또는 "채팅방"을 만들기 위한 간편한 인터페이스도 제공합니다.

// Initialize Socket.io
const server = require('http').Server(app);
const io = require('socket.io')(server);

const {createAdapter} = require('@socket.io/redis-adapter');
// Replace in-memory adapter with Redis
const subClient = redisClient.duplicate();
io.adapter(createAdapter(redisClient, subClient));
// Add error handlers
redisClient.on('error', err => {
  console.error(err.message);
});

subClient.on('error', err => {
  console.error(err.message);
});

// Listen for new connection
io.on('connection', socket => {
  // Add listener for "signin" event
  socket.on('signin', async ({user, room}, callback) => {
    try {
      // Record socket ID to user's name and chat room
      addUser(socket.id, user, room);
      // Call join to subscribe the socket to a given channel
      socket.join(room);
      // Emit notification event
      socket.in(room).emit('notification', {
        title: "Someone's here",
        description: `${user} just entered the room`,
      });
      // Retrieve room's message history or return null
      const messages = await getRoomFromCache(room);
      // Use the callback to respond with the room's message history
      // Callbacks are more commonly used for event listeners than promises
      callback(null, messages);
    } catch (err) {
      callback(err, null);
    }
  });

  // Add listener for "updateSocketId" event
  socket.on('updateSocketId', async ({user, room}) => {
    try {
      addUser(socket.id, user, room);
      socket.join(room);
    } catch (err) {
      console.error(err);
    }
  });

  // Add listener for "sendMessage" event
  socket.on('sendMessage', (message, callback) => {
    // Retrieve user's name and chat room  from socket ID
    const {user, room} = getUser(socket.id);
    if (room) {
      const msg = {user, text: message};
      // Push message to clients in chat room
      io.in(room).emit('message', msg);
      addMessageToCache(room, msg);
      callback();
    } else {
      callback('User session not found.');
    }
  });

  // Add listener for disconnection
  socket.on('disconnect', () => {
    // Remove socket ID from list
    const {user, room} = deleteUser(socket.id);
    if (user) {
      io.in(room).emit('notification', {
        title: 'Someone just left',
        description: `${user} just left the room`,
      });
    }
  });
});

또한 Socket.io는 소켓을 제공하는 서버에 관계없이 모든 클라이언트에 이벤트를 브로드캐스트하는 Redis 어댑터를 제공합니다. Socket.io는 Redis의 Pub/Sub 메커니즘만 사용하며 데이터를 저장하지 않습니다.

const {createAdapter} = require('@socket.io/redis-adapter');
// Replace in-memory adapter with Redis
const subClient = redisClient.duplicate();
io.adapter(createAdapter(redisClient, subClient));

Socket.io의 Redis 어댑터는 채팅방의 메시지 기록을 저장하는 데 사용되는 Redis 클라이언트를 재사용할 수 있습니다. 각 컨테이너는 Redis 인스턴스에 연결하고 Cloud Run은 여러 개의 인스턴스를 만들 수 있습니다. 이는 Redis가 지원할 수 있는 65,000개의 연결에 비해 훨씬 적습니다. 이러한 양의 트래픽을 지원해야 하는 경우 서버리스 VPC 액세스 커넥터의 처리량도 평가해야 합니다.

다시 연결

Cloud Run의 최대 제한 시간은 60분입니다. 따라서 제한 시간이 발생할 경우를 위해 다시 연결 논리를 추가해야 합니다. 일부 경우에는 연결 해제 또는 연결 오류 이벤트가 발생한 후 Socket.io가 자동으로 다시 연결을 시도합니다. 클라이언트가 동일한 인스턴스에 다시 연결된다는 보장은 없습니다.

// Listen for reconnect event
socket.io.on('reconnect', () => {
  console.log('reconnected');
  // Emit "updateSocketId" event to update the recorded socket ID with user and room
  socket.emit('updateSocketId', {user, room}, error => {
    if (error) {
      console.error(error);
    }
  });
});

// Add listener for "updateSocketId" event
socket.on('updateSocketId', async ({user, room}) => {
  try {
    addUser(socket.id, user, room);
    socket.join(room);
  } catch (err) {
    console.error(err);
  }
});

모든 요청이 종료되거나 시간 초과될 때까지 활성 연결이 있는 경우 인스턴스가 지속됩니다. Cloud Run 세션 어피니티를 사용하는 경우라도 새 요청이 활성 컨테이너로 부하 분산되어 컨테이너가 수평 축소될 수 있습니다. 트래픽 급증이 발생한 뒤에도 많은 수의 컨테이너가 지속되는 것에 대해 우려한다면 시간 초과의 최댓값을 낮춰 미사용 소켓을 더 자주 삭제할 수 있습니다.

서비스 제공

Redis용 Memorystore 인스턴스를 만듭니다.
```
gcloud redis instances create INSTANCE_ID --size=1 --region=REGION
```
INSTANCE_ID를 인스턴스 이름(예: my-redis-instance)으로 바꾸고 REGION_ID를 모든 리소스 및 서비스의 리전(예: us-central1)으로 바꿉니다.

인스턴스에는 기본 서비스 네트워크 범위의 IP 범위가 자동으로 할당됩니다. 이 튜토리얼에서는 Redis 인스턴스에서 메시지의 로컬 캐시에 1GB의 메모리를 사용합니다. 사용 사례에 대한 Memorystore 인스턴스 초기 크기 결정에 대해 자세히 알아보세요.
서버리스 VPC 액세스 커넥터를 설정합니다.

Redis 인스턴스에 연결하려면 Cloud Run 서비스에서 Redis 인스턴스의 승인된 VPC 네트워크에 대한 액세스 권한이 필요합니다.

모든 VPC 커넥터에는 커넥터 인스턴스를 배치할 자체 /28 서브넷이 필요합니다. 이 IP 범위는 VPC 네트워크에 예약된 기존 IP 주소와 겹치지 않아야 합니다. 예를 들어 10.8.0.0(/28)은 대부분의 새 프로젝트에서 작동하거나 10.9.0.0(/28)과 같이 사용되지 않은 다른 커스텀 IP 범위를 지정할 수 있습니다. Google Cloud 콘솔에서 현재 예약된 IP 범위를 확인할 수 있습니다.
```
gcloud compute networks vpc-access connectors create CONNECTOR_NAME \
  --region REGION \
  --range "10.8.0.0/28"
```
CONNECTOR_NAME을 애플리케이션 이름으로 바꿉니다.

이 명령어는 Redis 인스턴스와 동일하게 e2-micro 머신 크기로 기본 VPC 네트워크에 커넥터를 만듭니다. 커넥터의 머신 크기를 늘리면 커넥터의 처리량이 향상되지만 비용도 증가합니다. 또한 커넥터는 Redis 인스턴스와 동일한 리전에 있어야 합니다. 서버리스 VPC 액세스 구성에 대해 자세히 알아보세요.

참고: Cloud Run 서비스, Redis 인스턴스, 서버리스 VPC 액세스 커넥터가 동일한 리전 및 VPC 네트워크에 있어야 합니다.
Redis 인스턴스의 승인된 네트워크의 IP 주소로 환경 변수를 정의합니다.
```
 export REDISHOST=$(gcloud redis instances describe INSTANCE_ID --region REGION --format "value(host)")
```
참고: 이 튜토리얼에서는 Redis 포트의 기본값 6379를 사용합니다.

서비스 ID로 사용할 서비스 계정을 만듭니다. 기본적으로 여기에는 프로젝트 멤버쉽 이외의 다른 권한이 포함되지 않습니다.

gcloud iam service-accounts create chat-identity
gcloud projects add-iam-policy-binding PROJECT_ID \
--member=serviceAccount:chat-identity@PROJECT_ID.iam.gserviceaccount.com \
--role=roles/serviceusage.serviceUsageConsumer

컨테이너 이미지를 빌드하여 Cloud Run에 배포합니다.
```
gcloud run deploy chat-app --source . \
    --vpc-connector CONNECTOR_NAME \
    --allow-unauthenticated \
    --timeout 3600 \
    --service-account chat-identity \
    --update-env-vars REDISHOST=$REDISHOST
```
메시지가 표시되면 y를 응답하여 필요한 API를 설치하도록 프롬프트에 응답합니다. 이 작업은 프로젝트에서 한 번만 수행하면 됩니다. 설정 페이지에 설명된 대로 이에 대한 기본값을 설정하지 않은 경우 플랫폼 및 리전을 제공하여 다른 프롬프트에 응답합니다. 소스 코드에서 배포에 대해 자세히 알아보기

사용해 보기

전체 서비스를 시도해봅니다.

브라우저에서 위의 배포 단계로 제공된 URL로 이동합니다.
이름과 채팅방을 추가하여 로그인합니다.
채팅방으로 메시지를 보냅니다.

이러한 서비스를 계속 개발하려면 이들 서비스에 다른 Google Cloud 서비스에 대한 제한적인 Identity and Access Management(IAM) 액세스 권한이 있으며 다른 여러 서비스에 액세스하려면 추가 IAM 역할이 부여되어야 합니다.

삭제

이 튜토리얼용으로 새 프로젝트를 만든 경우 이 프로젝트를 삭제합니다. 기존 프로젝트를 사용한 경우 이 튜토리얼에 추가된 변경사항은 제외하고 보존하려면 튜토리얼용으로 만든 리소스를 삭제합니다.

프로젝트 삭제

비용이 청구되지 않도록 하는 가장 쉬운 방법은 튜토리얼에서 만든 프로젝트를 삭제하는 것입니다.

프로젝트를 삭제하려면 다음 안내를 따르세요.

주의: 프로젝트를 삭제하면 다음과 같은 효과가 발생합니다.

프로젝트의 모든 항목이 삭제됩니다. 이 문서의 태스크에 기존 프로젝트를 사용한 경우 프로젝트를 삭제하면 프로젝트에서 수행한 다른 작업도 삭제됩니다.
커스텀 프로젝트 ID가 손실됩니다. 이 프로젝트를 만들 때 앞으로 사용할 커스텀 프로젝트 ID를 만들었을 수 있습니다. appspot.com URL과 같이 프로젝트 ID를 사용하는 URL을 보존하려면 전체 프로젝트를 삭제하는 대신 프로젝트 내에서 선택한 리소스만 삭제합니다.

여러 아키텍처, 튜토리얼, 빠른 시작을 살펴보려는 경우 프로젝트를 재사용하면 프로젝트 할당량 한도 초과를 방지할 수 있습니다.

In the Google Cloud console, go to the Manage resources page.
Go to Manage resources
In the project list, select the project that you want to delete, and then click Delete.
In the dialog, type the project ID, and then click Shut down to delete the project.

튜토리얼 리소스 삭제

이 튜토리얼에서 배포한 Cloud Run 서비스를 삭제합니다.
```
gcloud run services delete SERVICE-NAME
```
여기서 SERVICE-NAME은 선택한 서비스 이름입니다.

Google Cloud 콘솔에서 Cloud Run 서비스를 삭제할 수도 있습니다.
튜토리얼 설정 중에 추가한 gcloud 기본 리전 구성을 삭제합니다.
```
 gcloud config unset run/region
```
프로젝트 구성을 삭제합니다.
```
 gcloud config unset project
```
이 튜토리얼에서 만든 다른 Google Cloud 리소스를 삭제합니다.
- Artifact Registry에서 가져온 gcr.io/PROJECT_ID/chat-app이라는 서비스 컨테이너 이미지를 삭제합니다.
- 서비스 계정 chat-identity@PROJECT_ID.iam.gserviceaccount.com을 삭제합니다.
- Redis용 Memorystore 인스턴스를 삭제합니다.
- 서버리스 VPC 액세스 커넥터를 삭제합니다.

다음 단계

Socket.io 작동 방식 및 고급 사용에 대해 자세히 알아보기
서버리스 VPC 액세스 구성에 대해 자세히 알아보기
Memorystore 및 Cloud Run에서 WebSocket 사용에 대한 권장사항 검토하기
모든 서버리스 네트워킹 문제 해결에 사용할 수 있는 서버리스 VPC 액세스 진단 도구 살펴보기

Cloud Run용 WebSocket 채팅 서비스 빌드 튜토리얼

디자인 개요

제한사항

목표

비용

시작하기 전에

필요한 역할

gcloud 기본값 설정

Cloud Run 위치

등급 1 가격 적용

등급 2 가격 적용

코드 샘플 검색

Node.js

Node.js

코드 이해하기

클라이언트 측 통합

서버 측 통합

다시 연결

서비스 제공

사용해 보기

삭제

프로젝트 삭제

튜토리얼 리소스 삭제

다음 단계

`gcloud` 기본값 설정