aws (8) 썸네일형 리스트형 Next.js + React를 AWS EC2로 배포하기(2) - 어플리케이션 무중단 배포 저번 포스트에서 EC2 Instance 생성 및 내 컴퓨터에서 접근까지 해보았다! 이번 포스트에서 내 터미널에서 접근한 EC2 Instance에 React 어플리케이션 무중단 배포를 정리해볼까 한다. Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 React 어플리케이션 무중단 배포 1. 내 프로젝트 clone 받기 배포 할 프로젝트를 클론받자. 2. Clone 받은 폴더로 이동 후, yarn(or npm)을 설치 를 하려하니 에러가 뜬다 🥲 우분투 내에서 yarn을 설치 할 경우에 Node가 다운되어 있지 않아 오류가 발생한다. Node부터 설치해보자. 3. nodejs 설치 아래의 명령어로 Node를 설치하자 $ sudo apt-get update $ sudo a.. Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 이전에 CSR을 이용하는 React 어플리케이션은 AWS Cloudfront + S3를 통해 배포했다. 이번에 새롭게 SSR을 도입한 React 어플리케이션은 AWS EC2를 통해 배포해볼까 한다. 순서는 다음과 같다. 1. EC2 인스턴스 생성 2. React 어플리케이션 배포 EC2 인스턴스 생성 1. AWS EC2 로그인 후 인스턴스 시작 클릭 2. Amazone Machine Image (AMI)선택 AMI란 소프트웨어 OS, 애플리케이션 서버, 소프트웨어 환경설정 등이 포함된 템플릿(이미지)이다. (어떤 점에서 이미지라는 건지는 공부가 더 필요하다! ) 가상 머신를 운영하는 데에 필요하며, AWS EC2의 경우 AMI는 서버를 이미지 파일로 만든 것이다. 나는 Ubuntu Server 18.04.. React 앱을 S3+CloudFront로 배포하기(3) - 도메인 연결 React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 앞서 S3 + CloudFront로 React 앱을 연결하는 방법을 알아봤다. 지금 우리는 클라우드 프론트 url을 통해 서비스에 접근할 수 있다. 하지만 우리는 서비스에 접근할 때 서비스 url을 검색하여 서비스를 찾아간다. 따라서 지금부터는 가비아에서 도메인을 구입하여 cloudfront와 연결할 예정이다. 이 연결이 완료되면 서비스 주소를 검색하여 서비스에 접근할 수 있다! 1. 가비아에서 원하는 도메인 구입하기 현재 백신중앙정보원이라는 백신 접종 후기를 공유하는 프로젝트를 하고 있다. 따라서 vaccine-review.com 이라.. Gzip 적용하기 (Cloudfront) gzip이란? gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. 서버에서 html, javascript, css 등을 압축해줘서 리소스를 받는 로딩시간을 줄여주어서 성능을 개선시켜준다. 프론트 성능 개선을 위해 많이 쓰이고, 요즘 대부분의 브라우저들은 gzip압축을 지원한다. gzip의 동작원리 Gzip압축을 지원하게 되면 브라우저는 서버에게 Accept-Encoding이라는 헤더를 통해서 ‘나 Gzip지원한다’라고 알려준다. Accept-Encoding:gzip 그러면 웹서버는 이 요청을 받고 Gzip을 지원할 응답헤더에 Content-Encoding으로 ‘이건 Gzip을 지원해’라는 헤더를 넣어서 보내주게 된다. Content-Encoding:gzip Cloudfront gzip 적용방법 1. cl.. CloudFront CloudFront란? CloudFront란 AWS에서 제공하는 CDN서비스이다. 정적, 동적, 실시간 웹서비스 콘텐츠를 사용자에게 더 빨리 전달하도록 지원한다. CloudFront는 Edge location을 사용한다. Edge location이란 컨텐츠들이 Cache에 보관되어지는 장소이다. 전세계 각 지역마다 설치되어 있어서 사용자가 어떤 컨텐츠를 요청하면 캐시에 보관된 내용을 사용자에게 뿌려주는 기능을 하는 서버이다. 어떤 웹사이트에 처음 접속시에는 원래 컨텐츠가 들어있는(웹서버 호스팅이 되어지는 곳) Origin에서 컨텐츠를 가져오고 Edge location에 캐싱한다. 그 이후 유저가 똑같은 컨텐츠를 요청하면 그때는 Origin까지 가지 않고 Edge location에서 데이터들을 가져오게 된.. S3 S3란? Simple Storage Service(S3)는 AWS에서 제공하는 인터넷 스토리지 서비스이다. 말 그대로 Storage이다. 하나의 버킷에 데이터들을 업로드하면, 인터넷을 통해 어디서든 해당 파일을 다운로드 할 수 있다. S3 기본 개념 객체(Object) 파일과 메타데이터를 구성하는 저장단위이다. 객체 하나의 크기는 1Byte부터 5TB까지 허용되며 메타데이터는 MIME 형식으로 파일 확장자를 통해 자동으로 설정되며 사용자 임의로도 지정 가능하다. 버킷(Bucket) S3에서 생성할 수 있는 최상위 디렉토리의 개념이다. 객체를 저장하고 관리한다. 계정별로 100개까지 생성 가능하며 버킷에 저장할 수 있는 객체 수와 용량은 무제한이다. S3 특징 1. S3의 버킷은 무한대의 객체를 저장할 수.. React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 자 지금부터는 앞에서 설정한 S3에 유저가 접근할 수 있도록 CloudFront 설정을 할 것이다. 그런데 왜 이렇게 할까? S3 설정 시 모든 엑세스 차단을 비활성화하면 어떤 사람이던지 간에 내 S3 객체에 대해서 설정, 수정 권한을 가지게 되므로 상당히 위험하다. (사실 왜 위험한지에 대해서는 더 공부가 필요하다,,,ㅎㅎ) 그런데 지금처럼 모든 엑세스 차단을 활성화하면 사용자가 웹서비스에 접근(객체를 Get)하지 못한다. 그럼 웹서비스를 어느 누구도 사용할 수가 없다 하하하하하 따라서 우리는 AWS에서 제공하는 CDN 서비스인 CloudFront를 통해서 더 좋은 성능과 안전성을 가진 애플리케이션을 유저에게 전달해주고자 한다. 이렇게 설정하게 되면 앞서 생성한 S3 bucket에는 곧 생성할 Clou.. React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 지금부터 S3와 CloudFront로 React application을 배포했던 과정을 정리해볼까 한다. 순서는 다음과 같다. S3 Bucket 생성 CloudFront 설정 도메인 구입하여 설정 S3 Bucket 생성하기 1. S3 버킷 생성하기 AWS S3 console로 들어간다. 버킷 만들기로 들어가서 원하는 버킷 이름과 AWS Region을 설정하면 된다. 2. 모든 퍼블릭 액세스 차단 유지 클라우드 프론트를 통해 유저들의 접근을 허용할 예정이다. 모든 퍼블릭 액세스 차단을 유지하자. 3. 버킷 만들기 클릭 4. 생성된 버킷의 속성 탭 들어가서 정적 웹 사이트 호스팅 편집 클릭 5. 호스팅 편집하기 정적 웹 사이트 호스팅 -> 활성화 호스팅 유형 -> 정적 웹 사이트 호스팅 인덱스 문서 -> i.. 이전 1 다음
