React로 커머스 사이트 만들기 (9): Netlify 배포

GitHub - jinmidnight01/powersell_frontend

본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다

 

---

Netlify 배포

Netlify는 React앱과 같이 GitHub에 있는 웹프로젝트를 배포할 때

더욱 쉽게 배포할 수 있도록 도와주는 Hosting 사이트다

때문에 Git/Github에 대한 기본적인 사전지식은 있다는 가정하에 배포를 진행해볼 것이다

 

 

우선 리디렉션 세팅을 위한 파일(netlify.toml)을 package.json 파일과 동일한 위치에 생성해준다

 

 

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/"
  status = 200

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

 

 

그 다음 해당 파일을 Github에 업로드해준다

# Github에 업로드
git add .
git commit -m "netlify.toml 생성"
git push origin master

 

 

이제 Netlify 사이트로 넘어가서 Github 계정으로 로그인한다

그리고 좌측의 Sites 탭에서 우측 상단의 Add new site를 클릭한 뒤 Import an existing project를 클릭한다

 

 

 

다음으로 deploy with github를 클릭한뒤 Netlify와 연동할 repository를 선택한다

 

 

 

 

다음으로 배포할 브랜치를 선택한다

 

 

 

다음으로 Base directory를 package.json 파일이 있는 주소로,

Build command를 CI= npm run build로 작성한 뒤

맨 아래에 있는 Deploy 버튼을 눌러 배포해준다

 

 

 

아래와 같이 모든 단계에서 Complete 상태가 뜨면 배포가 잘 된 것이다

 

 

 

좌측 탭의 Site Configuration을 통해 Site details 메뉴로 들어가서

Change site name 버튼을 클릭하면 Site name을 바꿀 수도 있다

 

 

 

여기까지 완료했다면 아래와 같이 해당 도메인으로 접속이 가능하다

 

 

 

재배포를 원한다면 Github에 코드를 업로드한  뒤

좌측 탭의 Deploys를 통해 우측의 Trigger deploy를 클릭하여 재배포를 진행하면 된다