JSON-server로 만든 JS 프로젝트를 GitHub 으로 배포하려고 했는데 되지 않았다.
📌 github pages는 static website 정적 사이트만 배포가 가능해서 json-server는 정상적으로 동작하지 않는다고 한다.
구글링해보니 JSON-server 프로젝트는 Heroku로 대부분 배포하는 것 같은데 작년에 유료로 전환되었다고 …
그래서 서버 + 호스팅이 가능한 firebase로 프로젝트를 배포해보기로 했다.
📍Firestore Database 만들기
- Firestore Database 만드는 방법은 아래 포스팅 참고
[새싹 프론트엔드] 221212 TIL-2 - React(13) Firebase
원래 이렇게 생겼던 JSON 파일을 DB에 넣어준다.
📍프로젝트에 Firebase 설치
- 코딩애플 영상을 참고하여 Firebase를 설치했다.
서버지식없이 당근마켓 만드는 법 (Firebase로 만드는 당근마켓 2시간컷)
Firebase를 설치하면 public 폴더가 생기는데, public 폴더 안에서 다시 작업하면 된다.
- public 폴더 안에 생긴
index.html파일에 원래 프로젝트의 index를 복붙 - 태그 맨 아래에 firebase 스크립트 추가 (프로젝트 설정 - 프로젝트에 Web 앱 추가하면 나오는 SDK 코드 붙여넣기)
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script> 
-
이렇게 하면 firebase DB와 프로젝트가 연결된다.
📍JavaScript 코드 수정
-
firebase 공식 문서를 참고하여 JSON-sever에서 데이터를 요청/전송하는 코드를 전부 Firebase 코드로 수정해주었다.
- 데이터 요청 코드 수정
👉 수정 후
- 데이터 저장 코드 수정
👉 수정 후
📌 새로운 데이터를 입력받아 저장 후에 새로고침하여 업데이트를 하고싶었는데 계속 정보가 저장되기 전에 새로고침 되었다. then을 사용해 비동기로 처리해주니 데이터 저장 후 새로고침이 잘 되었다.
- 모달 데이터 요청 코드 수정
👉 수정 후
📍Firebase Hosting으로 배포
- firebase 빌드 - hosting 추가
- 터미널에
firebase deploy입력해 배포
$ firebase deploy→ 수정할때마다 firebase deploy 명령어를 입력해주면 수정본으로 배포가 되고, 배포할때마다 출시내역에 history가 쌓인다.
🌱 FE