현재 노트: KR-110.50 b 명언 내보내기 프로젝트 Vercel Functions으로 serverless로 관리하기 및 쿼리방법
상위 분류: KR-110.50 명언 내보내기 프로젝트

#개인프로젝트

정적 사이트이 한계로 기획의도를 도려하여 무료, 운영 관리가 필요없는 인프라로 Vercel Functions라는 서버리스 인츠라를 선택했다.

해당 인프라를 선택한 이유는 위의 조건과 기획을 고려한 동적 사이트이기 때문이다
추가로 현재 Vercel을 통해 블로그를 무료 호스팅하고 있기 때문에 아는 플랫폼인만큼인 이유도 있었드.

그리고 처음에 꺼려했던 이유는 Vercel 을 위해 따로 공부를 하기는 꺼러졌기 때문이다. 예전에 호스팅하면서 보이지 않는 부분 파일처리 라우팅 일일 한계등 때문에 고생한 적이 있었기에...

처음에 한 것은 Vercel Functions설정
초기 설치하기의 경우 웹 상에서 대부분 나오기에 따로 설명하지는 않겠다. 잠깐 설명하자면 이 서버리스 플랫폼을 사용하기위해 api라는 폴더를 만들고 라우팅경로이 해당하는 파일을 만들 필요가있었다
그림 참고

여기서 중요한 것은 사실 vercel.json이었다. 기본적으로 api route는 단 1곳을 쓰기에 / 경로를 원하는 api 경로로 고정 시켜즈는 것이 바람직하다거 생각했다.

설정 파일

{
  "rewrites": [{ "source": "/", "destination": "/api/quote" }],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}

rewrites 를 통해 유저의 api사용은 편하게 동작하게 만들기
cors 설정을 위해 옵션 설정

기본적으로 진입시 모든 리스트가보이게하기

기본 서버 세팅이 필요했다. 처음에는 모든 리스트가 보이는 홈화면과API가 동작하는지 확인을 위한 기존의 id쿼리를 받았을 때 해당 객체만 반환하기를 테스트해보았다

완료

쿼리시에는 특정 단어가 포함된 단어 검색시 해당 객체만 보여주게하기

기존

고유 id기반으로 id 가 일치하는 데이터를 response

수정

?content라는 쿼리값을 받아서 해당 값과 data의

모든 id의 값이 보였지만 기획에서 수정 될 필요가 있었다. 기존의 id의 경우 uuid4이기에 이를 외우거나 검색하기에는 매우 힘들다. 그래서 어떻게 검색할까를 고민 해봤을때 기존의 content에 표시되는 값의 일부를 쿼리 형태로 받는 방법으로 구현해보기로 했다.

구현자체는 간단했다
함수사용

여기서 주의할 점은 클라이언트에서 검색시의 쿼리값이 api 쿼리값으로 잘 전달되는지가 중요했다.
그래서 예외처리 여러개함

POST와 DELETE의 불가능

현재 진행중인 동적 사이트의 관리와 확장을 위해선 data.json을 손쉽게 조작하려고하였다. 원본은 GitHub의 remote파일인데, 결론적으로 이를 수정하는 것이 불가능했기에 포기하였다.

유저 -> vercel서버 -> GitHub 서버

여기서 유저 -> vercel서버 이 단계에 대하여 원칙적으로 post와 delete 메소드가 동작하지 않았기 때문이다. 어떤 수정의 형태를 허용하지 않기에 이는 Vercel이라는 회사의 정책이기에 바꿀수 없는 부분을 확인하였다.