[glitch/varcel] glitch 사용하여 라이브서버 만들고 varcel로 배포하기 /묵은 체증 내려간 varcel 배포 성공시키기 원인은 .env 였을까?!

< 작업 순서 >

1. glitch로 로컬에서만 사용했던 db.json을 라이브서버로 만들어주기

2. 프로젝트에서 .env 세팅, db통신부분 코드 바꿔주기

3. varcel을 통해 프로젝트 배포하기

 

 

---

1. glitch로 db.json 라이브 서버로 만들어주기

---

 

 

1. 글리치 홈페이지 접속 (https://glitch.com/)

Glitch: The friendly community where everyone builds the web

 

2. New project - Import from Github 클릭

 

3. 어떤 깃헙을 연결해줄거냐면, 아래 양식 고대로 클론해와서 db.json부분만 프젝 로컬에서 썼던 내용 고대로 복사해서 변경해주고 레포지토리 하나 판걸 연결해주기

(순서 : 아래 링크 깃헙 고대로 클론 -> db.json 만 내꺼 내용으로 변경 -> 깃헙 레포지토리 새로 생성해서 거따 올리기 )

https://github.com/jesperorb/json-server-heroku#deploy-to-glitch

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

 

4. share - Live site 복사!!

 

 

---

---

2. 프로젝트에서 추가 설정 순서

 

---

 

1.  env-cmd 깔아주기

**  env-cmd ? 실무에서 프로젝트를 개발하다 보면 각 환경에 따라 다른 변수 혹은 api 주소를 적용해야 하는 경우가 많아지는데 env-cmd 패키지를 통해 각 환경에 맞게 자동으로 환경변수를 불러와 적용할 수 있다고 한당

npm  install env-cmd 아니면 yarn add env-cmd 

package.json에서 "script" 의 start 부분에 env-cmd -f .env 넣어주기

 

2.  .env 파일 만들어서 REACT_APP_API 라고 상수 설정해주고, 데이터로 아까 생성했던 글리치 주소 넣어주기

 

 

3. 실제로 db 통신하고 있는 부분에 원래 localhost~~ 머시기로 되있던 부분 위에 작성해놓은 상수 붙여서 다 바꿔주기

( ⭐️백틱기호로 바꿔주는 것도 잊지말긔)

 

4. 바꾼 내용 깃헙에 최종 푸쉬 >.<

---

---

3. varcel 에서 배포해주기

---

 

 

1. varcel 들어가서 new project 클릭! -> 배포하려는 레포지토리 import 클릭

 

2.  이 부분에 Name에는 아까 프로젝트 .env 에서 썼던 상수명 / Value에는 글리치로 만들었던 라이브서버 주소 넣어주기

 

 

 

 

 

❤️ 배포 끄읕 >.< ❤️