React 웹 정적 호스팅 하기 1 - AWS에 올리자

리액트로 자신의 개발 환경에서 무엇인가 열심히 만들었다면 퍼블릭하게 사용할 수 있도록 하기위해서 호스팅이 필요합니다. 조금더 설명하면 웹은 외부에서 접속하게 만들 수도, 안되게 만들 수도 있습니다. 다만 직접 만든 웹사이트를 서비스로 외부에서 누군가 접속하고, 가입하고 로그인하게 한 뒤 이용하게 할려면 반드시 외부에서 접속하도록 하는게 필요하겠죠? 따라서 어딘가에 호스팅이 필요합니다. 리액트라는 웹은 뷰를 가진 클라이언트로, 클라이언트가 접속하는 별도의 서버를 통해 데이터 CRUD하고 이를 표현해주는 역할이 강합니다.(물론 다양한 역할이 더 있음). 조금 제너럴한 관점에서 리액트 웹을 개발했다고 가정하고 이를 누군가가 접속할 수 있게 하기 위한 방법에 대해서 기술설명하도록 하겠습니다.. 당연히 가입과 로그인, 로그아웃의 피쳐는 가지고 있다고 가정하고 서버는 AWS라는 대중화된 서버를 이용하여 가장 빠르고 쉽게 호스팅하는 방법을 설명합니다.

호스팅하는 방법

여러가지 방법이 있는데, AWS를 이용해서 호스팅할 수 있는 방법은 아래의 방법정도로 바로 떠오릅니다.

1. EC2 인스턴스 생성하여 웹을 실행시키고 해당 인스턴스를 외부에서 접속할 수 있도록 설정한다.
2. Lightsail을 이용해서 웹을 구동하기 위한 인프라가 세팅된 패키지를 선택하고 그에 맞게 웹을 개발하고 호스팅한다.
3. AWS Fargate를 이용해 웹을 구동가능한 Container를 받아서 웹을 개발하고 배포한다.
4. S3를 이용한 정적호스팅을 하고 퍼블릭 오픈 설정을 한다.

 

아마도 제가 아는 방법 외에도 더 많은 방법이 있을 수 있습니다. 실제로, 1,2,4번은 제가 실제로 해봤던 방법이고, 3번은 해보진 않았지만 AWS 관련 공부를 하면서 알게된 방법입니다. 각각의 장단점이 있습니다. AWS Solution Architect의 시험에도 단골로 출제되는 문제의 유형인데, 여러가지 방법이 있지만, Least operational overhead 또는 Cost Effective 또는 Performance를 고려한 선택지에서 대해서 가장 요구사항을 만족하는 답안을 고르라는 식의 질문인데요. 저 역시 어떠한 웹을 어떤식으로 접속가능하게 해야하냐 등의 요구사항과 확장성을 고려해서 설계가 필요합니다. 

PoC 단계에서는 개발에 용이한 방법으로 선택을 해서 진행하면 되겠지만, 서비스로 프로덕션 레벨로 간다고 가정했을 때 고민해야할 팩터는 3가지 정도로 생각됩니다.

보안, 트래픽, 비용 

 

3가지 다 중요한 요소라 어느 한가지만 초점을 둘 수 없지만 아키텍트라면 가장 합리적인 선택이 필요합니다. 좋은 아키텍쳐라는 선택은 더 나쁜 것을 선택한다는 말이 있듯이 어떤 선택을 하던지 모두다 완벽하기는 쉽지 않습니다. 저는 이번에 비용 최소화의 목적이며 운영의 오버헤드를 최소한으로 해서 비용적으로 가장 최소화 할 수 있는 방법으로 하고자 합니다. 그리고 지금 개발해논 웹 개발 프레임 워크는 리액트이기 때문에 4번 방법으로 호스팅을 진행하도록 하겠습니다. 비용과 운영상의 오버헤드를 가장 줄이는 방법으로 2번 Lightsail을 선택할 수 도 있지만, Lamp 스택이나, 워드프레스등 고정된 웹 개발 스택을 사용해야하는지라 개발자가 운영까지 다 하려면 자신이 가장 잘 개발할 수 있는 방법으로 진행해야 하겠지요.

Amazon Simple Storage Service(S3)

S3라는 용어는 Simple Storage Service의 약자입니다. 아마존의 대표적인 스토리지 서비스인 S3는 2006년에 소개됬으며, 객체 스토리이자 아마존의 주요 서비스를 연결하는 핵심 요소입니다. 전 세계 어디에서나 대규모 데이터를 저장하고 인출할 수 있는 인터페이스를 제공합니다. S3의 저장 용량은 무제한이며, 99.9%에 이르는 고신뢰성을 제공합니다. 이는 연평균 0.0000000001%의 객체 데이터가 손실될 확률 수준을 의미합니다.

