마이크로CMS+Nuxt의 Jamstack 블로그를 S3에서 디버깅

개시하다

전위적인 CMS로 잼택의 블로그를 구축할 기회가 있기 때문에 먼저 사용한 기술과 설정 방법을 총결해 보자.

프로비저닝

기술 구성.

Headless CMS: microCMS

source repository: GitHub

CI: GitHub Actions

SSG: Nuxt.js

Hosting: Aamazon S3

Headless CMS는 일본제 마이크로CMOS를 선택했다.
공식 블로그에서 Nuxt.제이스를 사용했다는 잼삭 기사가 있어서 이번에 참고로 하겠습니다.
https://blog.microcms.io/microcms-nuxt-jamstack-blog/
기사에는 Netlify를 초대 대상으로 사용했고, 이번에는 GiitHub Actions와 Aamazon S3를 사용했다.
중도까지는 위에서 설명한 대로 진행한다.
(6. 정적 파일을 구축하고 생성할 때까지)
이 기사는 이후의 CI 설정을 소개합니다.
아마존 S3 설정은 이미 진행됐다.
Aamazon S3의 설정은 아래 기사를 참고했다.
공식 블로그의 보도

유량

마이크로CMOS 기고문

으로

기사가 투고될 때 Giithub Actions에 알림

알림을 받은 CI 자동 생성 콘텐츠

컨텐츠를 생성할 수 있는 경우 자동으로 S3을 처리

마이크로CMS에 글을 등록하면 모든 글이 자동으로 디자인되도록 설정된다.

절차.

Giithub Action 설정

만약 보도가 마이크로CMS에 투고된다면 그 시기에 빌딩은 설계될 것이다.
일단 완성된 Nuxt가js의 블로그를 새로 지은 창고로 삼다.
다음은 Giithub Actions 설정입니다.
GiitHub의 웹 사이트에서 다음 순서에 따라 설정합니다.

대상 저장소에서 Action 을 클릭합니다.

New workflow를 클릭합니다.

set upa workflow yourself를 클릭합니다.

파일 내용 수정
이미지는 기본 파일입니다.

파일 내용은 다음과 같습니다.

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  repository_dispatch:
      types: [update_blog]

jobs:
    build:
        name: Build & Deploy
        runs-on: ubuntu-latest

        steps:
            - name: Checkout
              uses: actions/checkout@v2
            
            - name: Configure AWS credentials
              uses: aws-actions/configure-aws-credentials@v1
              with:
                aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                aws-region: ap-northeast-1

            - name: Build
              run: |
                yarn install 
                yarn build
                yarn generate
            - name:  Contents sync to s3
              run: |
                aws s3 sync ./dist ${{ secrets.S3_PATH }} 

a.microcMOS에서 알림을 받은 후yarn 명령을 실행하여 구축하여 정적 파일을 생성
b. 구축이 완료되면 dist 디렉토리 아래를 S3에 업로드합니다.
repository_dispatch는 앞으로 마이크로CMS에서 설정한 웹훅의 트리거 이벤트 이름과 같아야 합니다.
또 S3의 각종 정보(AWS ACCESS KEY ID 등)를 잘 쓰지 못해 시크릿에 먼저 로그인했다.
Settings→Secrets→New repostitory secret

마이크로CMS 설정

마이크로CMS에 기고하면 웹훅을 Giithub Action으로 알림을 날리도록 설정합니다.
영패의 창설 방법은 다음과 같은 문장을 참고하였다.
https://dev.classmethod.jp/articles/sales-s3-website/

API 설정에서 Webhook을 선택하고 추가 버튼을 클릭합니다

Giithub Action 선택

설정
이번에는 기본 설정만 변경하고 나머지는 초기 설정을 유지한다.
트리거 이벤트는 Giithub Actions에서 설정한 repository입니다.디스패치처럼 필요합니다.

최후

이상은 합작 완성입니다.
마이크로CMS 측에서 기사를 내고 아마존 S3의 결승점을 두드리면 변경 내용이 반영된다.
끝.