AWS

프론트 프로젝트 배포에 성공하여 안도하던 찰나, 큰일이 발생하였다. 우리는 사용자의 목소리를 분석하여 노래를 추천해주는 서비스를 구현해 보았는데, 이를 위해서는 목소리 녹음 기능이 필수적이였다. 우리는 사용자 PC에서 미디어의 스트림을 얻어내는 MediaStream의 API인 getUserMedia를 사용하였다. 문제는 이 기능이 로컬에서는 잘 동작하였는데, http로 배포한 주소에서는 오류가 발생하였다. 원인을 찾아보니 getUserMedia는 https에서만 동작한다는 설명이 있었다. 이를 해결하기 위해 백 프론트 모두 인스턴스에 https를 적용하기로 하였다. HTTP HTTP (HyperText Transfer Protocol)​​는 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있..

이전 포스팅에서 Docker와 AWS EC2를 활용하여 http 배포에 성공하였다. 그런데 만약 코드에서 수정사항을 배포된 주소에 반영하려면 다시 재배포 해야하는데, 이를 수동으로 하려면 생각만하도 너무 귀찮다. 이런 상황을 위해 Github Actions를 활용하여 CI/CD를 적용해보자. 최종 배포될 브랜치는 main 브랜치이므로 main 브랜치에 push가 감지되면 실행할 작업(Workflow)를 설정해야 한다. github 레포로 가서 루트 경로의 .github/workflows 위치에 yml 파일을 생성해준다. 나는 prod.yml 파일을 해당 경로에 생성해 주었다. name: Docker on: push: branches: [main] jobs: build: runs-on: ubuntu-lat..

이전 포스팅에서는 도커파일을 통해 도커 이미지를 생성한 후 Docker hub에 올리는 방법을 알아보았다. 이제 해당 이미지를 AWS EC2 에서 사용하기 위해 AWS에 접속 후 인스턴스를 생성해보자. ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) AWS에 접속한 뒤 인스턴스 시작을 클릭한다. 우선 인스턴스 이름을 입력해준다. 그리고 스크롤을 내리면 위와 같이 키 페어를 생성하는 항목이 나온다. 새 키 페어 생성을 누른 뒤 키 페어 이름을 입력하고 키 페어 유형은 RSA 그대로 냅둔다. 우리는 putty에 접속하여 인스턴스에 접근할 것이므로 키 파일 형식을 .ppk로 체크한 뒤 생성해준다. 다운로드 된 키 페어를 잘 저장해준다. 그 후 해당 페이지에서 인스..

졸업 프로젝트를 진행하며 플젝 배포 링크를 제출해야했다. 우리는 백과 프론트를 따로 배포하고 있어 그냥 vercel 같은 편리한 배포 사이트를 이용해도 되었지만, 복습할 겸 도커와 EC2 로 배포를 결정했다.(백 프론트 같이 배포할때를 대비하여 도커 적응은 필수...) ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) 우선 현재 프로젝트의 루트 경로에 도커파일을 작성해줘야 한다. 위와 같이 루트경로에 Dockerfile.prod 파일을 생성해 주었다. 내부 코드는 아래와 같다. FROM node:14 AS builder # set working directory WORKDIR /app # install app dependencies #copies package..