netlify 빌드 방법 및 오류해결(React)

빌드할 때 오류 요소가 내가 생각하는 것보다 많았다.

next는 netlify에서 SSR이 안된다고 한다. <= vercel 써야 함

react , yarn 기준으로 설명하겠다.

 

yarn build

빌드하기 위해서 , 자신이 사용한 것 (yarn or npm)에 대한 빌드 명렁어를 입력한다.

 

빌드가 잘 되었다면 , npm에 경우 build 라는  폴더가 생겼을 것이다.

나는 yarn이기에 dist라는 파일이 생겼다.

 

일단 프로젝트 폴더 안, 최상단에 netlify.toml이라는 파일을 만든다.

아래엔 netlify.toml에 있는 코드다.

[build]
publish = "dist"
command = "yarn build"

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"

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

[build]

publish: 네틀리파이가 배포할 때 어디서 파일을 찾을 지 지정

command : 웹사이트에서 빌드할 때 실행할 명령어. (터미널의 명령어와 동일하게 설정해줘야 함.)

 

[context.production.environment] : 배포환경에서 사용 될 환경변수를 설정

 

[[redirects]

from = "/*"

to = "/index.html"

status = 200

: 모든 경로(/main, /about 등)가 'index.html'로 Redirection 되도록 하는 설정이다.

리액트 같은 SPA(single Page Application)에서 매우 중요하다.

 

 

그리고 yarn build 했을 때 , 안쓰는 변수가 있다면 제거 해주는 게 좋다.

사용하지 않은 변수가 있다면 오류가 뜰 수 있기 때문이다.

const [Data,setData] = useState("")
위와 같은 상태가 있다면

const [Data] = useState("")
const [,setData] = useState("")

이렇게 사용하거나 그냥 변수로 지정하는 것도 방법일 수 있다.

사실 위와 같이 쓰는 게 의미가 있나 싶긴 함.

 

------------------------

배포 방법

1. 일단 홈페이지 들어가서 로그인부터 한다.

2. Add new Site -> Import an exsiting Project

어디에서 프로젝트를 연동할 건지 선택.

보통 깃허브일 것이다.

그럼 이런 식으로 뜨는데 , 원하는 게 떴다면 바로 눌러주면 되지만,

안떴을 경우엔 내 이름을 눌러 Add another organization을 해준다.

다음으로 넘어가면 이런식으로 뜨는데, sitename , branch to deploy(프로젝트를 어떤 브랜치에서 배포할건지) 정도만 정하고

왠만하면 그냥 넘어가는 게 좋을 거다.

 

배포 안되면 yarn command라던지 , base directory를 건드려보는 정도?



환경변수(env)파일이 있으면 추가해야하지만, 없는 경우는 건드리지 말고 넘어가면 된다.

 

다 끝났으면 Deploy portfolio를 해주면 된다.

끝이다.

만약 이 글을 읽는 사람이 배포가 처음이고 타입스크립트를 사용했다면 많은 오류를 만나게 될 것이다.

 

배포 시 오류를 보는 방법은

1. production deploys에서 본다.

2. 브라우저 콘솔창을 열어본다.

 

감사하게도 우리가 공부하는 프론트는 정말 수 많은 분들이 길을 먼저 걸어가셨다.

구글링 해보면 답을 찾을 수 있을 거라 생각한다.