Netlify를 통한 웹사이트 빌드, 배포, 호스팅

게시 2022/09/23

By Sangmin Lee

7 분읽는 시간

[Archive] 이 글은 2022년에 다른 플랫폼에서 작성한 글을 이전한 것입니다.
내용 중 일부는 현재 기준과 맞지 않을 수 있습니다.

웹 사이트의 배포

컴퓨터를 서버로 만들어 IP를 알리고 24시간 가동하는 것은 현실적으로 어렵기 때문에,
일반적으로 외부 웹 호스팅(클라우드) 서버를 이용한다.

가장 많이 사용되는 amazon web service같은 경우는 가격이 다소 비싸게 측정되어 있다.
신규 회원가입자에 한해 12개월 무료 체험 서비스를 제공하는 프리 티어 credit이 존재하여 허용된 용량 및 기간 내에서 EC2, S3, RDS를 무료로 사용 가능하다.

가벼운 프로젝트 및 프로덕트 배포에는 주로 Netlify, Vercel, Github page를 통해 배포한다.
순수 정적 HTML/CSS/JS로 구성된 페이지라면 Github page,
Next.js SSR/API Routes를 사용하는 페이지라면 Vercel,
정적 사이트 + 빌드 자동화 까지만 의도하는 적은 용량의 페이지라면 Netlify가 추천된다.

Netlify

재사용이 가능한 js기능들을 모아놓은 페이지를 배포해야 할 일이 생겨 Netlify를 이용해보게 되었다.

Netlify를 이용해 배포하는 것은 관련된 글을 읽지 않더라도 배포를 할 수 있을 정도로 이해하기 쉽고 직관적이게 페이지가 구성되어있다.

배포가 완료되면 메인 페이지에서 가동되고 있는 사이트 목록과 사용된 대역폭, 빌드에 사용된 시간 등을 알려준다.

사이트 클릭 > Site Settings > Change site name을 통해 url을 적절하게 수정할 수 있다.
gabia와 같은 호스팅 업체에서 도메인을 구입해 연결하여 접근할 수 있도록 만들 수도 있다.

발생한 에러에 대한 해결

- build command error

대부분의 블로그에서 Netlify를 통한 배포 설정을 다음과 같이 다룬다.

Build command : npm run build는 netlify가 직접 build를 할 때 입력할 명령어를 적는 곳인데,
Next.js를 사용하는 상황에서는 package.json에 관련 script가 작성되어 있어야 한다.

  
  "scripts": {
    "dev": "next dev",
    "build": "next build", // npm run build => npm run next build
  }

⚠️ 주의
Netlify는 Next.js의 모든 기능을 기본적으로 지원하지 않는다.
Netlify는 기본적으로 정적 파일 기반 호스팅 플랫폼이다.
따라서 Next.js 프로젝트를 Netlify에 배포할 경우,
getServerSideProps
API Routes (/pages/api)
Middleware
와 같은 서버 실행이 필요한 기능은 정상적으로 동작하지 않는다.
따라서 Netlify는 Next.js를 정적으로 변환했을 때만 적합한 플랫폼이며,
백엔드 로직이나 서버 렌더링이 필요한 서비스에는 적합하지 않다.

- directory structure error

기존 폴더 구조가 다음과 같다.

// Persona
📂 persona
├── 📁 next
├── 📁 vscode
├── 📁 components
├── 📁 lib
├── 📁 node_modules
├── 📁 pages
└── 📁 public

이 구조에서는 Basic build settings를 다음과 같이 수정해야 한다.

Next.js를 사용하는 npm run build는 build 폴더가 .next에 구성된다.
(자세한 사항은 Next.js deploy docs를 참조)

⚠️ 주의
.next 디렉터리는 Next.js의 내부 빌드 산출물로,
정적 호스팅 환경에서 직접 배포 대상으로 사용할 수 없다.
Netlify에 Next.js 프로젝트를 배포하려면 단순히 next build만 수행하는 것이 아니라,
정적 파일을 생성하는 next export 과정이 필요하다.
이 경우 실제로 배포해야 할 디렉터리는 .next가 아니라 out 디렉터리이며,
Netlify의 Publish directory 또한 out으로 설정해야 한다.

- build optimization failed

log에서 안내되는 문서를 확인하면, valid React Component가 아닌것을 export하는 페이지는
렌더링 과정에서 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 설명되고 있다.

따라서 사용되지 않거나 valid React Component양식을 벗어나는 파일은 제거를 해줘야 한다.

또한 .babelrc, .eslint, .prettier등 기타 설정 파일 내에서 key가 중복되지 않도록 신경써야 한다.

- 새로고침 시 404 오류 (SPA / Next.js export)

Netlify와 같은 정적 호스팅 환경에서 Next.js를 next export로 배포한 경우,
페이지 이동은 정상적으로 동작하지만 새로고침 시 404 오류가 발생할 수 있다.

이는 정적 서버가 각 경로에 대응하는 실제 HTML 파일을 찾지 못하기 때문이다.

이를 해결하기 위해 Netlify에서는 Redirect 설정을 추가해야 한다.
배포 디렉터리(out) 또는 public 디렉터리에 _redirects 파일을 생성하고 다음 내용을 추가한다.

/*    /index.html   200

implementation, tools

netlify