Vercel SPA Fallback

 

 

1. 사이트 들어가기

https://vercel.com/docs/projects/project-configuration

Configuring Projects with vercel.json

2. ctrl + f 로 fallback 검색

3.Legacy SPA Fallback 찾기

4. 위 파일 복사 후 내 프로젝트에 추가하기

5. 그럼 npm run vercel로 로컬서버에서 실행했을 때 동작이 되지 않는다. - 새로운 문제

vercel을 통해서 서버를 열었을 때와 vitejs 내부에서 동작하는 서버가 충돌이 발생했기 때문에 문제가 생긴 것이다.

이를 따로 서버를 열어서 vitejs 서버를 이용해야한다.

6. vite.config.ts에 아래 코드 추가

- vitejs에서 vercel의 서버리스 함수를 사용할 수 있도록 하는 것이다. 

- target에 있는 주소가 vercel의 주소다(즉 vercel서버도 오픈해야한다(npm run vercel을 켜야함))

7. 두 개의 터미널을 열고 npm run dev와 npm run vercel을 같이 동작시킨다.

- 두 개의 서버를 같이 키고, vitejs의 주소를 들어가면 정상적으로 작동한다.

- proxy라는 옵션으로 두 서버를 연결한 것이다.

8. 패키지 concurrently로 두 개의 스크립트를 한번에 실행 시킬 수 있다.

- npm i -D concurrently

-pakage.json에 아래와 같이 입력

 

- npm run dev시 watch- 로 시작하는 스크립트를 모두 실행함

- --listen 2999는 포트를 바꿔줬음. 300번 포트는 개발서버로 자주 사용돼서