netlify 배포시 만난 오류들 해결 이쯤이야 😏

netlify 배포

사이트에서 레포지토리 연결하고 배포를 했더니 흰 배경의 화면이 떴다.

시도한 방법

프로젝트 안에 파일 추가 (netlify.toml, _redirects)

최상위에 있는 루트 디렉토리 안에 netlify.toml 파일을 생성하고 아래 코드를 추가한다.
```
  [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```
public 폴더 안에 _redirects 파일을 추가한 후에 아래 코드를 추가한다.
```
  /* /index.html 200
```

2) Netlify에서 설정

Site configuration » Build & deploy settings » Build settings

빈칸이던 Build command 와 Publish directory에 아래 내용을 각각 입력한다.

그럼에도 흰 배경이 여전히 뜬다?

Console 창을 통해 오류 메세지를 확인해 보기로 하였다.

(처음 보는 메세지인걸?🤨 이 오류 메세지를 완전히 이해하지 못했다.. 그렇다면 chatGPT의 도움을 받아보자..^^)

오류의 원인

현 프로젝트의 빌드 도구는 vite 였기 때문에 이에 어울리는 Publish directory 설정을 해야했던 것!

내가 시도했던 방법은 다른 빌드 도구를 사용할 때의 방법이였다.

Netlify에서 배포 시 vite build를 실행하도록 설정하기 위해서, vite의 빌드 결과물 디렉토리(기본적으로 dist)를 Netlify의 publish 디렉토리로 지정하기로 했다. (하단에 해결 방법 2) 참고)

package.json의 build를 보면 “vite build” 라고 설정 되어있기도 하였다. (package.json을 잘 확인하자!)

해결 방법

1) 프로젝트 안에 파일 수정 (netlify.toml)

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*.js"
  [headers.values]
    Content-Type = "application/javascript"

2) Netlify 설정 수정

이후! 배포 성공 🎉

Vercel에서 Organization으로 배포하려면 유료 플랜이 필요해 요 근래 Netlify를 많이 이용하고 있는데, 생각보다 어렵지 않다^.^