내일배움캠프 React_7기 TIL - 35. 심화주차 개인과제 트러블슈팅

선·2024년 11월 28일

내일배움캠프_React_7기_TIL

목록 보기

35/40

이번 프로젝트 후기

할 일을 너무 많이 주신다 ....
난 이제 지쳤어요
쌓여가는 할일과 과제 & 개인사정으로 인한 심신미약 상태까지
과제에 완전히 집중 못했음을 솔직고백합니다
썸바리헤엎미

json-sever 배포 (glitch)

로컬 json-server을 생성하여 MBTI 테스트 결과를 저장하고 있었다.
프로젝트를 vercel로 배포한 후, vercel에서도 정상 작동하도록 하기 위해선 json-sever도 배포해야 했다. 가이드에 따라 glitch에 json-sever을 배포하였다.

배포 과정

json-sever 배포를 위한 폴더 생성 후, pakage.json 파일을 생성한다.

npm init -y

server.js 파일을 생성한다. 이 파일은 JSON Server을 사용해 로컬 API 서버를 생성하는 Node.js 스크립트이다. JSON 파일인 db.json을 데이터베이스처럼 사용하여 RESTful API를 빠르게 생성할 수 있도록 도와준다.

// server.js
const jsonServer = require("json-server"); //json-sever모듈 가져옴
const server = jsonServer.create(); //서버 인스턴스 생성
const router = jsonServer.router("db.json"); //라우터 생성 및 db.json파일에 연결. 해당 파일의 데이터를 RESTful 엔드포인트로 자동으로 변환
const middlewares = jsonServer.defaults(); //기본 미들웨어 설정

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log("JSON Server is running");
});//서버 실행, 서버가 포트 3000에서 실행되며, 콘솔에 "JSON Server is running" 메시지를 출력.

이후 사용할 db.json 파일을 만든다.

{
  "testResults": [] 
}

package.json 파일에 scripts 설정

{
	"scripts": {
    "start": "node server.js"
  },
	"devDependencies": {
    "json-server": "^0.17.4"
  }
}

설정된 json sever 폴더를 github repository에 push한다.
이후 glitch 회원가입 후, 해당 repository를 import하면
상세화면 우측상단헤더에 Share → Live site 주소 가 나온다.
해당 주소를 복사해서, baseURL의 주소를 변경해줬다.

// axios 인스턴스 생성
const axiosInstance = axios.create({
  // baseURL: "http://localhost:5000/testResults",
  baseURL: "https://######-######-library.glitch.me/",
});

이후 vercel에서 테스트해보니 json-sever을 사용하는 기능은 에러가 발생했다.

code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 404"

왜일까... 특별히 따로 설정해줄 수 있는 것이 없었는데
문제는 간단했다.

https://######-######-library.glitch.me/ 를 baseURL로 하면 안되고

https://######-######-library.glitch.me/testResults 로 해줘야 했다...

여기서 다시보는 db.json