Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 3탄 - CI / CD 및 CORS 이슈 해결

Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 3탄 - CI / CD 및 CORS 이슈 해결

CI / CD란 무엇일까?Continuous Integration은 영역별로 나눠서 개발할 때, 인터페이스 등의 충돌을 미리 발견하기 위해 매일 또는 매시간 저장소를 자동으로 빌드하는 개념이다. Continuous Delivery는 저장소 코드의 변경이 발생하면 개발 서버 또는 운영계에 자동으로 배포하는 작업이다. CI/CD 파이프라인의 구성요소버전 관리 시스템: 코드 저장소Git: 소스 코드를 관리하고 변경 사항을 추적하는 분산 버전 관리 시스템CI 서버: 코드 변경 사항을 자동으로 빌드하고 테스트하는 서버 Jenkins: 오픈 소스 자동화 서버. (다양한 플러그인을 통해 빌드, 테스트, 배포 파이프라인을 구성할 수 있음)Travis CI: Github 프로젝트와 통합하여 빌드, 테스트, 배포를 자동화..

  • format_list_bulleted 프론트엔드 개발/개발환경
  • · 2024. 6. 17.
  • textsms
Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 2탄

Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 2탄

이제는 도메인 주소를 구입하고, 이 도메인 주소를 EC2 인스턴스와 연결을 시켜보도록 해보자 1. 도메인 주소 구입하기Route 53 서비스로 이동해서 좌측의 "등록된 도메인"을 눌러서 이동해보면 아래와 같은 화면이 뜬다. 여기서 도메인 등록 버튼을 눌러서 원하는 도메인을 만들자 (돈은 일년에 $14 정도 든다고 나온다) 도메인을 구입하면 "진행 중" 상태가 뜨는 것을 볼 수 있다. 이메일 인증을 마치고 1시간 정도 기다리게 되면 상태가 성공으로 바뀌는 것을 볼 수 있다.이제 구입한 도메인과 우리의 EC2 인스턴스를 연결할 때가 온 것이다.2. 도메인 주소와 EC2 인스턴스와 연결 좌측의 "호스팅 영역"에 들어가게 되면 아래와 같은 화면이 생성된다. 여기서 호스팅 영역 이름을 클릭하게  되면 다음과 같은..

  • format_list_bulleted 프론트엔드 개발/개발환경
  • · 2024. 6. 14.
  • textsms
Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 1탄

Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 1탄

1. EC2 서버 인스턴스를 생성인스턴스 이미지: Amazon Linux 2 AMI (HVM), 64bit(x86) 을 선택인스턴스 타입: t2.micro 타입을 선택 스토리지 사이즈: 최대 30GB까지는 무료HTTPS와 HTTP를 지원하도록 보안 설정Key를 발급받기 (키는 다시 재발급이 안되므로 잘 관리해야 한다)mkdir ~/keysmv ~/Downloads/backfront.pem ~/keyschmod 400 ~/Documents/keys/ci-cd-study.pem`mv ` : 파일을 특정 디렉토리에 옮기는 명령어`chmod `: 리눅스와 유닉스 계열 운영체제에서 파일 시스템 객체(파일, 디렉토리 등)의 접근 권한을 설정하는 명령어 chmod (changemode) 옵션은 숫자 또는 기호를 ..

  • format_list_bulleted 프론트엔드 개발/개발환경
  • · 2024. 6. 13.
  • textsms
졸업작품 진행 상황 3 - 험난한 배포와 CI/CD

졸업작품 진행 상황 3 - 험난한 배포와 CI/CD

항해가 끝나고나서 졸업 작품의 늪에 빠지게 되었습니다. 방금까지 CI / CD 파이프라인 구축에 애를 먹고 있었습니다.배포 환경은 AWS EC2 이고, CI / CD 파이프라인을 구축하기 위해 Github Action을 사용했습니다. 또한, 배포 시에 도커를 활용하여 이미지를 만들고, 띄우도록 구축했습니다. 도커를 사용해보고 싶다라는 생각만 하고 실제로 써본 적이 없었는데 이를 한 번 써보면서 익혀야겠다는 생각으로 실습을 진행했습니다. EC2 환경에서 인스턴스를 생성하고, 인스턴스 내부에서 docker와 mongoDB 등을 설치하였고, self-hosted를 생성하여 CI/CD 작업을 진행했습니다. 이 과정에서 2일을 날린 에러를 발견했으니 Docker 관련 문제와, mongoDB를 Atlas를 사용하여..

  • format_list_bulleted 카테고리 없음
  • · 2024. 5. 23.
  • textsms
항해 플러스 프론트엔드 솔직 후기

항해 플러스 프론트엔드 솔직 후기

저는 현재 서울 소재의 대학교에 4학년으로 재학 중인 학생입니다. 저는 인공지능/빅데이터와 관련된 학과를 다니고 있지만 공부를 하다보니 웹 개발에 가장 큰 흥미를 느끼게 되어 프론트엔드 개발자를 꿈꾸며 열심히 공부를 하고 있습니다.    현재 연구실의 개발 인턴으로 실무와 유사한 환경에서 개발을 진행 중에 있지만 저를 적극적으로 매니징할 수 있는 분이 없었기에 조금 느리게 성장을 하고 있었다고 생각을 하였습니다. 느리게 성장하고 있다는 생각은 저를 불안하게 했습니다. 개발에 대해 이야기를 할 수 있는 동료가 있었으면 좋겠다고 생각을 하며 여러 부트캠프를 찾아보고 있던 시점에서, 우연히 인스타그램 스토리의 항해 플러스 프론트엔드 1기가 열렸다는 소식을 듣고 관심을 갖게 되었습니다. 하지만 2가지가 걸렸습니..

  • format_list_bulleted Life/회고
  • · 2024. 5. 18.
  • textsms

[Deep Dive] React Server Component를 정확히 아시나요? - 1편

계속해서 React Server Component를 딥다이브하다보니 RSC를 직접 구현하는 방식에 대해서 알려주는 영상들이 몇몇이 있었습니다. Next.js가 내부적으로 해주는 일들과 비슷하게 구현할 수 있도록 되어 있었으며, 이를 통해 RSC에 대해 좀 더 자세히 이해할 수 있게 되었습니다. Zustand의 메인테이너이신 DAISHI KATO님께서 React Server Component에서 중요하게 생각하는 것은 Serialization(직렬화)라고 합니다. RSC 전에는 리액트는 하나의 메모리 공간에서 동작했지만 RSC가 나오게 되면서 리액트는 여러 공간에서 사용가능해졌다고 합니다. (server와 client, 브라우저의 워커쓰레드까지...)실습실습을 통해 설명을 해보도록 하겠습니다.`npm i ..

  • format_list_bulleted 프론트엔드 개발/React
  • · 2024. 5. 8.
  • textsms