[TIL] 221207

🔥 오늘 한 일

• Go!Street 개인 플젝 Heroku → fly.io 배포 마이그레이션
• [TS 플젝]
  • 16:40~18:30 플젝 회의 (무한스크롤 기능 등)
  • fly.io로 client&server 배포

🚨 Error Handling

🦋 fly.io를 이용하여 client & server 동시 배포하기

Heroku로 배포한 사이트를 fly.io 배포로 마이그레이션을 하면서 시간은 오래 걸렸지만 과정은 생각보다 심플한 것 같아서 빠르게 정리~!

brew install flyctl # mac에 flyctl 설치
flyctl auth signup # 회원가입
flyctl auth login # 로그인
flyctl launch # 설치
flyctl deploy # 배포

# 환경변수 설정
flyctl secrets set MONGO_URI="mongodb+srv://~~"
flyctl secrets list # 설정한 환경변수 목록 확인하기
# 원랜 값을 적을 때 따옴표를 안 적어도 되는데 db 링크는 길어서 그런지
# 따옴표 안 쓰니까 계속 환경변수 설정이 안되서 여기서도 좀 헤맸다,, 

fly.io로 배포하는 과정에서 시간이 꽤 걸렸다.. 그래서 배포 성공되길 기다리다가 Dead 글자를 봤을 때의 심정은 참,, ㅎ

많은 에러들이 나서 몇번이나 다시 배포 시도를 했었는데 그 중 아래와 같은 에러의 경우 fly.io에 mongoDB에 대한 환경변수를 설정해주지 않아서 당연히 에러가 날 수 밖에 없던 것임,,🥲

계속 삽질하다가 먼가 진행되는 것 같은 나쁘지 않은 이 느낌 때문에 개발자가 되고 싶은 걸 수도,, 🙉
에러 날 때마다 조금씩 수정하다 보니까 드뎌 1 healthy successfully !! 😭

✚ 일반적인 배포 성공하고 github에서 push할 때 자동 배포화까지 하고 싶어서 github workflows 설정도 해주었다!

1. flyctl auth token # token 발급 (터미널에 명령어를 치면 토큰을 발급해준다!)
2. Github repository -> Setting -> Aecrets -> Actions
	1번에서 발급받은 token을 FLY_API_TOKEN 이름으로 설정해두기
3. 루트 폴더 아래에 .github/workflows/fly.yml 파일 추가

# .github/workflows/fly.yml

name: Fly Deploy
on:
  push:
    branches:
      - dev
env:
  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
jobs:
  deploy:
      name: Deploy app
      runs-on: macos-latest
      steps:
        - uses: actions/checkout@v3
        - uses: superfly/flyctl-actions/setup-flyctl@master
        - run: cd App && flyctl deploy --remote-only
        # fly.toml가 있는 경로까지 이동해줘야 찾을 수 있음
        # 첨엔 cd App 명령어 없이 실행시키니까 fly.toml 파일을 찾지 못했음,,

배포 성공 유무에 프로젝트 폴더 구조도 꽤나 많은 비중을 차지하는 것 같다,, 폴더 구조가 어떤지에 따라 배포가 실패하기도 하고, 폴더 경로도 주의하기..!

🧚 새롭게 알게 된 내용

무한 스크롤 구현 방식은 여러개가 존재한다. 순수 기능을 구현하는게 좋은건지 라이브러리를 사용하여 구현하는게 좋은건지,, 🤔

🔗 [kakao enterprise] 실제 Infinite Scrol with React

1. Scroll Event
2. Throttle
3. requestAnimationFrame
4. Intersection Observer API

👀 MEMO

🚀 github environments deploy 기록 삭제하기

계속 이것저것 배포 시도하다가 수많은 배포 실패 흔적이 깃헙 플젝에 남아서 먼가 다 없애버리고 싶었다,,ㅋㅋ 그래서 방법 찾아보다가 아래 삭제해주는 라이브러리가 있길래 설치한 후 실행시켜서 아래와 같이 repository 선택한 후 삭제해주었다!

npm i delete-github-environment
npx delete-github-environment

✍️ Diary

Heroku가 유료 전환되면서 기존에 배포했던 사이트도 막혀서 대체할 서비스를 찾아봤는데 처음엔 Koyeb으로 재배포 시도를 해봤다. 근데 몇 시간동안 계속 배포 실패해서 다른 서비스를 찾아보다가 fly.io로 배포를 시도해봤다.
fly.io도 계속 error나고 몇시간 동안 삽질했는데 개인 플젝은 github action으로 자동 배포화까지 성공했는데 팀 플젝은 또 머가 잘 안된다,,ㅜ 낼 다시 해결해보자아..
오늘은 배포만 하다가 하루가 지나간 날,, 🥲