Glitch 에 json-server 배포한 과정

배경

이전에 작업해두었던 프로젝트를 시연하기위해서 서버가 필요했습니다. 같이 협업한 백엔드분들에게 서버를 켜달라고 부탁드리는 것은 다들 바쁘시기도 하고 분명히 에러가 날것이기때문에 귀한 시간을 잡아먹을 것이 뻔했습니다. 

 

따라서 혼자서 해결할 수 있는 방법을 찾아보았습니다. 개발환경에서는 msw 나 json-server, promise 와 setTimeout 을 사용해 fakeAPI 를 구현하는 방법이 있지만, 현재 저는 github page 를 사용하여 웹을 배포할 생각이기 때문에 개발환경에서 api 요청을 하는 방식으로는 문제를 해결할 수 없었습니다.

 

해결할 수 있는 방법은 다음과 같았습니다. (더 많을 것으로 판단됩니다.)

• json-server 를 heroku에 배포하기
• json-server 를 glitch에 배포하기
• postman mock Server 사용하기

heroku 는 유료화 되었기 때문에 패스했습니다.

그래서 postman 으로 mock Server 를 만들어서 사용했는데 이게 무료계정은 1000번 요청제한이 있었습니다. 

따라서 json-server 를 무료인 glitch 에 배포하기로 결정했습니다. 

 

배포 과정

https://github.com/jesperorb/json-server-heroku

GitHub - jesperorb/json-server-heroku: Deploy json-server to Heroku & Glitch & Azure

우선 위 템플릿을 사용했습니다. 

Use this template 버튼을 클릭하면 해당 템플릿을 사용할 수 있게됩니다.

 

이제 Glitch 에 접속하여 New project 를 클릭합니다.

 

import from GitHub 를 클릭하여 템플릿으로 만든 레포의 url 를 붙여넣기하면됩니다.

 

 

정상적으로 완료되었다면 아래와 같은 화면을 볼 수 있을 것입니다. 

 

그러면 만들어진 서버에 요청을 보내봅시다.

 

 

live site 주소로 요청을 보낼 수 있습니다. boards 의 데이터를 요청해보겠습니다.

 

정상적으로 잘 동작하는 것을 확인했습니다.

 

GitHub Action 사용하여 Sync 를 맞추기

하지만 아쉬운점이 있었습니다.

github 레포에 푸쉬를 했을때 Glitch 에 바로 반영이 되지 않는 것입니다.

아마 작업할 동안 수정사항이 많을 것인데, 일일히 지웠다 import 를 하는 과정은 너무 비효율적입니다.

 

따라서 GitHub Action 을 사용해서 자동화 해봅시다!

 

https://github.com/marketplace/actions/glitch-project-sync

Glitch Project Sync - GitHub Marketplace

저는 해당 액션을 사용했습니다.

 

해당 GitHub Action 을 사용하기 위해서는 Project ID 와 Glitch Auth Token 이 필요합니다.

이게 찾기가 꽤 힘들더라구요. 사실 이것때문에 이글을 썼습니다.

 

Glitch Auth Token

Auth Token 을 획득하는 방법은 다음과 같습니다.

 

Glitch 프로젝트 페이지에서 개발자 도구 - 네트워크 탭을 열어주세요.

그 후 auth 를 검색하시고 요청헤더의 authorization를 찾으면 auth token 을 얻을 수 있습니다.

 

 

Project ID

https://api.glitch.com/v1/projects/by/domain?domain=PROJECT_NAME

위 url 에 대한 정보는 해당 글에서 찾았습니다.

 

푸른색 글씨가 칠해서 PROJECT_NAME 에 import 하여 만들어진 프로젝트의 이름을 넣어주세요.

그럼 바로 화면에서 Project ID 를 얻을 수 있습니다.

 

YML 파일

이제 거의 다 왔네요. 

야믈 파일만 만들어 주면 자동화가 완성됩니다.

 

 

위 폴더와 파일을 만들어주세요.

 

아래 코드를 붙여넣기하세요.

name: Deploy To Glitch
on:
  push:
    branches:
      - master
    workflow_dispatch:
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy To Glitch
        uses: kanadgupta/glitch-sync@v1.1
        with:
          project-id: "${{ secrets.PROJECTID }}"
          auth-token: "${{ secrets.AUTHTOKEN }}"

아까 얻은 Auth Token 과 Project ID 는 secrets 로 관리하였습니다.

 

자동화 끝!

 

읽어주셔서 감사합니다. 제 글이 도움이 되었으면 좋겠습니다~!