✅ 현재 실행 중인 컨테이너를 새로운 이미지로 생성/저장/로드하는 방법
실행 중인 컨테이너를 새로운 이미지로 커밋
docker commit jenkins jenkins-with-plugins:2.492.2
이미지 저장
docker save -o jenkins-with-plugins.tar jenkins-with-plugins:2.492.2
이미지 압축파일을 이미지로 로드
docker load -i jenkins-with-plugins.tar
AWS Secrets Manager와 AWS Systems Manager Parameter Store는 둘 다 애플리케이션의 구성 정보를 안전하게 저장하고 관리할 수 있도록 하는 서비스이지만, 주요 차이점이 있다.
| 항목 | AWS Secrets Manager | AWS Systems Manager Parameter Store |
|---|---|---|
| 주요 목적 | 데이터베이스 암호, API 키, 인증 정보 같은 민감한 보안 정보를 저장 및 자동 회전 | 애플리케이션 설정, 구성 값, 비밀번호 등 다양한 키-값 데이터 관리 |
| 자동 키 회전 | 지원 (RDS, DocumentDB, Redshift와 연계 가능) | 미지원 (수동으로 변경 필요) |
| IAM 권한 관리 | IAM 정책으로 세밀한 접근 제어 가능 | IAM 정책으로 접근 제어 가능하지만 보안 기능이 제한적 |
| 암호화 | AWS KMS 기본 지원 | 기본적으로 AWS KMS 사용 가능하지만 선택 사항 |
| 버전 관리 | 여러 버전의 보안 정보를 저장하고 롤백 가능 | 기본적으로 버전 관리 지원 |
| 비용 | 별도 비용 발생 (사용량 기준 과금) | 기본 기능은 무료, 고급 기능(고급 파라미터)은 유료 |
| 사용 사례 | AWS Secrets Manager | AWS Systems Manager Parameter Store |
|---|---|---|
| 데이터베이스 암호 관리 | ✅ | ⭕ (수동 관리) |
| API 키 및 인증 정보 저장 | ✅ | ✅ |
| 애플리케이션 구성 값 저장 | ⭕ (비효율적) | ✅ |
| 비밀번호 자동 회전 필요 | ✅ | ⭕ |
| 운영 환경에서 설정값 관리 | ⭕ | ✅ |
즉, 보안이 중요한 경우 Secrets Manager, 일반적인 설정 관리는 Parameter Store를 사용하는 것이 좋다. 🚀
웹 애플리케이션의 시스템 성능 개선과 트러블슈팅을 위한 일반적인 방법은 다음과 같다.
"헤드리스"라는 단어는 본래의 의미에서 "머리(Head)가 없는" 것을 가리킨다. 헤드리스 아키텍처에서 이 용어를 사용한 이유는, 전통적인 소프트웨어 아키텍처와 비교할 때 프론트엔드(사용자 인터페이스, 즉 '머리'에 해당하는 부분)가 백엔드와 분리되어 독립적으로 동작하기 때문이다.
"헤드리스"라는 용어는 백엔드가 특정 프론트엔드에 종속되지 않고, 다양한 프론트엔드로 확장 가능한 상태를 나타내기 위해 사용된다.
click 이벤트와 dblclick 이벤트를 사용하고, 클릭을 setTimeout으로 일정 시간 동안 지연시켜 더블클릭인지 단일 클릭인지 확인하는 방법을 사용한다.
JavaScript로 작성한 후 React 버전으로 수정 작성하였다.
setupDblClickHandler 함수는 더블 클릭 시 클릭 타이머를 정리하는 역할만 수행한다.
// handlers.js
const clickTimeouts = new WeakMap();
export function setupClickHandler(element, handleClick) {
element.addEventListener("click", function(event) {
clearTimeout(clickTimeouts.get(element)); // 기존 타이머 클리어
const timeout = setTimeout(function() {
handleClick(event);
}, 500); // 500ms 후에 클릭 이벤트로 처리
clickTimeouts.set(element, timeout); // 새로운 타이머 저장
});
}
export function setupDblClickHandler(element) {
element.addEventListener("dblclick", function() {
clearTimeout(clickTimeouts.get(element)); // 기존 타이머 클리어
});
}
// main.js
import { setupClickHandler, setupDblClickHandler } from './handlers.js';
document.addEventListener("DOMContentLoaded", function() {
// 예제 핸들러 함수
function exampleClickHandler(event) {
alert(`Single Click Detected on element: ${event.target.id}`);
}
// 요소를 동적으로 선택
var button1 = document.getElementById("myButton1");
var button2 = document.getElementById("myButton2");
// 동적 핸들러를 각 요소에 설정
setupClickHandler(button1, exampleClickHandler);
setupClickHandler(button2, exampleClickHandler);
setupDblClickHandler(button1);
setupDblClickHandler(button2);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Element and Handler</title>
</head>
<body>
<button id="myButton1">Click or Double Click Me</button>
<button id="myButton2">Another Button</button>
<script type="module" src="main.js"></script>
</body>
</html>
setupClickHandler: 클릭 이벤트가 발생하면 타이머를 설정하여 단일 클릭 이벤트를 처리한다.
handleClick 함수를 호출한다.setupDblClickHandler: 더블 클릭 이벤트가 발생하면 타이머를 정리한다.
exampleClickHandler: 단일 클릭 이벤트 핸들러로, 클릭된 요소의 ID를 alert 창에 표시한다.main.js를 type="module"로 포함하여 모듈 시스템을 사용한다.setupDblClickHandler 함수를 다시 확장해야 한다.WeakMap 지원을 확인해야 한다.React에서 setupClickHandler와 setupDblClickHandler 기능을 제공하는 방법으로, 커스텀 훅을 사용하여 단일 클릭과 더블 클릭을 구분하는 로직을 구현할 수 있다. 커스텀 훅은 재사용 가능한 로직을 추상화하고 컴포넌트에서 쉽게 사용할 수 있도록 도와준다.
아래는 useClickHandler라는 커스텀 훅을 작성하고 이를 React 컴포넌트에서 사용하는 예시이다.
useClickHandler 커스텀 훅 작성단일 클릭과 더블 클릭을 처리할 수 있는 useClickHandler 훅을 작성한다. 이 훅은 clickHandler를 인자로 받아서 클릭 이벤트와 더블 클릭 이벤트를 처리한다.
// hooks/useClickHandler.js
import { useRef, useEffect } from 'react';
export function useClickHandler(clickHandler) {
const clickTimeoutRef = useRef(null);
useEffect(() => {
// 타이머를 클리어하는 함수
const clearClickTimeout = () => {
if (clickTimeoutRef.current) {
clearTimeout(clickTimeoutRef.current);
clickTimeoutRef.current = null;
}
};
const handleClick = (event) => {
clearClickTimeout();
clickTimeoutRef.current = setTimeout(() => {
clickHandler(event);
}, 300); // 300ms 후에 클릭 이벤트로 처리
};
const handleDblClick = () => {
clearClickTimeout(); // 더블 클릭 시 타이머 클리어
};
return { handleClick, handleDblClick };
}, [clickHandler]);
return { handleClick, handleDblClick };
}
useClickHandler 훅을 사용하여 클릭 이벤트와 더블 클릭 이벤트를 처리하는 예제 컴포넌트를 작성한다.
// components/ClickHandlerComponent.js
import React from 'react';
import { useClickHandler } from '../hooks/useClickHandler';
export function ClickHandlerComponent() {
const { handleClick, handleDblClick } = useClickHandler((event) => {
alert(`Single Click Detected on element: ${event.target.id}`);
});
return (
<div>
<button
id="myButton1"
onClick={handleClick}
onDoubleClick={handleDblClick}
>
Click or Double Click Me
</button>
<button
id="myButton2"
onClick={handleClick}
onDoubleClick={handleDblClick}
>
Another Button
</button>
</div>
);
}
React 앱에서 ClickHandlerComponent를 사용.
// App.js
import React from 'react';
import { ClickHandlerComponent } from './components/ClickHandlerComponent';
function App() {
return (
<div className="App">
<h1>React Click and Double Click Handler</h1>
<ClickHandlerComponent />
</div>
);
}
export default App;
/project-root
├── /src
│ ├── /components
│ │ └── ClickHandlerComponent.js
│ ├── /hooks
│ │ └── useClickHandler.js
│ └── App.js
├── index.html
└── index.js
useClickHandler 훅:
clickTimeoutRef를 사용하여 클릭 타이머를 관리한다.handleClick과 handleDblClick 함수는 각각 클릭과 더블 클릭 이벤트를 처리한다.clearClickTimeout 함수는 타이머를 클리어하여 단일 클릭과 더블 클릭을 구분한다.useEffect는 clickHandler가 변경될 때마다 새로 등록된 핸들러를 업데이트 한다.ClickHandlerComponent 컴포넌트:
useClickHandler 훅을 사용하여 클릭 및 더블 클릭 핸들러를 생성한다.handleClick과 handleDblClick을 이벤트 핸들러로 설정한다.App 컴포넌트:
ClickHandlerComponent를 사용하여 버튼 클릭 이벤트를 처리합니다.useClickHandler 훅은 clickHandler가 변경될 때마다 타이머를 관리하도록 의존성을 설정한다.useRef로 관리되어 컴포넌트가 리렌더링되더라도 상태가 유지된다.React에서 이벤트 핸들러를 설정하고 단일 클릭과 더블 클릭을 구분하기 위해, Hook을 사용하여 상태를 관리할 수 있다. 아래 예시에서는 useEffect와 useRef를 사용하여 DOM 이벤트를 설정하고, useState를 사용하여 클릭 타이머 상태를 관리한다.
먼저, 클릭과 더블 클릭 핸들러를 설정하는 Custom Hook을 정의한다.
// useClickHandler.js
import { useEffect, useRef } from 'react';
const useClickHandler = (elementRef, handleClick) => {
const clickTimeoutRef = useRef(null);
useEffect(() => {
const element = elementRef.current;
const handleSingleClick = (event) => {
clearTimeout(clickTimeoutRef.current);
clickTimeoutRef.current = setTimeout(() => {
handleClick(event);
}, 300); // 300ms 후에 클릭 이벤트로 처리
};
const handleDoubleClick = (event) => {
clearTimeout(clickTimeoutRef.current); // 더블 클릭 시 타이머 클리어
};
if (element) {
element.addEventListener('click', handleSingleClick);
element.addEventListener('dblclick', handleDoubleClick);
}
// Cleanup 이벤트 리스너
return () => {
if (element) {
element.removeEventListener('click', handleSingleClick);
element.removeEventListener('dblclick', handleDoubleClick);
}
};
}, [elementRef, handleClick]);
};
export default useClickHandler;
Custom Hook을 사용하여 단일 클릭 이벤트 핸들러를 설정하는 컴포넌트를 작성한다.
// MyComponent.js
import React, { useRef } from 'react';
import useClickHandler from './useClickHandler';
const MyComponent = () => {
const buttonRef1 = useRef(null);
const buttonRef2 = useRef(null);
const handleClick = (event) => {
alert(`Single Click Detected on element: ${event.target.id}`);
};
useClickHandler(buttonRef1, handleClick);
useClickHandler(buttonRef2, handleClick);
return (
<div>
<button id="myButton1" ref={buttonRef1}>Click or Double Click Me</button>
<button id="myButton2" ref={buttonRef2}>Another Button</button>
</div>
);
};
export default MyComponent;
useClickHandler는 elementRef와 handleClick을 인자로 받는다.clickTimeoutRef는 useRef를 사용하여 클릭 타이머를 저장한다.useEffect를 사용하여 컴포넌트가 마운트될 때 이벤트 리스너를 설정하고 언마운트될 때 정리한다.handleSingleClick과 더블 클릭 시 타이머를 정리하는 handleDoubleClick을 정의한다.buttonRef1과 buttonRef2는 각각 두 버튼의 참조를 저장한다.handleClick은 단일 클릭 이벤트 핸들러로, 클릭된 요소의 id를 alert로 표시한다.useClickHandler를 사용하여 각 버튼에 대해 클릭 핸들러를 설정한다.ref 속성을 설정하여 DOM 요소를 참조할 수 있게 한다./src
/components
MyComponent.js
/hooks
useClickHandler.js
index.js
애플리케이션의 진입점으로, MyComponent를 렌더링.
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './components/MyComponent';
ReactDOM.render(
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
document.getElementById('root')
);docker-compose 명령을 사용하여 특정 서비스의 최신 이미지를 강제로 pull 한 후 재실행하려면 docker-compose pull 명령과 docker-compose up 명령을 결합하여 사용할 수 있다.
ECR 로그인
aws ecr get-login-password --region <region> | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.<region>.amazonaws.com
이미지 Pull
docker-compose pull 명령을 사용하여 최신 이미지를 pull 한다. 특정 서비스만 pull 할 수 있다:
docker-compose pull app
서비스 재실행
docker-compose up 명령을 사용하여 특정 서비스를 재실행:
docker-compose up -d app
두 명령을 한 번에 실행:
docker-compose pull app && docker-compose up -d app
위의 명령을 쉘 스크립트로 만들어 사용하면 더 편리하게 사용할 수 있다.
#!/bin/bash
# ECR 로그인
aws ecr get-login-password --region <region> | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.<region>.amazonaws.com
# 최신 이미지 pull
docker-compose pull app
# 서비스 재실행
docker-compose up -d app
실 운영환경으로 구성하기 위하여 백엔드 서비스에 ALB와 오토스케일링 그룹까지 생성하였다.
처음 생각한 백엔드 서비스 구성은 ALB + Fargate + ECS + ECR 이었지만 프리티어를 사용해야 하기 때문에 Fargate는 포기함.
NextJS로 구현한 프런트 사이트도 정상적으로 동작하였고 프런트에서 백엔드 API도 정상적으로 호출되어 서비스는 문제없이 구축되었다.
AWS 루트 계정의 과금 정보 및 비용 관리 홈으로 이동 후 프리 티어를 확인하였다.
사용 중인 프리 티어 목록을 확인할 수 있다.
청구 예정 금액은 청구서로 이동하여 확인 가능하다.
며칠 서비스 운영 후 청구서를 확인해 보니 과금이 발생하고 있었다.
Virtual Private Cloud (VPC)
정확히는 VPC에서 사용되는 Public IPv4 Addresses 에 대하여 과금이 발생하였다.
프리 티어로 사용되는 시간만큼 합산하여 무료가 될 것으로 생각하였으나 과금 체계는 다른 것으로 보인다.
2번으로 과금되는 서비스가 무엇일까?
EC2 > 네트워크 및 보안 > 네트워크 인터페이스 로 이동하여 목록을 확인해 보니 퍼블릭 IPv4 주소가 3개가 생성되어 있었다.
EC2 인스턴스에서 1개, ALB에 연결된 VPC의 서브넷 2개에서 각각 1개 생성하여 총 3개의 퍼블릭 IP가 생성됨.
EC2의 파이썬 도커에서 외부 공공 API를 호출해야 하기 때문에 EC2에서는 퍼블릭 IP가 필요하였다.
결국 ALB를 삭제하고 프런트 엔드에서 호출하는 백엔드 API의 도메인은 ALB 대신 EC2의 도메인으로 변경하여 다시 배포하였다.
ALB 대신 NLB 사용하여 서브넷을 하나만 사용하도록 하여 LB용 퍼블릭 IP를 1개만 생성하도록 하면 EC2 1개 NLB 1개 사용으로 2개 모두 프리 티어 대상이 될 수도 있을 듯 하다. (구성 후 확인은 하지 않았다)
안녕하세요, AWS 고객지원팀입니다.
프리 티어 사용 중 발생한 VPC 요금과 관련하여 문의해 주신 것으로 이해하였습니다.
답변에 앞서, 2024년 2월 1일자로 서비스 연결 여부에 관계없이 모든 퍼블릭 IPv4 주소에 대해 시간당 IP당 0.005 USD의 요금이 부과되는 점 참고해 주시기 바랍니다. IPv4 주소 요금과 관련한 자세한 내용은 다음 링크에서 확인할 수 있습니다:
https://aws.amazon.com/ko/blogs/korea/new-aws-public-ipv4-address-charge-public-ip-insights/
Elastic Compute Cloud 인스턴스와 연결된 IPv4 주소의 경우, 1년간의 프리 티어 사용량에 해당하여 비용이 발생하고 있지 않습니다. 다만, EC2 외 서비스의 퍼블릭 IPv4 주소에 대해서는 프리 티어 사용량에 해당하지 않아 비용이 발생하고 있습니다.
문의하신 VPC 요금을 중단하기 위해서는 VPC에서 요청자 관리형 네트워크 인터페이스를 생성한 모든 리소스를 종료하거나 삭제해야 합니다. 예를 들어 퍼블릭 IPv4를 사용하는 Application Load Balancer(ALB)를 종료하고 NAT 게이트웨이, 전송 게이트웨이 VPC 연결 및 인터페이스 VPC 엔드포인트를 삭제해야 하는 점 참고해 주시기 바랍니다.
