Sveltekit - Firebase elmulator 로 Functions 기능
배포전에 테스트하기
매번 배포를 하면서 테스트하기엔, 1~2분을 기다려야하는 불편함이 있고,
코드를 잘 못 짜서, 무한루프에 걸려버리면 비용이 과다청구될 수 도 있다고 하여,
에뮬레이터로 배포전에 빠르고 안전한 테스트가 가능하다고 한다.
그래서 Functions 를 더 활용하기전에 Emulator 를 다루는 것을 먼저 익혀보려고한다.
에뮬레이터에 대한 학습은
페이지를 통해서, 진행했다.
공식 유투브 영상도 있다.
영어자막이 달려있어서, 한국어 자동번역 기능을 켜놓으면 거의 완벽한 한글자막으로 볼 수 있다.
Could not spawn `java -version`. Please make sure Java is installed and on your system PATH
그런데, 진행중 위와 같은 에러가 났다.
해당 내용에 대해서 설명을 찾을 수 없어서,
GPT에게 물어봤다.
위 블로그를 참고했다.
설치가 잘 된 것을 확인
이제 firebase 에뮬레이터 명령어가 잘 먹겠지?
안되넹;;
VScode 를 껐다가 다시 켜서 하니, 일단 설치가 잘 된것을 확인
오 실행 잘 된다잉~
잉 근데,
접속이 안된다. ㅠㅠ
내 기본 emulator 포트는 4000 이 아니고 5454로 되어있는데,
접속이 안됨.
webframeworks 툴이 아직 베타 라서,
에뮬레이터가 지원이 안되고 있는 것 같다.
Firebase 의 webframeworks 지원 기능이 4일 전에 출시되었는데,
Emulator 실행과정에서, 나와 같은 문제를 호소한 글들이 보였다.
안내 페이지이에 대문짝만하게 저 웹프레임워크는 표시를 한거 보니
저 웹프레임워크 들은 emulator 가 잘 작동하나보다?
ㅜㅠㅜ
신기능이 단점은, 미지원 기능들이 있다는거
ㅠㅠ 아숩네 어제까지만해도 기뻤는데
일단 뭐 emulator 로 테스트하는 것은 미루고,
콘솔로 매번 deploy 해서, 해야겠다.
Next.js 처럼 Sveltekit 도 유명해졌으면...
비인기라 불리한게 좀 많다 아직.
아.. React랑 Next.js 를 배워야하나 ㅎㅎ...언넝 sveltekit 도 emulator 가 됐으면
Firebase - Functions / 썸네일 생성하기 (이미지 리사이징)
위 공식 깃허브 문서를 통해 진행했다.
sharp 라는 이미지 재생성 라이브러리를 사용하는데,
꾀나 유명한 라이브러리더라.
ImageMagick 보다 4~5배 빠르다고 ㄷㄷ와웅.
찾다보니, Jimp 라는 라이브러리도 있었다.
뭐 이런식으로 이미지관련 유명한 라이브러리를 npm 사이트에서 확인할 수 있었다.
일단 sharp 라이브러리를 설치해야했는데
설치에 앞서, 이해가 안갔던 개념을 GPT에게 물어봤다.
|
npm 설치를 할 때 dependencies로 설치하는게 뭐가 달라
|
|
그냥 npm i 로 패키지를 설치하면 package.json 파일에 해당 패키지 정보가 추가가 안돼?
|
|
npm i -D 패키지이름 이렇게 하는것도 같은거야?
|
|
--save 랑 같은 축약형 명령어는 뭐야
|
ㅇㅎ... 그럼나는
npm i sharp -S 로 설치를 해야겠군
설치 완료
근데 궁금해서 삭제하고, npm i sharp 로만 설치해봤다.
package.json에도 파일 정보가 들어가 있는것을 볼 수 있다.
뭐여 --save로 안하면 추가안된다매
GPT한데 다시 물어봤다.
|
그냥 npm i 패키지이름 으로 설치해도 --save 로 설치한것처럼 package.json에 패키지 정보가 추가되던데?
|
뭐여 .. 그런거였어?
진작에 그렇게 말하지 그럼
ㅡㅡ;
아무튼 sharp 패키지 설치하고 다음거 진행
근데 예제코드에서, 저렇게, v2storageSDK 라는 말이 있었는데
기존에 작성했던 storage 접근 함수랑 다르게 생겨서,
확인을 좀 해봤다.
시험용이라고 한다.
기능이 변경될 가능성이 있다는 얘기
해당 내용을 확인했다.
★Cloud Firestore 에 대한 트리거는 지원하지 않는다는 내용은 좀 인식을 해야할 거 같다.
뭐 일단 예제코드에서 Function 2세대를 사용하니 이것의 맛을 보기로한다.
코드를 보다가 join 함수가 있는데 뭔지 몰라서, GPT에게 물어봄
굿 설명 참 잘해 ㅋㅋ
예제코드가 주석처리가 정말 깔끔하게 잘되어있어서, 이해하기가 넘 편했다.
테스트를 위해 deploy 실행
에러가 뜨면서 취소됐다.
뭐지
function 이 실행되는 지역이 us-central1 로 기본설정 되어있어서 발생한 문제같다.
지역을 설정해주는 코드를 추가해야할 거 같다.
공식 설명서 찾아보는데 어디에 해당 내용이 있는지 몰라서 좀 헤매다가 GPT한테 물어보면 혹시 답을 알려줄까 싶어 물어봄.
오.. 그래?
지역을 추가해줬다. GPT가 하도 거짓정보가 많아서 밑져야본전이라는 생각에 일단 해봄
130:3 error Missing trailing comma comma-dangle
라는 에러가 났다.
eslint 의 검사기능 때문에 발생한거
여기 , 콤마가 없다고 그런거다.
괜히 functions 설치할 때 eslint 사용한다고 해가지구...
이게 귀찮은게
콤마 만들어주고 저장하면, prettier 때문에 콤마가 다시 자동 삭제되고 저장된다.
prettier 설정에서 콤마가 삭제되지 않도록 해줘야겠다.
근데 여기 prettier 설정에서 해당 옵션 추가해줬는데도 계속 콤마가 사라지길래
어떻게 해야하나 알아보다가.
eslint 에서 컴마가 없어도 되도록 설정을 바꿔주는게 더 빠르고 깔끔하다고 판단.
GPT에게 물어보고 설정해줬다.
굿!
이제 다시 deploy!
이런 경고과 함께 에러가 또 나왔다.
2세대 function 을 처음 사용할 때는, 세팅이 좀 필요하다고, 몇분뒤에 다시 deploy 해달라고 한다.
한 5분 지나고 deploy 했는데 또 저런다.
10분 지나고 deploy 해봤다.
오 잘 넘어가는 모양새?
에잉... 에러가 또나왔다. 해당 설명 url 들어가니 컨테이너 docker 어쩌구 하는데...
하 아무래도 이거 세팅하는데 시간좀 더 걸리는거 같아서, 기다렸다가 하면 될거같아서
한 5분 더 기다렸다가 다시 deploy 해봄.
오오 굿!!!
되었따!
한 15분 기다려야 되는거였구만.ㅋㅋㅋ....
그래도 자동으로 알아서 쫙쫙 진행되니 마음은 편함.
이제 썸네일 만드는거 테스트를 해보자.
내가 storage 에 이미지를 업로드하면, 썸네일이 생성되는거라구!
이미지 업로드했는데도, 썸네일 파일이 생성되지 않아서,
콘솔 들어가서 확인... 읭...
배포시간 보니까, 세팅 다 되지 않았을 때 내가 배포해서 생긴 함수였다.
CLI 에서 지우고 다시 배포하면 될 거같다.
위 내용 참고해서, 삭제
경고에 빌드된 이미지들은 수동으로 삭제를 하라고 해서,
안내해준 링크들어가서,
삭제해줬다.
콘솔에서 삭제된것 확인
그리고 다시 deploy 해줬다.
하 쉽지 않네잉~~~
그래도 동일한 에러가 발생했다.
그래서 버그리포트에 제보를 넣었다.
에혀..
그리고 튜토리얼 페이지 링크 주소가 이상하게 되어있어서. 이것도 commit 했다.
확인하고 승인해주겠지머.
음.. V2 방식으로 다른 예제해보고 안되면, v1으로 가야하나 생각을 했었는데,
예제들이 v1 방식이 많이 있어서, v1으로 구성해야겠다.
어차피 v2는 베타라서, 쓰진 못 할 것 같다.
https://github.com/firebase/functions-samples/tree/python-ci/Node-1st-gen/quickstarts/thumbnails
1세대 코드로 다시 썸네일 만드는 과정을 진행했다.
기존 코드에 추가로, region 을 firebase 설정 지역에 맞게 넣어줬다.
야심차게 deploy 해봤으나 에러가 났다. 슈바아알
그럼 그렇지..
ㅜ
이번에는 또 뭔 에러냐
아.. 이거 때매 그런거였어...
내가 sharp 패키지를... functions 폴더에서 설치한게 아니고,
루트 폴더에서 설치했네....ㅋㅋㅋ...
이거때매 그렇구만.
functions 폴더로 가서 패키지설치....
ㅋ...
이제 되겠지?
deploy 다시 시도
오 에러 없이 잘 됨.일단
콘솔 Funcitons 에도 잘 들어가있다.
파일 올리니, 썸네일이 같은 폴더안에 생성되어있다!!! ㅇ우아아아아 대박!
어? 그러면 2세대 코드로도 가능한거 아녀?
sharp 패키지가 functions 폴더에 설치 되어있지 않아서, 그런거였나?
냉큼 2세대 코드로 교체해서 deploy 해봤다.
역시 동일하게 region 을 설정해주었다.
오씨.. 에러 없이 잘들어가잖아?
바로 이미지 업로드 해봄
썸네일 생성이 잘 되어있는 모습 미쳤다..ㄷㄷㄷ...
Functions 로 썸네일 만들기 성공!
와.. 깃허브 버그리포트 한거 내가 문제 해결했다고 답글 달아야겠구만.
이제 유저가 이미지를 올리면 썸네일이 자동 생성된다.
여기서 좀 더 나아가서
썸네일 파일은 썸네일 폴더에 따로 모이도록 했다.
썸네일 파일이 잘 생성되어 저장된 모습
캬... 죽이는 구만.
주모 여기 맥주 한사발 주시오!
캬... 죽이는 구만!
썸네일이 사실상 리사이징이지뭐 ㅋㅋ
수고했다! 내자신!
