개츠비 gatsby.js AWS S3에 업로드해서 정적 사이트 호스팅 하기

여러가지 방법이 있지만 최대한 간단하고 따로 설정할 필요가 없는 방법을 소개 한다.

비슷한 상황에서 시행착오를 겪지 않길 바랍니다.

1. aws cli를 설치해준다.

Macos 기준 pip3가 기본 설치되어 있기 때문에 pip대신 pip3로 설치

( pip는 파이썬 인스톨 패키지 관리 도구 )

pip install awscli

2. gatsby-plugin-s3를 설치해준다.

npm install gatsby-plugin-s3

3. gatsby-config.js 파일에 Bucket설정을 추가 한다.

plugins: [
  {
    resolve: `gatsby-plugin-s3`,
    options: {
      bucketName: "my-website-bucket",
    },
  },
]

4. .env를 통해서 AWS 환경변수 전달하기

.env file에 아래와 값이 등록

AWS_ACCESS_KEY_ID=<AWS_ACCESS_KEY_ID>
AWS_SECRET_ACCESS_KEY=<AWS_SECRET_ACCESS_KEY>

해당하는 본인의 값으로 치환한다.

 

5. .env를 cli 환경 변수로 사용하기 위해서 detenv-cli 를 글로벌로 설치한다.

npm install -g dotenv-cli

https://www.npmjs.com/package/dotenv-cli

dotenv-cli

 

 

6. package.json에 script 추가하기

"scripts": { 
  ... 
  "deploy": "yarn build && dotenv -e .env -- yarn gatsby-plugin-s3 deploy -y" 
  ...
}

npm run build && npm run deploy
로 실행하게 되면 개츠비 빌드와 배포를 한번에 할 수 있다.

 

 

그 이외의 방법들을 안쓴 이유

1. aws cli 를 이용해서 shell를 짜는 방법도 있지만 많이 해본 방법이라서 제외함.

2. aws javascript sdk를 이용해서 NODE로 실행하는 방법이 있지만 폴더를 통째로 올리는게 번거러워서 패스

 

참고

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront/

Deploying to S3/CloudFront