이 페이지는 Cloud Translation API를 통해 번역되었습니다.

MongoDB Atlas 및 Cloud Run의 서버리스 MEAN 스택 애플리케이션

1. 소개

이 게시물에서는 Cloud Run과 MongoDB를 함께 사용하여 완전한 서버리스 MEAN 스택 애플리케이션 개발 환경을 구현하는 방법을 살펴보겠습니다. Cloud Run과 MongoDB의 멀티 클라우드 애플리케이션 데이터 플랫폼인 MongoDB Atlas를 사용하여 서버리스 MEAN 애플리케이션을 빌드하는 방법을 알아봅니다.

Cloud Run이란 무엇인가요?

Cloud Run을 사용하면 완전 관리형 플랫폼에서 모든 언어 (Go, Python, Java, Node.js, .NET, Ruby 등)로 작성된 확장 가능한 컨테이너화된 앱을 빌드하고 배포할 수 있습니다. Cloud Run은 다음과 같은 이점을 통해 차별화됩니다.

요청을 인식하는 여러 스테이트리스(Stateless) 컨테이너에 코드를 패키징하고 HTTP 요청을 통해 이를 호출
정확히 사용한 리소스에 대해서만 비용이 청구됨
모든 프로그래밍 언어, 원하는 운영 체제 라이브러리 또는 모든 바이너리를 지원합니다.

전체 컨텍스트에서 더 많은 기능을 살펴보려면 이 링크를 확인하세요.

MongoDB Atlas를 사용하는 서버리스 데이터베이스

MongoDB는 이 문제를 해결하기 위해 Atlas에 새로운 완전 관리형 서버리스 데이터베이스 배포인 서버리스 인스턴스를 출시했습니다. 서버리스 인스턴스를 사용하면 인프라에 대해 신경 쓸 필요가 없습니다. 데이터베이스를 배포하기만 하면 수요에 따라 원활하게 확장 및 축소되므로 직접 관리할 필요가 없습니다. 가장 좋은 점은 실행한 작업에 대해서만 비용이 청구된다는 점입니다. 아키텍처를 진정한 서버리스로 만들기 위해 Cloud Run과 MongoDB Atlas 기능을 결합하겠습니다.

평균 스택

MEAN 스택은 자바스크립트와 JSON을 사용해 완전히 풀 스택 웹 애플리케이션을 빌드하기 위한 기술 스택입니다. MEAN 스택은 MongoDB, Express, Angular 및 Node.js의 네 가지 주요 구성 요소로 구성됩니다.

MongoDB는 데이터 저장소를 담당합니다.
Express.js는 API를 빌드하기 위한 Node.js 웹 애플리케이션 프레임워크입니다.
Angular는 클라이언트 측 JavaScript 플랫폼입니다.
Node.js는 서버 측 JavaScript 런타임 환경입니다. 서버는 MongoDB Node.js 드라이버를 사용하여 데이터베이스에 연결하고 데이터를 검색 및 저장합니다.

빌드할 항목

MongoDB, Express JS, Angular JS, Node JS에서 풀 스택 Employee-Job Role 애플리케이션을 작성해 봅니다. 여기에는 다음이 포함됩니다.

컨테이너화된 Node JS 및 Express JS로 된 서버 애플리케이션
컨테이너화된 AngularJS로 빌드된 클라이언트 애플리케이션
두 애플리케이션 모두 Cloud Run에 배포됨
서버 앱에서 MongoDB NodeJS 드라이버를 사용하여 서버리스 MongoDB 인스턴스에 연결
서버 API는 데이터베이스와 읽기-쓰기 상호작용을 수행합니다.
클라이언트 애플리케이션은 직원과 직무 역할 애플리케이션을 위한 사용자 인터페이스입니다.

학습할 내용

서버리스 MongoDB 인스턴스를 만드는 방법
Cloud Run 프로젝트 설정 방법
Google Cloud Run에서 웹 애플리케이션을 배포하는 방법
MEAN Stack 애플리케이션을 만들고 배포하는 방법

2. 요구사항

브라우저(Chrome 또는 Firefox 등)
Cloud Run 및 MongoDB Atlas 인스턴스가 포함된 Google Cloud Platform 프로젝트
다음 섹션에는 MEAN Stack 애플리케이션을 만드는 단계 목록이 나와 있습니다.

3. MongoDB 서버리스 인스턴스 및 데이터베이스 만들기

