리액트 - Netlify 배포하는 방법 및 주의사항

리액트 개발 공부를 하면서 실제 외부에서 접근 가능하도록 무료 호스팅(hosting) 방법중에서 정적 컨텐츠를 호스팅해주는 Netlify 를 사용하는 방법과 주의사항에 대해 알아 보겠습니다.

 

1.  Netlify 와 github pages 차이점

                                                                                           github pages                                        Netlify

github pages vs. netlify

• Netlify가 전반적으로 사이트 배포 관리 기능이 gitub pages에 비해 훨씬 다양하고,  
• 도메인 비교
  • github pages - https://계정명.github.io/리포지토리명 으로 구성 : 명칭 변경 불가
  • netlify - https://프로젝트명.netlify.app 으로 구성 : 임의로 생성된 프로젝트명 대신 사용자가 임의 변경 가능
• Deploy
  • github pages - github repository에 push 와 별개로 build 하면서 배포가 되도록 설정
  • netlify - github repository에 push 만으로 자동 build 및 배포가 진행
• Price
  • github pages - 평생 무료, 접속제한 존재
  • netlify - 1개 site 무료, 용량제한 존재 (bandwidth 월100G, build 시간 월300분

gitub pages 배포 방법은 아래 블로그 참조

2023.08.15 - [리액트(React)] - [React] gh-pages 배포시 주의사항 및 오류 해결

[React] gh-pages 배포시 주의사항 및 오류 해결

2.  Netlify 가입 하기

https://www.netlify.com/

Develop and deploy websites and apps in record time | Netlify

netlify 사이트에서 가입할 때 gitub, gitlab, bitbucket 으로 가입 가능합니다.

netlify sign up

계정이 있는 github로 가입하게 되면 아래와 같이 배포할 프로젝트가 존재하는 사이트중에서 Deploy with Github 를 선택합니다. 

Github 에 있는 repository중에서 전체 또는 하나만 선택할 것인지 묻는데 전체를 선택하고 해당된 repository를 불러옵니다.

Github repository 접근확인 하기 위해 해당 계정의 패스워드를 입력합니다.

등록된 모든 repositoy를 불러와서 보여주게 됩니다.

 

3.  특정 프로젝트 배포하기

프로젝트의 끝에 ">" 를 선택하여 배포를 실행합니다.

배포가 완료되면 Netlify에서 임의로 생성한 프로젝트명을 보여줍니다.

내 페이지에서 배포결과 및 내용 확인이 가능합니다.

4.  배포 옵션 변경하기

Build settings 에서 Build command 와 Publish directory를 설정합니다.

configuration 에서 "change site name" 에서 사이트명을 임의로 수정 가능합니다.

배포시 .env 파일의 경우 .gitignore 에 포함되어 repository내 존재하지 않습니다.

.env 관련 설정(URL, 외부 API Key 값 등)은 Environment variables 메뉴에서 Add a variable로 등록해야 배포 후 사이트가 정상 동작됩니다.

package.json 하단에 접속할 homepage 를 netlify site명으로 추가해 줍니다.

"homepage": "https://사이트명.netlify.app"

 

5. Page not found 오류 수정

사용자가 직접 사이트를 접근하게 되면 메인페이지는 접근 가능하나 새로고침시 404 에러가 발생됩니다.

새로고침시 index.html 조회가 되지 않아 생기는 문제로 리다이렉션을 통해 문제를 해결해야 합니다.

• netlify.toml 생성 : 프로젝트 최상단(package.json 파일 존재 하는 위치)에 추가
• _redirects 생성 : 프로젝트 public 디렉토리에 추가

[netlify.toml]

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

[_redirects]

/*  /index.html 200