기존 gh-pages로 배포하다가
react는 참 쉽게 되던대 nextjs가 잘 되지 않아서 이리 저리 검색하다가
nextjs를 만든 Vercel로 배포 해 보기로 함
# Vercel 은 Next.js에서 공식적으로 제공하는 호스팅 사이트 - 오픈 소스 react SSR 프레임워크.
1) package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"vercel-deploy": "next build && next export"
}vercel-deploy 를 추가 - 여기서 나는 npm run vercel-deploy 를 해야하는지 알았는대 그럴필요 없음 그냥 추가만 하기
2) Vercel 회원가입 후 배포하기
- Github Repository 를 연결하여 새로운 프로젝트 생성하고 푸시하기
- Vercel에서 배포하기- Vercel 로그인 후 우측 내 이미지 클릭 -> Dashboard -> Add New -> Project
- - import git Repository하여 내가 원하는 프로젝트 우측에 Import 클릭 -> 변경사항 없이 Deploy 만 클릭하면 됨
- 배포 완료 후 도메인 변경이 되나 무료 버전의 경우 원하는 이름. vercel.app 만 가능
- 도메인을 바꿨다면 깃허브 레파지토리에 가면 우측 About에 처음 설정된 도메인이 보이는대 그부분을 함께 변경해 준다
인프런 강의를 보고 만들어본 블로그 : https://sunnyblog.vercel.app/
도움받은곳 : https://daily-life-of-bigone.tistory.com/40
****새로 배우는건 뭐든 재밌고 짜릿하다 ****
+참고로 리액트 페이지나 뷰 등 다양한 프론트 페이지를 배포 할 수 있다고 하니 포트폴리오 등으로 사용하기에 괜찮을 것 같다.
****추가****
#api를 위해서 환경변수를 이용할경우
.gitignore로 인하여 깃허브에 올라가지 않으므로 vercel에서는 읽을수가 없다.
따라서 vercel Project Settings - Environment Variables 탭에서 환경변수를 추가해 줘야한다.
편하게 내 .env파일을 import 하면 쉽다.
Deployments 탭에서 재배포를 한다.
도움받은곳 : https://2dowon.github.io/docs/react/deploy-by-vercel/
#api 사용을 위해 rewrite 했을 경우
이것도 안돼서 애를 먹었는대 공식문서를 보니 api를 불러오는 내부에 그대로 쓰라고 해서 썼다.
배포시에 rewrite 하고 싶을경우에는 따로 vercel 설치 후 vercel.json 안에 또 작업을 해야한다.
단순 공부 목적이므로 저렇게 까지는 하지않았음
도움받은곳 : https://www.sanity.io/answers/how-to-fix-the-vercel-rewrite-rules-for-sanity
그렇게 만든 노마드코더를 보고 만든 싸이트 : https://sunnytvapp.vercel.app/
