영어하는개발자산가누렁이

22.4 Preview Deployments

바로 배포 시키기 전에 preview 할 수 있어야 하겠지?
깃에서 브랜치 따서 push 하면 알아서 배포가 된다.
일단  enter-message라는 이름의 깃 브랜치를 따자.

git checkout -b enter-message

그리고 코드 수정하고 바로 커밋하면

git add .
git commit -m "New Welcome Msg"
git push origin enter-message

브랜치에서 보낸 코드가 빌드 되고, 볼 수 있는 preview 도메인이 생긴다.
그리고 prod로 배포 하려면
promote to production 누르면 끝!



22.5 Limits in Vercel
https://vercel.com/docs/concepts/limits/overview

Edge Middleware Invocations는 middleware.ts임
한달에 100만회로 제한. 알아서 잘 활용해라.

아래로 가면 내 앱의 사용현황을 볼 수 있다.
https://vercel.com/dashboard/usage

근데 serverless function은 revalidate할 때도 카운팅 되기 때문에 조심해라.
https://vercel.com/docs/concepts/limits/usage#invocations

Vercel은 NextJS앱을 배포하는 플랫폼에선 압도적 1위임.

두가지 방식이 있다. NextJS를 활용 하는.
1. 풀스택 프레임워크 - api route, 미들웨어, 서버컴포넌트,image컴포넌트 등 전부 활용
2. getStaticProps 만 사용 - HTML을 생성하는 정적사이트 생성기(SSG)로 사용

2번의 경우 어디에 배포해도 상관 없음. 
1번으로 활용한 경우는 배포할 곳이 Vercel밖에 없음.Netlify, cloudflare, github pages, heroku도 안됨.
NextJS를 만든 곳이니까. 

이제 배포를 해보자.
1. Vercel 가입(github으로 가입하면 편함)하고 https://vercel.com/dashboard로 가자.
create a New Project 누르고

2. git을 import한다.

3. .env에서 사용하던 변수들을 아래에 입력한다.

일단 저기에 DATABSE_URL이 들어가야 하는데
Planetscale가서 보자. connect버튼 누르고. Prisma를 선택하고. 아래 스트링을 넣음 된다.

4. 그리고 빌드하면 에러가 난다.
환경 변수들 다 추가해서 고쳐주고,
빌드가 다 돼도 에러난다.
Uncaught SyntaxError: Unexpected token '<'
Uncaught SyntaxError: Unexpected token '<'
js,css로딩이 안된다. 미들웨어의 문제인듯하다.
stackoverflow 검색결과 middleware.ts파일에 아래를 넣어주니 해결 되었다.

export const config = {
  matcher: "/",
};

the problem is Next.js is making some request to /_next/* and you redirect request to the login page, those are requests are needed and are never finished. You need to avoid redirect any requests made to /_next/*
Next.js가 보내는 /_next/라는 리퀘스트를 내 코드가 login페이지르 리다이렉트 시켜서 그렇단다.
https://stackoverflow.com/questions/73229148/uncaught-syntaxerror-expected-expression-got-while-using-next-js-middlewar