react + vite
-
CloudFront + S3 + ACM + Route53으로 프론트(Vite + React) 정적 파일 배포 하기클라우드 2025. 6. 14. 16:19
우선 도메인을 사둔게 있다고 가정하고 진행하겠습니다. 저는 가비아에서 구매했습니다.구현 순서는 다음과 같습니다.구현 순서구매한 도메인 Route53 호스팅 영역에 등록등록 후 ACM으로 버지니아 북부에서 인증서 요청S3로 프론트엔드 빌드 파일 정적 웹호스팅을 통해 배포CloudFront와 S3 연결해서 CloudFront 도메인으로 배포된 것 확인Route53에 도메인 등록하고 도메인으로 배포 되었는지 확인1. 구매한 도메인 Route53 호스팅 영역에 등록우선 콘솔에서 Route53에 들어가서 호스팅 영역을 생성합니다.저는 mycertione.com 이라는 도메인을 구매해서 다음과 같이 입력해 주었습니다.그냥 도메인 이름만 입력하고 호스팅 영역을 생성합니다. 그러면 NS와 SOA가 나오는데 NS는 네임..
-
React+Vite CI/CD with Infisical클라우드 2025. 5. 23. 20:59
그동안 열심히 해뒀던 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..
-
React+Vite nginx로 GCP VM(우분투)에 수동배포 하는 방법클라우드 2025. 5. 22. 22:18
우선 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 해서 가..