너무 많은 일이 있었지만, 에러로그라던지 차차 천천히 하나씩 올려보도록 하겠다.
팀원 현황
- 백엔드 & ai 프롬프터 1
- 프론트엔드 & PM & 배포 1 (나)
- 디자인 & 프론트엔드 & 퍼블리셔 1
이렇게 총 3명이서 진행했다.
프로젝트를 진행하면서 배포를 진행할 때 여러가지 플랫폼을 고려해보았는데, vercel과 netlify가 후보였었다.
최종적으로 선택한건 Netlify였는데, 그 이유는 다음과 같다.
- 만약 당신이 github 기준, team organization을 파서 따로 repo 진행을 했다면 유료로 해야한다.
- netlify는 일정 금액까진 무료로 지원해준다.
- 우리 서비스는 아직 확실하게 유저가 없다. 말 그대로 지금까지 한 프로젝트를 테스트배포하는 것에 가까웠기 때문에, 일단 가볍게 접근할 수 있는 서비스가 필요했다.
프론트 기준으로 배포하는 과정은 다음과 같았다.
- 서버와 연결
- .env 파일에 서버 api 키를 비롯해 카카오 + 구글 api키를 적어두었다. 이를 배포하기 전 netlify 사이트에 적어야 한다.
- pwa 파일을 시험 다운, 웹에서 Npm build를 하고 로컬에서 돌려본다. 이상이 없다면 사이트에 업로드할 준비가 다 된 것이다.
- 대폭 경로 수정 및 eslint 문법 + 예외 처리
- _redirects 파일 추가 << 이게 진짜 중요하다..!!
일단,
로그인한 Netlify 사이트에 들어가 나의 대시보드에서 이런 식으로 가장 위에 있는 존재하는 프로젝트 불러오기를 누르면 된다.
깃허브를 대충 불러오고 너무 어지러워하지 않아도 된다.
site configuration에 들어가면 모든 게 해결 되니까!
간단하게 사이트 명과 사이트 주소를 선택할 수 있다.
우리 서비스 이름은 여로이기 때문에 yeoro.netlify.app으로 꽤 레어한 주소를 얻을 수 있었다.
공모전 제출을 포기하고 천천히 개발하며 핫픽스를 하기 위해 auto publish를 꺼두었다.
pwa가 배포를 하기 위해선 웹과 동일하다. 크게 달라질 바는 없으나
위와 같이 .env 파일에 정의한 키들을 사이트에 동일하게 올려줘야한다.
어차피 깃엔 .env가 올라가지 않기 때문에 사이트에 등록해주는 것이다. (.gitignore 해뒀기 때문..)
1. site configuration - build&deploy
우린 여기서 세팅을 할 것이다.
차례대로
base directory : /,
build command : npm run build,
publish directory : /build,
build status : active
이렇게 진행했다.
2. .env 키는 어디서 등록해야 할까?
바로 environment variables > Environment variables에서 진행합니다..
꼭 .env 파일과 동일해야 한다..! 그래야 똑같이 돌아갈 수 있을테니..
3. 미친 것 같은 eslint와의 싸움..
지옥..이었다..
크게 생긴 문제점 3가지
__WB_MANIFEST 파일명 자체에서 eslint 오류가 나 빌드 불가
-> 직접 .eslintrc.json 파일에
"no-underscore-dangle": ["error", { "allow": ["__WB_MANIFEST"] }],를 추가했고, service-worker.ts의 코드에
/* eslint-disable no-underscore-dangle */
/* eslint-disable prefer-regex-literals */를 코드 바로 위쪽에 직접적으로 추가하여 예외처리를 추가로 진행했다.
Uncaught SyntaxError: Unexpected token '<'
-> 단순 라우팅 문제.
_redirects 파일을 추가한 후, Netlify에 다시 배포하면 SPA에서 라우팅 이슈 없이 모든 경로가 index.html로 제대로 처리된다.
/* /index.html 200- frontend/public/_redirects 파일을 생성하고 위의 내용을 추가.
- git add, git commit, git push로 변경 사항을 GitHub에 반영.
- Netlify가 자동으로 변경 사항을 감지하고 재배포.
401 Unauthorized - HTTP
-> index.html에 적혀 있던 %PUBLIC_URL% 을 /public/으로 일괄 변경 후
변경 전 : <link rel="manifest" href="/manifest.json"/>
변경 후 : <link rel="/manifest" href="/manifest.json"/>와 같은 경로 변경을 통해 해결했다.
최종 배포한 사이트: https://yeoro.netlify.app/
아직 기능 추가할 것도, 건드릴 것도 추가적인 회의를 통해 진행할 것 같아 조만간 닫아둘 예정이다...!
완벽해진 다음 다시 재배포를 하거나 핫픽스를 통해 꾸준히 업데이트 해보겠다!
