[Next] next.js github으로 배포하기

안녕하세요, 개발자 Sean입니다. 

 

저번 주 시작한 회사 블로그 만들기 프로젝트가 끝나 관련해 포스팅을 해보려고 합니다.

 

3주는 예상한 프로젝트였는데 6일 만에 기능 구현 및 배포가 끝나 버렸네요.

 

next.js의 낮은 러닝커브 덕분인 것 같습니다. 

 

이번에 처음 next.js를 이용하면서 MPA, SSR 애플리케이션을 제작해 보았는데요, 

상당히 많은 것에 대해 생각해 보고 오히려 SPA와 React.js에 대해 더 깊게 이해하게 된 것 같습니다. 재미있었습니다 ㅎㅎ

 

거두절미하고 제가 만든 블로그 어플리케이션은 아래와 같은 방식으로 작동합니다. 

1. 데이터 분석가가 주피터 노트북을 이용해 만든 .ipynb 파일을 .json 확장자로 변경한 뒤

2. next.js 어플리케이션의 src/contents 폴더 아래에 넣고

3. github의 main branch에 push 합니다.

4. 그러면 next.js의 자바스크립트 코드를 정적인 html 파일을 생성하고 이때 src/contents 안의 디렉터리 구조가 그대로 데이터로 이용됩니다. 

5. 마지막으로 블로그가 배포되는 방식입니다. 

 

다른 일반적인 블로그와는 상당히 다른 방식으로 포스팅을 업로드하죠?

언듯 보면 아주 불편한 방식입니다. 

 

하지만 이런 방식으로 어플리케이션을 디자인한 이유는 필수 구현 기능들 때문이었습니다.

필수 구현 기능

- SSR/MPA 일것

- plotly.js의 인터렉티브 한 그래프를 그릴 수 있을 것

- 데이터 분석가의 주피터 노트북 파일을 이용할 수 있을 것

- 데이터 분석가가 포스팅을 할 때 개발자의 도움이 필요 없을 것

 

위 기능들을 구현하기 위해 고민했던 방법은 아래와 같습니다. 

 

1. 데이터 분석가가 notion에 글을 작성하고 포스팅하면 notion api를 이용해 블로그에 페이지를 추가한다. 

2. 블로그에 포스팅을 업로드할 수 있는 텍스트 에디팅 페이지를 추가한다. 

3. s3 버킷에 포스팅을 저장하고 버킷의 데이터를 불러와 블로그에 페이지를 추가한다.

 

하지만 안타깝게도 위 방법들은 필수 구현 기능을 충족시키지 못했습니다. 

 

1번 방식은 plotly.js를 구현할 수 없었습니다. 노션에서 plotly.js 데이터를 디스플레이할 수 없었기 때문입니다. 

2번 방식은 가용자원을 벗어나는 규모였습니다. 텍스트 에디팅 라이브러리를 조사해본 결과, plotly.js를 업로드할 수 있는 방법이 없었기 때문에 텍스트 에디터를 처음부터 만들어야 했습니다. 하지만 이는 프로젝트의 취지와는 벗어나는 규모입니다.

3번 방식은 데이터 분석가 입장에서 불편하고 학습이 필요하다는 점에서 제외시켰습니다. 데이터 분석가들에게 여쭤보니 git에 대한 이해는 어느 정도 있지만 s3에 대해서는 대략적인 개념 이해만 하고 있었습니다.

 

따라서 이러한 특이한 디자인을 가지게 된 것입니다. 

Github 배포 방법

깃헙 배포는 아래와 같은 방법을 이용했습니다. 

 

next.config.js 파일 생성

/**
 * @type {import('next').NextConfig}
 */
 const nextConfig = {
  reactStrictMode: true,
  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
  images: {
    unoptimized: true,
  }
}

module.exports = nextConfig

우선 next.config.js 파일을 위와 같이 생성해 배포 환경에서 url 값이 올바르게 적용되도록 기본 작업을 해줍니다. 

 

package.json 수정

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint"
  },

 

그리고 package.json에 export 명령문을 추가해 줍니다. 

 

여기서 build와 export의 차이점이 헷갈릴 수 있습니다. 

build는 html 페이지를 생성한다고 생각하시면 됩니다. getStaticprops 등 다이내믹 라우팅을 이용했다면 이 명령어로 복수개의 페이지가 만들어지는 것이죠. 

export는 생성된 html 페이지가 node.js서버 없이도 독립적으로 작동할 수 있도록 next.js 애플리케이션을 정적인 html로 export 하는 것입니다. 사실 이 부분은 저도 완전히 이해된 것은 아니라서 이 정도로 넘어가도록 하겠습니다. 

 

Github repository에 Workflow 추가하기

 

깃헙에 레포지토리를 생성하고 actions에 들어가 줍니다.

 

actions에서 원하는 workflow를 추가할 수 있습니다. 

여기서 node.js를 검색하고 해당 워크플로우를 선택합니다.

그러면 요렇게 탭이 "Code"로 변경되면서 yml파일 추가 창이 나옵니다. 

여기서 우리는 어떤 "행위"가 이루어졌을 때 깃헙에서 어떤 일을 처리하면 되는지 명령을 정의할 수 있습니다. 

그리고 아래와 같이 저는 yml파일을 작성했습니다.

name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build
      env:
        NEXT_PUBLIC_BASE_PATH: '/test'
    - run: npm run export
      env:
        NEXT_PUBLIC_BASE_PATH: '/test'
    - run: touch ./out/.nojekyll
    
    - name: Deploy 🚀
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: out # The folder the action should deploy.

간략하게 의미를 설명하자면

 

1. main 브렌치에 push가 발생하면

2. ubuntu 최신 버전 os에서 

3. node 16 버전을 이용해 아래 step을 실행해라

4. npm을 이용할 것이고 

5. build 명령문에서 기본 url path는 '/test'이다 (이건 제 깃헙 레포지토리 이름이 test이기 때문입니다.)

6. build가 끝나면 export 명령문을 실행하고 url path는 '/test'이다. 

7. touch ./out/.nojekyll 명령문을 실행해 "_" 이름을 가진 파일이 읽히지 않는 것을 방지하고

8. 배포를 하는데 이때 JamesIves/github-pages-deploy-action@v4를 따라라. (이건 다른 개발자분이 만들어 오픈해 주셨습니다)

 

github pages 배포하기

 

이러면 이제 거의 다 끝나갑니다 ㅎㅎ

 

로컬에서 npm build && npm export 한 뒤 코드를 우선 레포지토리에 push 합니다. 

 

그러면 actions탭에서 요런 화면이 나오면서 gh-pages 브랜치도 생성될 겁니다. 

이후 아래와 같이 settings의 pages에 들어가 어떤 브랜치를 통해 배포를 진행할 것인지 묻는 란에 gh-pages를 선택합니다. 

그리고 github repository의 main 브랜치에 애플리케이션을 다시 push 하면,

 

action 탭에서 빌드와 배포 진행사항을 알 수 있게 됩니다.

그러면 아래와 같이 성공적으로 배포가 끝나게 됩니다. 

한가지 주의해야 할 점은

 

만약에 블로그에 민감한 정보가 있다면 위와같은 방식을 사용하지 말기를 바랍니다. 

 

깃헙 page 기능을 무료로 이용하기 위해서는 레포지토리를 public으로 오픈해야하기 때문입니다. 

 

저희의 경우 많은 사람들이 기업 esg 분석을 보고 인사이트를 얻길 바라는 마음에 오픈하는 블로그이기 때문에 위와같은 방식으로 배포한 것입니다.