정적인 html, 싱글 페이지 어플리케이션(spa)는 아마존 웹 서비스(AWS)의 S3라는 파일서버에 올려서, 간단하게 호스팅 할 수 있습니다.

오늘은 serverless 프레임워크를 이용해서 AWS S3에 정적 호스팅을 간단하게 하는 방법을 알아보겠습니다.

1. npm 프로젝트 생성

node.js 환경에서 동작할거기 때문에 npm 프로젝트를 생성해줍니다.

저는 serverless-s3-static로 하겠습니다.

mkdir serverless-s3-static
cd serverless-s3-static
npm init

npm init을 하면 프로젝트 이름, 설명, 키워드, 작성자 등의 정보를 묻는데, 안내에 따라 적당히 작성해줍니다.

2. 간단한 index.html 작성

public 디렉토리를 생성하고 S3에 올릴 간단한 index.html을 작성하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>serverless-s3-static</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>인덱스인덱스</h1>
  </body>
</html>

자바스크립트가 포함된 SPA도 올릴 수 있습니다.

3. AWS credentials 설정

serverlessS3 등 AWS 서비스에 대한 접근 권한이 있어야 합니다.

이전에 serverless를 이용해서 nuxt 프로젝트를 lambda에 올리는 작업에 관한 포스팅을 했습니다.

AWS credentials 설정에 대한 내용은 동일하니 이전 포스트를 참고해주시면 감사하겠습니다.

단, 제가 serverless를 이용해서 S3에 업로드하는 과정에서 권한 문제가 발생했습니다.

S3에 대한 권한만 아래 권한을 추가로 JSON에 넣어주시면 됩니다.

      "s3:DeleteObject",
      "s3:PutAccountPublicAccessBlock",
      "s3:DeleteBucketPolicy",
      "s3:PutObject",
      "s3:PutBucketNotification",
      "s3:PutObjectVersionAcl",
      "s3:ListBucket",
      "s3:PutBucketTagging",
      "s3:DeleteBucket",
      "s3:ObjectOwnerOverrideToBucketOwner",
      "s3:ListAllMyBuckets",
      "s3:PutBucketWebsite",
      "s3:GetBucketCORS",
      "s3:GetObjectVersion",
      "s3:CreateBucket",
      "s3:PutBucketAcl",
      "s3:PutBucketCORS",
      "s3:GetObject",
      "s3:DeleteObjectVersion",
      "s3:PutEncryptionConfiguration",
      "s3:PutObjectAcl",
      "s3:PutBucketPublicAccessBlock",
      "s3:PutBucketPolicy",

4. serverless랑 serverless-finch 설치

serverless-finch는 S3에 정적 호스팅을 하기 위한 serverless 플러그인입니다.

이 두가지를 설치하겠습니다.

npm install -D serverless-finch serverless

5. serverless.yml 작성

serverless가 읽어들일 serverless.yml을 작성하겠습니다.

service: serverless-s3-static

provider:
  name: aws
  region: ap-northeast-2 # 서울리전을 선택했습니다.

plugins:
  - serverless-finch

custom:
  client:
    bucketName: serverless-s3-static-ashnamuh # 반드시 유니크해야 합니다.
    distributionFolder: public # public 디렉토의 모든 파일을 S3에 업로드합니다.

6. deploy npm 스크립트 추가

배포 명령어를 npm 스크립트에 등록하겠습니다.

다음 코드를 참고에서 package.json을 수정하시면 됩니다.

{
  "name": "serverless-s3-static",
  ...
  "scripts": {
      "static-deploy": "serverless client deploy"
    },
  ...
}

7. 배포하기

npm run static-deploy로 배포를 진행합니다.

Do you want to proceed? 라고 물으면 yes를 입력해서 진행해줍니다.

serverless_s3_static1.png

Success! 다음에 제공된 url에 접속하면

serverless_s3_static2.png

정상적으로 배포된걸 확인할 수 있습니다.

생각해볼 것

  • route53을 이용한 도메인 연동
  • CI, CD 연동

예제 코드

예제 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/ashnamuh/serverless-s3-static

참고 링크

https://serverless.com

https://github.com/fernando-mc/serverless-finch

https://serverless.com/blog/deploy-serverless-frontend-with-serverless-finch-plugin/