Jeon Chang Min

Jeon Chang Min

이제라도 매일 배운 것을 기록하며 살겠습니다.

정적 사이트 생성기 gatsby 배우기 - 002

2 분 소요

정적 사이트 생성기 gatsby 배우기 - 002

  • Gatsby 사이트 S3에 배포하기

AWS CLI 설치하기

  1. https://awscli.amazonaws.com/AWSCLIV2.pkg 다운로드
  2. symlink 생성 
         $ sudo ln -s /usr/local/aws-cli/aws-cli/aws /usr/local/bin/aws
     $ sudo ln -s /usr/local/aws-cli/aws-cli/aws_completer /usr/local/bin/aws_completer

AWS Configure

  • aws configure 를 통해 빠른 구성 
      $ aws configure
  AWS Access Key ID [None]: # AWSAccessKeyId
  AWS Secret Access Key [None]: # AWSSecretKey
  Default region name [None]: # ap-northeast-2
  Default output format [None]: # json

S3 만들기

  1. S3 서비스 선택
  2. Create Bucket 선택
  3. Bucket name 입력
    1. 3자 ~ 63자, 중복불가
    2. 소문자, 숫자, ., - 으로만 구성
  4. Region 선택 > ...Seoul... 선택
  5. Bucket setting for Block Public Access
    1. Block all public access 체크 해제
    2. I acknowledge that ... 체크
  6. Create Bucket 선택

정적 웹 사이트 호스팅 활성화

  1. 생성된 Bucket 선택
  2. Properties 탭 선택
    1. Static website hosting 의 Edit 선택
    2. Use this bucket to host a website 선택
      1. Static website hosting 에 Enable 선택
      2. Index document 에 index.html 입력
      3. Save changes 선택
  3. Permissions 탭 선택
    1. Bucket Policy 의 Edit 선택
      1. Bucket ARN 의 arn:aws:s3... 복사
      2. Policy generator 선택
        1. Step 1: Select Policy Type
          1. Select type of policy S3 Bucket Policy 선택
        2. Step 2: Add Statement(s)
          1. Effect : Allow
          2. Principal : *
          3. Actions : All Actions 체크
          4. Amazon Resource Name : arn:aws... 붙여넣기
          5. Add Statment 선택
        3. Step 3: Generate Policy
          1. Generate Policy 선택
        4. Policy JSON Document 내용 복사
      3. Bucket Policy 페이지로 돌아오기
      4. Policy 부분에 붙여넣기
      5. "Resource": "arn:aws:s3..." 문장 끝에 /* 추가
        • “Resource”: “arn:aws:s3:::YOUR S3 BUCKETS NAME/*”
      6. Save changes 선택

S3 셋업

  1. gatsby site 디렉토리로 이동
  2. gatsby-plugin-s3 설치 
     $ npm install gatsby-plugin-s3

gatsby-config.js 수정

  1. gatsby site 디렉토리로 이동
  2. gatsby-config.js 수정 
     module.exports = {
     ...
     plugins: [
         ...
         {
             resolve: `gatsby-plugin-s3`,
             options: {
                 bucketName: "YOUR S3 BUCKETS NAME",
             },
         },
         ...
     ],
 };

package.json 수정

  1. gatsby site 디렉토리로 이동
  2. package.json 수정 
     {
     ...
     "scripts": {
         ...
         "deploy": "gatsby-plugin-s3 deploy --yes"
     },
     ...
 }

build & deploy

$ npm run build
$ npm run deploy

참고

카테고리 글 더 읽기

정적 사이트 생성기 gatsby 배우기 - 002

2 분 소요

정적 사이트 생성기 gatsby 배우기 - 002 Gatsby 사이트 S3에 배포하기 AWS CLI 설치하기 https://awscli.amazonaws.com/AWSCLIV2.pkg 다운로드 symlink 생성 $ sudo ln -s /usr...