시작하려면 Google Cloud 기반 MongoDB Atlas로 시작하세요.

가입이 완료되면 '데이터베이스 구축' 링크를 클릭합니다. 버튼을 클릭하여 새 서버리스 인스턴스를 만듭니다. 다음 구성을 선택합니다.

서버리스 인스턴스가 프로비저닝되면 인스턴스가 실행되고 있는 것을 확인할 수 있습니다.

'연결'을 클릭합니다. 연결 IP 주소 및 데이터베이스 사용자를 추가하는 버튼
이 Codelab에서는 '모든 위치에서 액세스 허용'을 사용합니다. 설정을 변경합니다. MongoDB Atlas는 일련의 보안 및 액세스 기능을 제공합니다. 자세한 내용은 보안 기능 문서 문서에서 확인할 수 있습니다.
데이터베이스 사용자 이름과 비밀번호에 원하는 사용자 인증 정보를 사용합니다. 이 단계가 완료되면 다음과 같이 표시됩니다.

'연결 방법 선택'을 클릭하여 진행합니다. 버튼을 클릭하고 '애플리케이션 연결'을

표시된 연결 문자열을 복사하고 비밀번호를 자신의 비밀번호로 바꿉니다. 다음 섹션에서는 이 문자열을 사용하여 데이터베이스에 연결합니다.

4. Cloud Run 프로젝트 설정

먼저 Cloud 콘솔에 로그인하여 새 프로젝트를 만들거나 기존 프로젝트를 재사용합니다.
생성한 프로젝트의 프로젝트 ID 기억
아래는 새 프로젝트 페이지를 보여주는 이미지로, 생성할 때 프로젝트 ID를 볼 수 있습니다.

그런 다음 Cloud Shell에서 Cloud Run API를 사용 설정합니다.
Cloud 콘솔에서 Cloud Shell을 활성화합니다. 'Cloud Shell 활성화'를 클릭하기만 하면
Cloud Shell에 연결되면 인증이 완료되었고 프로젝트가 해당 프로젝트 ID로 이미 설정된 것을 확인할 수 있습니다. 어떤 이유로든 프로젝트가 설정되지 않았으면 다음 명령어를 실행하면 됩니다.

gcloud config set project PROJECT_ID

다음 명령어를 사용합니다.

gcloud services enable run.googleapis.com

코드 참조로는 Cloud Shell 및 Cloud Shell 편집기를 사용합니다. Cloud Shell 편집기에 액세스하려면 Cloud Shell 터미널에서 편집기 열기를 클릭합니다.

5. MEAN 스택 프로젝트 클론

직원 관리 웹 애플리케이션을 배포하겠습니다. REST API는 Express 및 Node.js로 빌드되었습니다. 웹 인터페이스를 Angular에서 사용하는 데이터는 앞서 만든 MongoDB Atlas 인스턴스에 저장됩니다.
Cloud Shell 터미널에서 다음 명령어를 실행하여 프로젝트 저장소를 클론합니다.

git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Express 및 Node.js REST API 배포

Docker 구성 파일

먼저 Express REST API용 Cloud Run 서비스를 배포합니다. 배포에서 가장 중요한 파일은 Docker 구성 파일입니다. 자세히 살펴보겠습니다.

mean-stack-example/server/Dockerfile

# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:17-slim
 
WORKDIR /usr/app
COPY ./ /usr/app
 
# Install dependencies and build the project.
RUN npm install
RUN npm run build
 
# Run the web service on container startup.
CMD ["node", "dist/server.js"]

구성이 Node.js를 설정하고 프로젝트를 복사 및 빌드합니다. 컨테이너가 시작되면 아래 명령어로 서비스가 시작됩니다.

node dist/server.js

새 Cloud Run 배포를 시작하려면 왼쪽 사이드바에서 Cloud Run 아이콘을 클릭합니다.

그런 다음 Deploy to Cloud Run(Cloud Run에 배포) 아이콘을 클릭합니다.

다음과 같이 서비스 구성을 작성합니다.
서비스 이름: node-express-api
배포 플랫폼: Cloud Run (완전 관리형)
리전: 데이터베이스 리전과 가까운 리전을 선택하여 지연 시간 줄이기
인증: 인증되지 않은 호출 허용
버전 설정에서 고급 설정 보기를 클릭하여 펼칩니다.
컨테이너 포트: 5200
환경 변수 다음 키-값 쌍을 추가하고 자체 MongoDB Atlas 배포를 위한 연결 문자열을 추가해야 합니다.

ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority

