[AWS S3] S3에 React 프로젝트 정적 웹 호스팅

이전 글들에서 EC2에 Nginx를 설치하고 프론트엔드 소스를 실행하는 방법을 사용했습니다. 하지만 프론트엔드 소스(React 등)와 같이 정적인 웹 서비스는 S3에 빌드된 소스를 올려서 바로 서비스할 수 있는 방법도 있습니다. 따라서 이번 글에서는 프론트엔드 소스를 S3에 올리고 정적 웹 호스팅을 통해 서비스하도록 구조를 변경해 보겠습니다.

 

1. S3 버킷 생성

S3 버킷을 생성할 때, 추후 DNS 연결을 고려하여 URL과 동일하게 지정하는 것이 좋습니다. 퍼블릭 액세스 차단은 최소한으로 차단합니다.

 

 

2. Front-end 소스에 baseURL 수정

React 프로젝트에서 axios를 통해 서버로 접속할 때 서버의 주소를 지정합니다. 이때 주소를 백엔드 프로젝트가 실행중인 EC2의 IP(Public IP 또는 Elastic IP 등)로 지정하면 됩니다.

 

import axios from "axios";

export default axios.create({
    baseURL: "http://EC2_IP:9090/api",  // 이 부분 수정!!!!!
    headers: {
        "Content-Type": "application/json"
    }
})

 

3. Front-end 소스 빌드

아래 명령을 통해 빌드를 진행하면 build 디렉토리가 생성됩니다.

 

$ yarn run build

 

4. 빌드 디렉토리 내 파일 S3에 업로드

위에서 생성된 build 디렉토리 내 모든 파일 및 디렉토리를 드레그하여 S3 버킷에 업로드합니다.

 

 

5. 정적 웹 사이트 호스팅 설정

버킷 속성에서 "정적 웹 사이트 호스팅"을 찾아 활성화합니다. 

 

 

6. 버킷 정책 수정

아직까지는 버킷을 읽을 수 있는 Read 권한이 없기 때문에 "버킷 정책"을 수정하여 읽기 권한을 허용해줍니다.

 

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

 

7. 보안 그룹 인바운드 규칙 수정

기존 프로젝트에서 백엔드 서비스가 실행되고 있는 EC2의 보안 그룹에 9090 포트로 들어오는 요청을 허용하도록 인바운드 규칙을 수정합니다. 9090 포트는 Node 서버가 listen 하도록 소스에서 설정한 포트이기 때문에 각자에게 맞는 포트를 지정하면 됩니다.

 

 

8. Back-end 소스에서 CORS 에러 방지를 위한 Origin 추가

위 작업까지 하면 S3의 프론트엔드와 EC2내 백엔드 간 통신이 가능하지만 Origin이 달라서 CORS 에러가 발생합니다. 따라서 백엔드 소스에서 CORS 방지를 위해 버킷 웹 사이트 엔드포인트를 origin으로 추가해 줍니다.

 

...
const cors = require("cors");

const app = express();

const corsOptions = {
    origin: [
        "http://localhost:8081",  // 추가로 넣고 싶은 origin 작성
        "http://버킷_웹_사이트_엔드포인트",  // 이 부분 중요!!!
    ]
};

app.use(cors(corsOptions));

...

 

9. Node 실행 및 결과 확인

백엔드 프로젝트가 배포된 EC2에 ssh로 접속하고 변경된 소스를 다시 git에서 pull 받은 뒤, node를 실행합니다.

 

$ ssh -i pem경로 사용자이름@ec2의_퍼블릭_IPv4_주소_또는_도메인

$ cd 백엔드_프로젝트_디렉토리
$ git pull origin BRANDCH_NAME

$ node server

 

브라우저를 켜고 버킷 웹 사이트 엔드포인트로 접속하면 기존에 동작하던 웹 서비스를 확인할 수 있습니다. 조회, 저장, 삭제 등의 기능 또한 정상적으로 동작하는 것을 확인할 수 있습니다.

 

 

지금까지의 구조를 그림으로 살펴보면 다음과 같다.

 

---

S3에 올라간 build 파일의 경우 Front-end 소스가 변경됨에 따라 다시 로컬에서 build 하고 build 디렉토리의 파일을 S3에 직접 업로드 해야 하는 번거로움이 있습니다. 따라서 다음 글에서는 AWS Code Series를 통해 자동으로 빌드하고 빌드된 파일을 S3로 배포하는 방법을 살펴보려고 합니다.