예를 들어, S3에 10,000개의 객체를 저장했다면 10,000,000년에 한 번 하나의 객체가 손실될 수 있는 확률입니다. S3는 두 개의 저장 시설에서 동시다발적인 소실 상황을 견디도록 설계되었습니다. S3는 다른 저장소와 근본적으로 다른 방식의 설계를 따르고 있는데 바로 파일 시스템이 존재하지 않고 모든 객체는 S3 버킷에 단순한 네임스페이스만으로 저장된다는 점인데요, S3는 지역별 서비스로서 지역별 재난 상황에 대처할 수 있도록 자동 반복 저장됩니다. S3는 현시점을 기준으로 인터넷에서 가장 널리 사용되고 있는 객체 스토리지입니다.

자 그럼 본론으로 돌아가서 S3를 이용한 정적 웹사이트 호스팅에 대해서 알아보도록 하겠습니다. S3만 있으면 웹 서버 설정이나 스토리지에 대한 고민할 필요 없이 정적 웹사이트 호스팅이 가능하게할 수 있습니다. 또한 S3는 필요에 따라 언제든 확장 가능하므로 트래픽 제한이나 용량 제한을 고민할 필요가 없습니다. 예를 들어, S3에 *.html 파일을 저장하면 사용자는 웹 서버 없이 웹 브라우저만으로 접속가능한데요 이는 읽기만 가능한 데이터에 대하 특히 유용한 기능입니다.

S3에 정적 호스팅하기

자 이제 본격적으로 리액트로 개발한 웹을 S3에 정적 호스팅해보도록 하겠습니다. 이번 글에서는 S3에 올려서 생성되는 경로를 통해 웹으로 접속해볼건데요. 자신이 사용하는 도메인으로 하고 싶다면 이후에 Route 53와 CloudFront를 연동시키면 되니 이 부분에 관련된 내용도 실제 다뤄보도록 하겠습니다.

버킷 만들기 & 설정

먼제 S3에 접속해서 새로 버킷을 만들 겠습니다. 버킷 이름은 실제 사용할 도메인으로 붙여놓는게 후에 관리하기 좋은데 우선 저는 captaintech.com 으로 생성하도록 하겠습니다. 주의 할 점은 퍼블릭 엑세스가 가능해야 외부에서 접근이 가능하기 때문에 아래 그림처럼 선택합니다. 경고표시가 강하네요. 주저하지 말고 지금은 테스트이고 보안을 위해서 조치할 방법이 있기에 진행합니다.

생성되었다면 이제 속성에 들어가서 맨 아래 있는 정적 웹 사이트 호스팅을 편집하고 활성화로 변경합니다.

이제 권한탭에 들어가서 버킷정책 부분에 편집을 통해 아래 내용을 추가합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public Read",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::captaintech.com/*"
        }
    ]
}

리소스에 보면 captaintech.com은 제일 처음 생성해준 버킷네임이므로 본인이 생성한 버킷 네임을 써주시기 바랍니다.

리액트 웹 올리기

이제 개발했던 리액트를 올려야 겠죠? CLI를 통해 올릴 수 도 있으나 일단 한번 바로 올려서 되는지 보기 위해서 드래그앤드롭으로 올려보도록 하겠습니다. 저는 yarn으로 프로젝트를 관리하고 있어서 yarn build를 했을때 생성되는 폴더를 확인합니다. build 폴더가 생성됬고 안에 있는 파일들을 확인하면 아래 그림과 같습니다.

전체를 그대로 드래그앤드롭을 통해 올려줍니다. 그럼 아래와 같이 구성되는 것을 확인할 수 있는데요.

이제 속성 탭에서 정적 웹사이트 호스팅 활성화했던 부분을 다시 보면 버킷 웹 사이트 엔드포인트가 적혀져있습니다. http로 시작해서 자신의 버킷이름에 s3그리고 region명이 적혀져 있고 amazonaws.com으로 되어 있는데요 이제 클릭해서 정상적으로 자신의 개발 햇던 PC에서 떳던 화면과 동일하게 뜬다면 정상적으로 AWS의 S3에 정적웹사이트 호스팅이 된 것입니다. 굉장히 쉽죠?

물론 이후에 도메인 매핑이나 보안 등을 엮으려면 몇가지 조치가 필요합니다. 우선 여기까지 한번 따라해보시고 이어서 추가자적으로 진행하도록 하겠습니다.