🚀 Start

일단 쇼핑몰에 필요한 상품 CRUD, 장바구니 기능 정도까진 모두 갖췄다. UI 디자인은 배포 이후에 해보도록 하고 우선 배포부터 진행해보자.

늘 이 단계에서 막혀서 완성(?)된 프로젝트들을 개발까지만 하고 그쳤는데, 이번엔 한번도 안써본 Vercel과 Heroku를 이용해보자.

✅ 생각 정리를 좀 해보자면...

• graphql을 처리하기 위한 서버로 Heroku

• 데이터를 처리하기 위한 서버롤 Firebase

• Client를 처리하기 위한 서버로 Vercel

을 사용한다고 보면 될거 같다.

따라서, Vecel 입장에서는 서버로 Heroku를 바라봐야하고, Heroku 입장에서는 클라이언트는 Vercel를 바라봐야하며, 서버는 Firbase를 바라봐야하는 상황인 것 같다.

Client Deploy

✅ Github Repository의 쇼핑몰 프로젝트를 가져와 import

✅ Deploy 후 Visit 클릭시 프로젝트 사이트 오픈

✅ 자동적으로 변경에 대한 빌드 설정

✅ 빌드 진행 및 커밋

• 다음과 같이 명령어 입력하면 dist 파일 생성
• 그 뒤로 리포지토리 커밋만해도 자동적으로 변경되는 것을 확인

"build": "tsc && vite build"

✅ development, production 구분

개발할때의 URL과 배포시 사용할 URL을 구분하기 위해 env파일 생성후 불러오기

const BASE_URL = import.meta.env.VITE_SERVER_URL as string;

Server Deploy

✅ Github Repository와 연동

✅ 빌드 진행

"serve": "npm run build && cross-env NODE_ENV=production node ./dist/index.js"

✅ Confifure variables 설정

✅ development, production 구분

• 개발시 클라이언트 URL은 https://localhost:5173, 배포시에는 앞서 생성한 Vercel URL인 https://pjh-shoppingmall.vercel.app로 설정

✅ Github Repository 변경에 따른 자동배포 설정

✅ 빌드 진행후 배포 완료 확인

😰 Vite에서의 env파일

도대체 왜 안되는거야!!!!!!

Vite의 경우 process.env로 불러오는 대신 import.meta.env 객체를 이용해 환경변수에 접근할 수 있도록 하고 있다.

클라이언트에서 에러는 다음과 같다.
Typescript 에서 사용을 하려면 유형정의를 제공해줘야한다는 말인 것 같다. 따라서, env.d.ts파일에 개별적으로 env파일에 대한 타입정의를 해주었다.

서버에서는 env파일을 아예 불러오지 못해서 일단 firbase에 대한 api key와 같은 정보를 가진 firebase.js는 git ignore해놓은 상태이다.

이부분은 추후에 다시 해결해봐야겠다.

👍 Finally...

위의 과정을 모두 완료하고, Vercel에서 생성한 프로젝트 url로 접속하면 이제 서버의 데이터까지 들어온 것을 확인할 수 있었다.

이제 UI Design을 입혀보자.

그리고 다음과 같은 부분들을 추가 및 해결해야한다.

> ✔️ 상품 업로드시 orderby로 정렬시키기 (error 해결하기)
✔️ admin 페이지 인증처리하기
✔️ 이미지 파일 업로드하기
✔️ 무한스크롤 버그 해결하기
✔️ 장바구니 상품 삭제 에러 해결하기
✔️ Vite env 동작 에러 - 임시로 firebase파일 ignore
✔️ 배포사이트 타이틀, 이미지 변경
✔️ 로딩 UI 추가하기