성준이의 개발블로그 성준이의 개발블로그

목표 아키텍처사용 비용 요약표서비스사용 항목 / 조건월 예상 비용비고S3스토리지 100GB + 요청 110만건 + Select 110GB$3.53Standard, PUT/GET/Select 포함CloudFront300GB 사용자 전송 / 오리진 30GB$1.80캐시 미스율 10%, 아태 리전VPC Peering리전 내 30GB + 아웃바운드 300GB$38.40Spring→AI 통신 포함OpenVPN2명 동시접속, 9~18시 EC2$0.00Free Tier, AMI 포함 2명 무료CodeDeployEC2 배포 (온프레미스 없음)$0.00무료ECR500MB 미만 이미지 1개$0.00리전 내 EC2 Pull, 스프링 전용Route531개 퍼블릭 호스팅 존 + 15만 DNS 요청$0.50쿼리 100만건 프리 ..

구축할 아키텍처현재 구축할 아키텍처는 다음과 같은데요, 구성하기전에 2달에 100만원인 예산에 맞춰서 해야하기 때문에, 먼저 사용자 1000명을 기준으로 AWS calculator로 비용을 대략 계산해 보았습니다. 사용 비용 요약표서비스월 예상 비용 (USD)사용 스펙 요약입니다.S33.53100GB 저장, 100K PUT, 1M GET, S3 SelectCloudFront1.80300GB 전송(캐시 미스 10%), 300K 요청Transit Gateway153.96VPC Attachment 3개, 31.5GB 트래픽OpenVPN0.00EC2 t2.micro, 하루 9시간 (2유저 무료)CodeDeploy0.00온프레미스 미사용 → 무료ECR0.00Spring 이미지 Route530.50퍼블릭 호스팅 존..

문제 상황원래 SpringBoot의 resoureces/static 파일 아래에 React build 결과 나온 파일을 넣어 통합 배포를 하고 있었습니다.이때는 Swagger가 잘 나와서 문제가 없었는데 nginx를 통한 통합 배포를 하며 오류가 발생했습니다.현재 상황은Nginx에 프론트 빌드 파일을 올려 배포하고 nginx의 proxy_pass 설정을 통해 같은 인스턴스의 SpringBoot로 /api 요청이 들어오면 http://localhost:8080/api 로 보내주는 설정을 해두고 있었습니다.location /api/ { proxy_pass ; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-..

문제 상황S3 Public으로 열어두고 특정 도메인에서만 접근이 가능하게 설정을 해두다가, CloudFront를 붙여 CloudFront에 캐시된 이미지만 불러오게 하려고 했습니다. 그래서 DB에 저장되어 있는 이미지 URL을 S3주소에서 CloudFront 주소로 수정해줬습니다. 그랬더니 이미지가 어떤 거는 보이고 어떤 거는 안보이는 문제가 발생했습니다.문제 원인브라우저 콘솔 상에 오류 내용을 확인해보니 CORS 에러가 나오고 있었습니다. 분명 S3에 CORS 설정을 해두었는데 왜 안되지? 싶었습니다.해결 과정그래서 S3 - 권한 - CORS 설정에 들어가보니 잘 구축되어 있었습니다. 그래서 CloudFront도 CORS 설정을 해두어야 이미지가 잘 나오겠다 싶어서 CloudFront에도 CORS 설정..

그동안 열심히 해뒀던 Infisical에 환경변수 통합 저장과 React+Vite nginx로 수동배포하는 걸 합쳐서Infisical로 React+Vite 프로젝트 CI/CD 파이프라인을 구축해보겠습니다.CI/CD 파이프라인의 순서는 다음과 같습니다. 우선 CI 파이프라인의 순서입니다.pull_request가 올라왔을 때, 파이프라인이 돌게 한다.레포지토리에서 소스코드를 가져온다.Infisical CLI를 설치한다.Infisical에서 환경변수를 가져온다.호환되는 Node 버전을 설정한다.의존성을 설치한다.환경변수를 담아 React를 빌드하고 결과물을 dist 경로에 올린다. 그다음 CD 파이프라인의 순서입니다.dist 경로에 있는 빌드 결과물을 다운로드 받는다.키를 저장하고 VM의 IP를 known_h..

우선 Github에 프론트엔드 소스코드가 있는 것을 전제로 하고 가겠습니다.우선 VM을 준비합니다. GCP에서 VM을 생성 하고 SSH로 접근합니다.그리고 git과 npm을 설치합니다.sudo apt updatesudo apt install git -y저희는 node버전 v23.11.0, npm 버전 v11.3.0이 필요하기 때문에 nvm을 설치해줍니다.curl -o- | bashsource ~/.bashrc설치한 이후nvm install 23.11.0으로 23.11.0의 노드 버전을 깔아줍니다.근데 npm 버전이 11.3.0으로 안깔려서 다음명령어를 통해 11.3.0 버전을 깔아주었습니다.npm install -g npm@11.3.0이제 준비는 다 되었습니다.프론트엔드 레포지토리를 clone 해서 가..

발생 배경이 오류가 발생했던 상황은dev의 최신 변경사항은 5월 5일인데 작업하려는 기능 브랜치의 마지막 작업일자는 4월 28일이였습니다.작업하기 전에 dev의 변경사항을 기능 브랜치에 반영하고 작업하기 위해 git pull origin dev 명령어를 입력했을 때 발생했습니다.발생 이유git pull 명령어는 기본적으로 fast-forward 방식으로 merge 되는데 dev에 변경사항이 있었기 때문에 발생한 것이였습니다.fast-forward 방식을 그림으로 나타내면 다음과 같습니다.현재 제 상황은 그림에서 develop이 feature이고, main이 dev입니다.그림을 보면 HEAD가 B → Y로 이동하였습니다.쉽게 설명하면 main에 변경사항이 없을 경우 dev보고 “너가 이제부터 main이야”..

프로젝트에서 Project 들어가서 Project Settings를 클릭하면 다음과 같은 화면이 나옵니다.여기에서 SLUG가 중요합니다. 이게 나중에 CLI 명령어 칠때 환경을 구분하는 태그 같은 것 입니다.GPT한테 물어보니"Slug"는 주로 URL에서 사용되는 짧고 사람이 읽을 수 있는 문자열을 의미합니다. 보통 특정 콘텐츠의 제목을 URL-friendly하게 만든 것이에요. 라고 합니다.이렇게 환경을 설정해두고사용하는 환경변수를 넣습니다.그 후 프로젝트로 이동하여 다음 명령어를 통해 infisical을 설치합니다.npm install -g @infisical/cli그리고 로그인 합니다.infisical login그리고 Self-hosted 선택하고Domain 입력하라 할때 http:// 입력을 하면..