[javascript] 앵귤러와 클라우드 서비스 연동(AWS, Azure 등)

05 Dec 2023

javascript

앵귤러는 현대적이고 높은 생산성을 제공하는 프론트엔드 개발 프레임워크입니다. 앵귤러 애플리케이션에 클라우드 서비스를 연동하면 확장성과 안정성을 향상시킬 수 있습니다. AWS나 Azure와 같은 인기있는 클라우드 서비스와 앵귤러를 연동하는 방법을 알아보겠습니다.

AWS와 앵귤러 연동

AWS SDK 설치

AWS 서비스와 앵귤러를 연동하려면 AWS SDK를 설치해야 합니다. 아래의 명령어를 사용하여 AWS SDK를 설치합니다.

npm install aws-sdk

AWS 서비스와의 연동

AWS 서비스와의 연동을 위해서는 액세스 키와 비밀 키를 사용해야 합니다. 관리 콘솔에서 액세스 키와 비밀 키를 생성하고, 앵귤러 환경설정 파일에 해당 값을 추가합니다.

// environment.ts

export const environment = {
  production: false,
  awsAccessKeyId: 'YOUR_AWS_ACCESS_KEY',
  awsSecretAccessKey: 'YOUR_AWS_SECRET_KEY'
};

AWS S3와 앵귤러 연동

AWS S3는 파일 저장 및 관리를 위한 스토리지 서비스입니다. 앵귤러 애플리케이션에서 S3와 연동하여 파일을 업로드하거나 다운로드할 수 있습니다.

먼저, aws-sdk와 @aws-sdk/client-s3 패키지를 가져와서 사용합니다.

import { environment } from 'src/environments/environment';
import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';

const s3Client = new S3Client({
  region: 'YOUR_AWS_REGION',
  credentials: {
    accessKeyId: environment.awsAccessKeyId,
    secretAccessKey: environment.awsSecretAccessKey
  }
});

// 파일 업로드
const file = ...; // 업로드할 파일
const uploadParams = {
  Bucket: 'YOUR_S3_BUCKET_NAME',
  Key: 'YOUR_FILE_KEY',
  Body: file
};

const uploadCommand = new PutObjectCommand(uploadParams);
const uploadResult = await s3Client.send(uploadCommand);

// 파일 다운로드
const downloadParams = {
  Bucket: 'YOUR_S3_BUCKET_NAME',
  Key: 'YOUR_FILE_KEY'
};

const downloadCommand = new GetObjectCommand(downloadParams);
const downloadResponse = await s3Client.send(downloadCommand);
const downloadedFile = downloadResponse.Body;

AWS Lambda와 앵귤러 연동

AWS Lambda는 서버리스 컴퓨팅 서비스로, 앵귤러 애플리케이션과 통합하여 비즈니스 로직을 실행할 수 있습니다. Lambda 함수를 만들고 앵귤러와 연동하는 방법은 다음과 같습니다.

AWS Lambda 함수를 생성합니다. 알맞은 트리거 및 이벤트를 구성합니다.
앵귤러 프로젝트에서 AWS SDK를 설치합니다.
앵귤러에서 AWS SDK를 사용하여 Lambda 함수에 요청을 보냅니다.

import { environment } from 'src/environments/environment';
import { LambdaClient, InvokeCommand } from '@aws-sdk/client-lambda';

const lambdaClient = new LambdaClient({
  region: 'YOUR_AWS_REGION',
  credentials: {
    accessKeyId: environment.awsAccessKeyId,
    secretAccessKey: environment.awsSecretAccessKey
  }
});

const functionName = 'YOUR_LAMBDA_FUNCTION_NAME';
const payload = {
  // 요청에 필요한 데이터
};

const invokeParams = {
  FunctionName: functionName,
  Payload: JSON.stringify(payload)
};

const invokeCommand = new InvokeCommand(invokeParams);
const invokeResult = await lambdaClient.send(invokeCommand);

const response = JSON.parse(invokeResult.Payload.toString());

Azure와 앵귤러 연동

Azure SDK 설치

Azure 서비스와 앵귤러를 연동하기 위해 Azure SDK를 설치해야 합니다. 아래의 명령어를 사용하여 Azure SDK를 설치합니다.

npm install @azure/storage-blob

Azure Blob Storage와 앵귤러 연동

Azure Blob Storage는 파일 스토리지 서비스로, 앵귤러 애플리케이션에서 Blob Storage와 연동하여 파일을 업로드하거나 다운로드할 수 있습니다.

앵귤러에서 Azure Blob Storage와 연동하기 위해서는 먼저 연결 문자열(connection string)을 가져와야 합니다. 이 연결 문자열은 Azure Portal에서 Blob Storage 인스턴스를 생성한 후 얻을 수 있습니다.

import { BlobServiceClient } from '@azure/storage-blob';

const connectionString = 'YOUR_AZURE_CONNECTION_STRING';
const blobServiceClient = BlobServiceClient.fromConnectionString(connectionString);

// 파일 업로드
const containerName = 'YOUR_CONTAINER_NAME';
const containerClient = blobServiceClient.getContainerClient(containerName);

const fileName = 'YOUR_FILE_NAME';
const blobClient = containerClient.getBlockBlobClient(fileName);
const uploadResponse = await blobClient.upload(file, file.length);

// 파일 다운로드
const downloadResponse = await blobClient.download();
const downloadedFile = await blobToString(await downloadResponse.blobBody);

Azure Functions와 앵귤러 연동

Azure Functions는 서버리스 컴퓨팅 플랫폼으로, 앵귤러 애플리케이션과 통합하여 비즈니스 로직을 실행할 수 있습니다. Azure Functions를 생성하고 앵귤러와 연동하는 방법은 다음과 같습니다.

Azure Functions 앱을 생성합니다. 적절한 트리거 및 바인딩을 구성합니다.
앵귤러 프로젝트에서 Azure SDK를 설치합니다.
앵귤러에서 Azure SDK를 사용하여 Azure Functions에 HTTP 요청을 보냅니다.

import { HttpClient } from '@angular/common/http';

const functionName = 'YOUR_FUNCTION_NAME';
const httpOptions = {
  headers: {
    'Content-Type': 'application/json',
    // 필요한 헤더 정보 추가
  }
};
const payload = {
  // 요청에 필요한 데이터
};

this.http.post(`https://YOUR_FUNCTION_APP.azurewebsites.net/api/${functionName}`, payload, httpOptions)
  .subscribe(response => {
    // 응답 처리
  });

결론

앵귤러와 클라우드 서비스를 연동하여 애플리케이션의 성능과 확장성을 향상시킬 수 있습니다. AWS와 Azure와의 연동은 앵귤러 개발자들에게 다양한 가능성을 제공합니다. 자세한 내용은 AWS SDK 문서와 Azure SDK 문서를 참조하시기 바랍니다.