본문으로 건너뛰기

Docusaurus 프로젝트 Amplify와 Github로 자동 배포하기

· 약 6분
Braun Park
Braun Park
Curious Developer

Docusaurus를 활용해서 블로그를 만드는 과정을 포스팅으로 간단하게 작성하고 있습니다. 포스팅 하나로 끝내고 싶었는데 생각보다 포스팅이 길어지고 있어서 나누어서 작성하고 있습니다. 간단하게 프로젝트 구조에 대해 설명한 글은 이전 글을 참조해주세요.

노트

2024-09-01 - Docusaurus 프로젝트 생성과 구조 살펴보기(1) - Blog 디렉토리
2024-09-02 - Docusaurus 프로젝트 생성과 구조 살펴보기(2) - docusaurus.config.ts
2024-09-03 - Docusaurus 프로젝트 Amplify와 Github로 자동 배포하기 - docusaurus.config.ts


지난 두 포스팅 Docusaurus 프로젝트 생성과 구조 살펴보기을 통해 기본적인 Docusaurus 프로젝트 설치 및 설정이 완료되었습니다. 그렇다면 이제 남은건 배포 뿐입니다. 배포를 하는 방법은 여러가지가 있는데요, 저는 AWS 신봉자이기 때문에 AWS Amplify와 Github를 이용해 배포를 해보도록 하겠습니다.

AWS Amplify​

AWS Amplify
AWS Amplify란, Amazon Web Services(AWS)에서 제공하는 풀스택 애플리케이션 개발을 위한 플랫폼입니다. 백엔드와 프론트엔드를 통합하여 웹 및 모바일 애플리케이션을 빠르게 개발, 배포, 관리할 수 있도록 도와주는 도구와 서비스 모음입니다.


특히 서버리스(Serverless) 아키텍처를 기반으로 하여 확장성, 보안성, 그리고 유연성을 제공합니다. 개인적으로 프로젝트를 진행하거나 빠르게 MVP를 만들어내야 할 때 큰 도움이 될 것 같습니다.

Amplify 프로젝트 생성하기​

Amplify 시작하기 페이지에 접속하면 쉽게 프로젝트를 생성할 수 있습니다.
이번 프로젝트는 Github와의 연동을 통해 자동 배포가 이뤄질 수 있도록 하는 것이 목표이기 때문에 만들어놓은 Docusaurus 프로젝트는 Github에 repo가 만들어져 push가 되어 있어야 합니다.

Git 공급자 선택​

Amplify-step1

사진과 같이 나오면 Github를 선택해줍니다. 다른 걸 쓰고 있으면 다른 걸 고르셔도 되지만, 이번 프로젝트는 Github 기준입니다.

리포지토리 및 브랜치 추가​

다음 단계로 넘어가면 Github 로그인(권한 연결) 팝업이 뜰텐데요, 로그인 하고 하라는 대로 해줍니다. 그러면 팝업이 닫히면서 만들고 선택한 리포지토리와 브랜치들이 나옵니다. 저는 이 프로젝트가 있는 Repo만 선택했습니다.


Amplify-step2
이렇게 Repo와 커밋이 일어나면 자동으로 배포 프로세스가 동작할 브랜치를 선택합니다. 그리고 다음 단계로 넘어갑니다.

빌드 설정​

여기서 빌드 설정을 해주어야 하는데요. 중간 쯤에 있는 **Edit YML file" 버튼을 클릭합니다. 그러면 팝업이 뜰텐데, 아래 내용을 복사하여 붙여넣습니다.

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm install'
        build:
            commands:
                - 'npm run build'
    artifacts:
        baseDirectory: build
        files:
            - '**/*'
    cache:
        paths:
            - 'node_modules/**/*'

그 다음 단계로 넘어가서 배포가 잘 되는지 확인하면 끝입니다. 처음에는 한번 무조건 빌드 및 배포가 이루어지기 때문에 배포 끝난 후에 해당 브랜치에 커밋을 해서 자동 배포가 정상적으로 되는지 확인해보세요.

마치며​

이렇게 세 포스팅을 통해서 Docusaurus를 설치하고 배포하는 과정에 대해서 정리해봤습니다. 처음에는 익숙하지 않았는데, 정리를 하면서 이것저것 만져보니까 이제야 저도 Docusaurus가 조금씩 손에 익어가는 것 같습니다. 개발자에게 기술 블로그 운영이 참 중요하다고 생각하고, 또 많이 들어왔는데 이번에는 정말 재밌게 열심히 운영해보겠습니다.

혼자 공부하는 내용이나 토이프로젝트 내용도 업데이트 하겠지만, Docusaurus를 조금 더 재밌게 사용할 수 있는 방법에 대해서도 여러가지 고민을 해보고 공유할 수 있었으면 좋겠습니다. 애드센스나 애널리틱스 활용에 대해서 조금 더 공부해보고 오겠습니다.

출처​

Docusaurus 공식 홈페이지
AWS Amplify 공식 홈페이지