개발관련

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

2021. 10. 23. 17:08
반응형

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

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

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

A global executable to run applications with the ENV variables loaded by dotenv

www.npmjs.com

 

 

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

This guide walks through how to host and publish your next Gatsby site to AWS using S3 . Optionally - but very recommended - you can add…

www.gatsbyjs.com

 

 

반응형

'개발관련' 카테고리의 다른 글

aws fargate 아마존 파게이트 뜻 총정리  (0) 2022.09.22
tsconfig, jsconfig 절대 경로와 webpack alias 설정 관련 해결 방법  (0) 2022.02.03
AWS S3와 E2C의 차이  (0) 2021.10.12
Gatsby 개츠비 에서 이미지 사용 시 최적화 관련 팁 gatsby-plugin-image 사용법  (0) 2021.10.10
안드로이드 AlertDialog 바깥영역 클릭해서 취소 하기 setOnCancelListener  (0) 2021.06.10
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
개발자 Dane
개발자 Dane
IT / 테크 전문 크리에이터 데인 입니다.
개발자 Dane
개발자 Dane의 IT 전문 블로그
개발자 Dane
반응형
  • 분류 전체보기 (172)
    • 개발관련 (26)
      • 프론트엔드 지식 (11)
      • 매일 코딩 테스트 챌린지 (27)
      • 자바스크립트 팁 (32)
      • 리액트 (11)
    • 얼리어답터 (11)
    • 팁 (13)
    • 게임 (18)
      • 디아블로2레저렉션 (16)
    • 운동하는 후니 (2)
전체
오늘
어제

태그

  • 갤럭시긱벤치
  • Gatsby
  • GOS해제
  • AWS
  • React
  • 프로그래머스
  • 바바리안
  • javascript
  • 룬워드방패
  • 디아블로2레저렉션
  • PNP
  • 리액트
  • 디아블로4
  • s3
  • docker
  • 자바스크립트
  • 디아블로2
  • 갤럭시성능뻥튀기
  • 갤럭시소비자기만
  • Next.js
  • 문자열
  • yarn
  • gos
  • 도커
  • 문자열정렬
  • 레저렉션
  • 코딩테스트
  • 아이폰
  • 애플페이
  • vscode

최근 댓글

hELLO · Designed By 정상우.
개발자 Dane
개츠비 gatsby.js AWS S3에 업로드해서 정적 사이트 호스팅 하기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.