🛠️ Swagger UI와 Firebase를 이용한 API 문서 작성

🛠️ Swagger UI와 Firebase를 이용한 API 문서 작성

오늘은 회사에서 선배들과 동료들과 진행하고 있는 서브프로젝트를 진행하면서 선배님의 권유로 Swagger UI를 사용하게되었습니다. 제 역할은 파이어베이스로 펑션을 만드는 역할인데요. 그래서 API 관련 서류를 만들어야하는데 처음에 GitLab에 MarkDown으로 Api서류를 만들다보니 제대로 정리가 안되고, 시간도 많이 걸리게되어서 같이 프로젝트하는 리더이신 선배님께서 Swagger UI를 사용해보라는 권유를 통해 일단 설치하고 파이어베이스 호스팅하는 것을 정리해볼께요.

💻 Swagger UI 설치 및 실행

여러가지 방법이 있지만 저같은 경우에는 환경은 일단 mac기준이고 저는 깃에서 클론을 해서 Swagger UI를 받아서 사용했어요. 아래는 이를 위한 과정을 단계별로 나열한 것입니다:

1. Git을 사용하여 Swagger-UI 저장소를 클론하세요:
   git clone https://github.com/swagger-api/swagger-ui.git
2. 클론한 디렉토리로 이동하세요:
   cd swagger-ui
3. 웹 서버를 설치하고 실행하세요. 예를 들어, Node.js를 사용하는 경우, http-server를 사용할 수 있습니다:
   npm install -g http-server
http-server dist
4. 이제 필요한 JSON 또는 YAML 파일을 dist 디렉토리로 복사하세요:
   cp ../path/to/swagger.json dist/
cp ../path/to/swagger.yaml dist/
5. 마지막으로, dist폴더 내의 index.html을 편집하여 url 속성을 swagger.json 또는 swagger.yml 파일에 대응하게 변경하세요. 변경 후 저장해야 합니다.

이제 웹 페이지에서 나만의 Swagger 문서를 확인할 수 있습니다. 로컬 웹 서버를 종료하려면 터미널에서 Ctrl + C를 누르십시오.

🔥 Firebase 호스팅 설정 및 사용

Firebase 호스팅을 설정하고 사용하려면 다음과 같이 진행하세요.

1. 먼저, Node.js와 npm이 시스템에 설치되어 있는지 확인하세요. 설치되어 있지 않다면 nodejs.org에서 다운로드 및 설치할 수 있습니다.
2. Firebase CLI를 글로벌로 설치하세요:
   npm install -g firebase-tools
3. Firebase 프로젝트를 만드세요:
   Firebase 콘솔에서 '새 프로젝트 만들기'를 클릭하여 프로젝트를 생성하세요.
4. 이제 로컬에서 Firebase에 로그인하세요:
   firebase login
5. Firebase 설정 파일을 초기화하세요:
   firebase init
6. 이제 Firebase에 배포할 파일들이 있는 폴더인 dist 폴더로 이동하세요. 해당 폴더 안에는 index.html 파일이 있어야 합니다.
7. Firebase에 배포하세요:
   firebase deploy

배포가 완료되면 URL이 생성되어 배포된 웹 애플리케이션을 접근할 수 있습니다. Firebase 호스팅을 통해 Swagger UI를 제공할 수 있습니다. URL은 보통 https://<project-id>.firebaseapp.com 또는 https://<project-id>.web.app 형식으로 제공됩니다.

다음에는 Swagger UI를 사용해보고 사용법에 대해서 올려보도록 할께요^^