ZOOOO

Logo

이것 저것 남겨보겠습니다.

View My GitHub Profile

2 April 2022

AWS S3에 stataic web server 구성하기

by zoooo-hs

지난주엔 AWS Elastic Beanstalk을 통해 Spring boot 프로젝트를 배포하여, API 호출까지 확인해 보았다. 그렇다면 이번엔 프론트엔드에 해당하는 웹 정적 파일을 서비스하는 방법을 알아보고자 한다.

서론

이번 글에서는 AWS의 S3를 사용하여 정적 웹 페이지를 제공하는 방법을 소개한다. AWS S3는 클라우드 스토리지 서비스로, 원하는 파일을 업로드, 다운로드 할 수 있다. 기본적으로 API를 통해 오브젝트를 업로드, 다운로드 할 수 있지만 S3에서 제공하는 정적 웹 서버 호스팅 기능을 제공하여 특정 URL에 대해서 사용자가 지정한 HTML 및 그 외 정적 파일을 제공할 수 있게 구성할 수 있다. 이번 글에선 이러한 정적 웹 서버 호스팅 기능을 이용해 HTML, JS, CSS를 배포해본다. 아래와 같이 HTML, CSS, JS를 구성했다. 모든 예제 코드는 github 레포지토리에서 확인할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>나의 멋진 웹 사이트</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <h1>반갑습니다!</h1>
    <p>저는 건강하시고 다정하신 부모님 아래 2남 중 장남으로 태어나 ... 블라블라 블라</p>
    <button id="push-button">눌러보고 싶네</button>
    <script src="script.js" ></script>
</body>
</html>

p {
    font-size: 30px;
}

document.getElementById("push-button").onclick = () => {
    alert("자.. 이게 클릭이야");
}

들어가기 앞서: React.js

React, Vue와 같이 웹 프론트엔드 라이브러리로 처음 웹을 공부하고 개발하면 HTML, JS, CSS 파일만으로 웹 프론트엔드를 배포하여 호스팅한다는 게 잘 와닿지 않을 수 있다. (모두가 그런 건 아니겠지만…. 적어도 내가 처음 웹을 배울 땐 그랬다….) 왜냐면 보통 이런 라이브러리들은 JS도 아닌 HTML도 아닌 파일에 JS와 HTML 심지어 CSS까지 같이 저장하고, 마법 같은 npm start 주문을 통해 localhost:3000에서 결과를 확인할 수 있기 때문이다. 자세한 내용을 알지 못하고 이런 식으로 개발을 진행하다 보면, 실제 배포를 어떻게 해야 할지 고민이 될 수 있다.

사실 npm start로 확인하는 방법 그대로 배포해도 웹 페이지를 제공할 순 있다. Elastic Beanstalk 혹은 순수 EC 2 인스턴스 + node.js 플랫폼 위에 프로젝트를 올려 npm start 명령을 실행시키면 된다. 이후 80 입력을 3000으로 프록시 하여 웹 페이지를 호스팅 할 순 있다. 그러나 우리가 직접 node.js 환경을 구축하고 소스 코드로 직접 서버를 구성해야 하는 번거로움이 있다. 바로 이때 우리가 항상 보고 지나친 명령인 npm build (혹은 yarn build)를 사용할 때이다. create-react-app과 같은 각 라이브러리에 맞는 CLI로 프로젝트를 만들면 package.json에 build 명령이 정의되어 있을 것이다. 우리는 이 명령을 통해 우리 프로젝트를 HTML, JS, CSS 파일로 만들 수 있다.

// package.json
...
  "scripts": {
    "start": "...",
    "build": "react-scripts build",
    ...
  },
...

react의 경우 npm build를 통해 build/ 디렉토리가 생성되는데, 여기에 있는 index.HTML을 브라우저를 통해 열면 우리가 npm start를 통해 보면 화면이 그대로 나온다. index.html외에도 여러 JS 파일들이 존재하는데 babel과 webpack의 설정에 따라 알맞게 알아보기 어려운 형태로 JS 파일이 구성되어 있을 것이다. 여기엔 이제 우리가 각 컴포넌트 및 정의한 함수들이 일반 JS로 변경되어 담겨있다. 우리는 이러한 build/ 디렉토리에 있는 파일을 s3에 올려 정적 웹 서버를 호스팅 하면 된다!

npm build
...
ls build/
asset-manifest.json favicon.ico         logo.png            robots.txt
default-profile.png index.html          manifest.json       static

S3 버킷 만들기

S3는 Bucket이라는 단위로 여러 오브젝트 스토리지를 구성할 수 있는데, 사용자는 각 프로젝트에 맞게 오브젝트 스토리지를 구성하여 사용할 수 있다. 우리는 이번 정적 웹 호스팅을 위한 S3 Bucket을 구성한다.

이름 짓기

퍼블릭 엑세스 허용

버킷 생성 완료

정적 웹 호스팅 허용

상세 페이지 및 속성 화면

정적 웹 사이트 호스팅

파일 업로드

URL 확인하기

그런데? ..

버킷 정책 생성

정책 생성기

진짜 끝

tags: Frontend - Web - HTML - AWS - S3 - Cloud - Deployment - React