중간 배포

https://ko.vitejs.dev/guide/static-deploy.html#vercel

Vite

버셀로 배포

 

문제발생

카카오 로그인이 안됨 구글 로그인도 안됨

카카오 로그인 버튼을 클릭 하면 

localhost:3000로 이동 됨

왜 여기로 가는가??????????

여기서 문제 해결 해보려고 시작

1. 카카오 개발자 내 앱관리에서 도메인 링크 및 Redirect URI등 확인

2. 수파베이스 Redirect URI등 확인

3. 다 정상적으로 값이 들어 간 것을 확인 했으나 같은 상황 반복

4. 코드를 수정

기존

async function signInWithKakao() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
  })
}

수정

const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "kakao",
        options: {
          redirectTo: `도메인.supabase.co/auth/callback`,
        },
      });

그런데도 해결이 안됨

 

코드 재 수정

 const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "kakao",
        options: {
          redirectTo: `도메인.supabase.co/auth/v1/callback`,
        },
      });

 

6. 수파베이스 콘솔 수정

Authentication의 URL Configuration의 도메인 을 추가 했더니 카카오 로그인이 정상적으로 되는 것을 확인

 

 

카카오 지도 api오류 남

1. 카카로 플랫폼 배포 된 주소 변경 하기

2. git에 올린 지도 관련 자바스크립트 키 확인

3. 확인 하니 정상적으로 잘 나옴

 

페이지 라우트 문제

첫 메인 화면 잘 보여짐

https:/test/index 에서 다른 화면으로 이동 https:/test/indexpage로 이동도 잘됨

문제는 이동한 페이지에서 새로고침 하면

404: NOT_FOUND
Code: NOT_FOUND
ID: icn1::86ksl-1717988079045-77e58937c4f8

페이지를 못찾는 오류가 뜸

Vercel 라우팅 설정: Vercel에서 서버리스 기능을 사용하여 프로젝트를 호스팅하는 경우,

라우팅 설정을 잘못 설정할 수 있습니다.

vercel.json 파일을 만들고 아래 코드 추가 라우팅 잘 되는 것을 확인

{
    "routes": [
      { "handle": "filesystem" },
      { "src": "/.*", "dest": "/index.html" }
    ]
  }

 

 

아래 홈페이지 참고

https://stackoverflow.com/questions/76742696/404-error-when-deploying-react-app-in-vercel