🚀 nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

Vercel은 기존에는 zeit now였었는데, ‘2020년 4월 21일’부터 zeit에서 Vercel로 브랜드 네임을 바꿨다.

TL;DR

개인적인 생각입니다! 😅

1. nextJS란?

나는 개인 프로젝트를 할 때, 라우팅이 필요없는 어플리케이션이어도 프로젝트가 확장될 경우를 미리 대비하여 nextJS 프레임워크를 사용한다.

root
├── components
├── pages
│   ├── _app.jsx
│   ├── _document.jsx
│   ├── index.jsx
│   ├── page1.jsx
│   ├── page2.jsx
│   ├── page3.jsx
│   ├── page4.jsx
...

pages/page1.jsx => sitename.com/page1

pages/page2.jsx => sitename.com/page2

2. 서버리스 배포플랫폼

✏️ 추가로 Netlify 와 Vercel은 Lambda 뿐만 아니라 백엔드 기능도 제공해서 리소스를 접근하기도 쉽다.

3. Netlify vs Vercel

Overview (무료 기준)

공부용으로 만든 AWS 계정에서 이것저것 눌러보다 1만 5천원을 빼앗긴 아픈 기억이 있다..

해당 스펙은 변경될 수 있다. (현재 2020.4.24 기준)

메모리 제한 / 실행시간 제한 / 페이로드

bandwidth

Builds/day

Build minutes

이 블로그도 Netlify를 이용햇는데, 내 계정을 들어가 확인해보니 현재까지 79분 사용했다고 나와있었다.

Serverless Functions 개수/크기제한

vercel이 빌드 로그인데 λ 요게 serverless function를 의미한다.

12개를 넘으면 빌드를 실패한다.

✏️ Serverless Functions 관련 추가

람다방식의 페이지

html방식의 페이지

4. Faas vs Github page

5. 🚀 Github page 배포하기

Github page로 배포한 소마법 프로젝트 배포용

5-1. 스크립트 작성하기

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
  },

5-2. next.config.js

// next.config.js
const debug = process.env.NODE_ENV !== 'production'
const name = 'small-magic-project-deployment'

module.exports = {
  assetPrefix: !debug ? `/${name}/` : '',
}

5-3. env-config.js

// env-config.js
const debug = process.env.NODE_ENV !== 'production'
const name = 'small-magic-project-deployment'

module.exports = {
  'process.env.BACKEND_URL': !debug ? `/${name}` : '',
}

// .babelrc.js
const env = require('./env-config')

module.exports = {
  presets: ['next/babel'],
  plugins: [['transform-define', env]],
}

5-4. 이미지 리소스 접근

<ImageContainer onClick={storeReset}>
  <img src={process.env.BACKEND_URL + '/cancel.png'} />
</ImageContainer>

5-5. 사용자에게 보여지는 URL 설정

nextJS의 페이지 라우팅은 Link 를 이용하며, a를 사용하는 것과 달리 새로고침이 발생하지 않는다. (싱글페이지 어플리케이션)

as를 넣어주지 않은경우

as를 넣어준 경우

const AppIcon = ({ idx }) => {
  const url = `/page${idx}`const appIconName = 'PAGE' + idx

  return (
    <Link href={url} as={process.env.BACKEND_URL + url}>
      <a style={{ textDecoration: 'none' }}>
        <AppIconContainer idx={idx}>
          <div>{appIconName}</div>
        </AppIconContainer>
      </a>
    </Link>)
}

6. 🚀 Netlify 배포하기

Netlify로 배포한 소마법 프로젝트 배포용

6-1. 스크립트 작성하기

github page 배포와 구분을 두기 위해 “netlify-deploy” 라는 이름으로 작성했다.

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "netlify-deploy": "next build && next export"
  },

6-1. 실제 배포하기

7. 🚀 Vercel 배포하기

Vercel로 배포한 소마법 프로젝트 배포용

7-1. 스크립트 작성하기

github page 배포와 구분을 두기 위해 “vercel-deploy” 라는 이름으로 작성했다.

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "vercel-deploy": "next build && next export"
  },

7-2. 실제 배포하기

빌드명령어는 next export를 실행해야 함.

nextJS 이외에도 create-react-app, Gatsby, vue.js, angular, jekyll 등 다양한 framework preset 들이 있다.

8. 결론

람다방식에 대해서도 처음 알게되었는데 언젠가 적재적소에 잘 사용할 수 있는 기회가 있었으면 좋겠다..!