빌드 환경에서 Cloud Build를 선택합니다.
마지막으로 빌드 설정 섹션에서 다음을 선택합니다.
빌더: Docker
Docker: average-stack-example/server/Dockerfile
배포 버튼을 클릭한 다음 자세한 로그 표시를 클릭하여 첫 번째 Cloud Run 서비스의 배포를 확인합니다.
빌드가 완료되면 배포된 서비스의 URL이 표시됩니다.

URL을 열고 '/employees'를 추가합니다. 끝까지
현재 데이터베이스에는 문서가 없으므로 빈 배열이 표시됩니다.

몇 가지를 추가할 수 있도록 사용자 인터페이스를 배포해 보겠습니다.

7. Angular 웹 애플리케이션 배포

Angular 애플리케이션은 클라이언트 디렉터리에 있습니다. 배포를 위해 Nginx 서버와 Docker를 사용하겠습니다. 콘텐츠를 CDN (콘텐츠 전송 네트워크)에 직접 제공할 수 있으므로 Angular 애플리케이션 배포에 Firebase 호스팅을 사용하는 옵션도 있습니다.

구성 파일

구성 파일을 살펴보겠습니다.

mean-stack-example/client/nginx.conf

events{}
 
http {
   include /etc/nginx/mime.types;
   server {
       listen 8080;
       server_name 0.0.0.0;
       root /usr/share/nginx/html;
       index index.html;
 
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
}

Nginx 구성에서 기본 포트(8080)와 시작 파일(index.html)을 지정합니다.

mean-stack-example/client/Dockerfile

FROM node:17-slim AS build
 
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
 
# Install dependencies and copy them to the container
RUN npm install
COPY . .
 
# Build the Angular application for production
RUN npm run build --prod
 
# Configure the nginx web server
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/client /usr/share/nginx/html
 
# Run the web service on container startup.
CMD ["nginx", "-g", "daemon off;"]

Docker 구성에서 Node.js 종속 항목을 설치하고 프로젝트를 빌드합니다. 그런 다음 빌드된 파일을 컨테이너에 복사하고, 구성한 다음 Nginx 서비스를 시작합니다.
마지막으로, 클라이언트 애플리케이션에서 요청을 보낼 수 있도록 REST API에 대한 URL을 구성해야 합니다. 프로젝트에서 단일 파일의 URL만 사용하므로 URL을 하드코딩하겠습니다. 또는 환경 변수를 window 객체에 연결하여 거기에서 액세스할 수 있습니다.

mean-stack-example/client/src/app/employee.service.ts

...
@Injectable({
 providedIn: 'root'
})
export class EmployeeService {
 // Replace with the URL of your REST API
 private url = 'https://node-express-api-vsktparjta-uc.a.run.app'; 
...

Cloud Run에 배포할 준비가 되었습니다. 다음 구성 설정으로 새 배포를 시작합니다.
```
  - Service Settings: Create a service
```
서비스 이름: angular-web-app
배포 플랫폼: Cloud Run (완전 관리형)
인증: 인증되지 않은 호출 허용
빌드 환경에서 Cloud Build를 선택합니다.
마지막으로 빌드 설정 섹션에서 다음을 선택합니다.
빌더: Docker
Docker: average-stack-example/client/Dockerfile
Deploy(배포) 버튼을 다시 클릭하고 앱이 클라우드로 제공될 때의 로그를 확인합니다. 배포가 완료되면 클라이언트 앱의 URL이 표시됩니다.

URL을 열고 애플리케이션을 실행해 봅니다.

8. 삭제

이 게시물에서 사용한 리소스의 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 수행하세요.

MongoDB 인스턴스 종료

MongoDB 인스턴스 클러스터로 이동합니다.
클러스터, 만든 인스턴스 선택
클러스터 이름 옆에 있는 줄임표를 클릭하고 목록에서 '종료'를 선택합니다.

Cloud Run 배포 삭제

Google Cloud 콘솔의 Cloud Run 페이지로 이동합니다.
삭제할 Cloud Run 서비스를 선택합니다.
콘솔 상단의 삭제 아이콘을 클릭합니다.

9. 축하합니다

축하합니다. Cloud Run에서 MEAN Stack Web Application을 만들었습니다.