웹 개발 공부일지 97쪽 / 내 서비스 만들기(7) / Sveltekit 으로, Firebase Function & Hosting 성공
Firebase 의 Functions 를 시작하기
이미지 리사이징을 위해서, Firebase 의 Functions 를 활용하려고 한다.
우선 공식 설명서를 확인해봤더니, 내가 원하는 내용이 딱 있었다.
썸네일 이미지를 만드는 과정도 필요하지 ㅇㅇ
근데 이게 곧 내가 원하는기능을 구현하는 로직이랑 동일했다.
공식 설명서에서 안내해준 github firebase 공식 페이지에서도 해당 내용을 확인 할 수 ㅣㅇㅆ었다.
ImageMagick 이라는 툴을 사용해서 한다고 한다.
근데 이걸 하기전에 functions 기초를 한번 닦고 가고 싶어서.
일단 시작하기 페이지에서, 알려준 대로 진행을 하나하나 해봤다.
패키지 최신으로 업데이트. 진행
eslint 사용옵션을 켜고 functions 를 초기화해줬더니
쌍따옴표 따옴표 에 에러가 떠서 둘다 가능하도록 해줬다.
그리고 저장할 때, prettier 때문에 형식이 변하는 문제가 있어서
prettier ignore 에서 해당 파일은 제외시켜줬다.
아 개발할때, 로컬 에뮬레이터 굳이 써야하나 생각했는데 저런 위험성이 있었구나...ㄷㄷ...
몰랐네;
에뮬레이터 사용방법도 익혀놔야겠다.
펑션 배포한번 해봄
에러나옴.
따옴표 관련 규칙이 이상하다고...;
아 아까 내가 바꾼게 문제가 있구만.
따옴표관련 규칙을 0으로 해줬다.
off 꺼버림.
아예 지우니까 에러나길래, 지우진 못했음.
그리고 다시 배포하니 뜨는 수많은 에러들.. 머야..;
주석 길이가 너무 길다고..ㄷㄷ
와 주석관련 에러 처리해줬는데도 다른데서 에러 막뜨는데
eslint 때매 그런거 같은데 너무 불편한데 ㄷㄷ
각종 검사를 안한다는 규칙을 넣어서 에러를 제거했다.
eslint괜히 사용한다고 했네;
trailing comma 에러
저장할 때 ,prettier 에서 객체에 콤마를 자꾸 지워버리는데,
eslint에서는 있어야한다고, 하고. 그래서 계속 충돌나서,
prettier 에서 마지막에 콤마를 사용하도록 설정해줬다.
에러가 난다. 뭐지.. 이건.
어차피 hosting도 firebase 에서 진행할거라, 콘솔에 Hosting 설정을 잡아줬다.
그리고 deploy 해서 모두 배포
약관에 동의하냐고 질문 나오면 yes
한 2분 걸려서 모두 다 완료
이제 functions 만 deploy 해도 잘 된다.
첫 function deploy
이전에 했던 방법들은 이해가 안갔어서.
코딩애플 firebase 강의의 function 부분을 다시 보고 따라했다.
이렇게 하고 deploy !
이전에 region 설정을 안하고 그냥 deploy 했어서,
중간에 이전거를 삭제하고 등록할거냐? 라는 질문이 생겼다.
그리고 마지막에 image 를 삭제하는데 에러가 떴다고 해서, 뭐 수동으로 지우라고 해서 안내되어있는
gcf-artifacts 주소로 들어가서, 해당 파일들을 삭제해줬다.
배포한 cloud functions 경로 접속하니 내가 요청한대로 "안녕하세요" 라는 글자가 잘 나온다.
이제 이걸 좀 응용해서,
FireStore 에 있는 DB 를 불러와서, 뭔 조작을 한다던가. 할 수 있다.
일단 내 최종목표는 이미지 리사이징!
애플코딩 마지막 강의내용에서, firestore 의 db에 변화가 생겼을 때, 변화가 있는 문서에 내용을 추가하는 것을 한번 해봤다.
alert 를 삭제하니, 삭제한것도 업데이트 된 것으로 인식해서, 다시 alert 를 생성 ㅋㅋㅋ
하는 중간에 모르는거 GPT 에게 물어봐서
물어본 내용
Firebase - Functions : Storage에 이미지 업로드시,
Firestore 에 내용 업데이트
이제 firestore 가 아닌 storage에 이미지가 업로드 되었을 때를 인식해서, 뭔가 동작을 취해보자.
성공.. ㄷㄷㄷㄷ
와 개신기해 ㄷㄷㄷ
이미지가 Storage images / user의 uid 폴더 에 성공적으로 저장되면, 해당 user 의 store 에 , 이미지가 업데이트 된 시간을, 현재 시간으로 기록하게 된다.
와...
작성한 functions 코드 캡쳐
위 코드는 GPT가 알려준 코드를 이해한뒤, userRef 부분을 조금 변경해줬다.
아래는 위의 코드를 구현하기위해 GPT 에게 질문한 내용들 캡쳐한 거다.
질문하면서, 몰랐던 정규식표현식에 대해서, 더 자세하게 알게 되었다.
굿!
최고라고 칭찬하며 질문 마무리.
Sveltekit - Firebase / Hosting 배포 도전기
Sveltekit 프레임워크로 만든 앱을 Firebase의 hosting 서비스에 배포하는 것을 해본다.
공식 설명서를 찾아보니,
스벨트킷 앱을 배포하기전에, 배포할 환경에 맞추는 작업을 해야한다고 한다.
Adapters 라고 각종 호스팅 서비스들에 대한 adapter 깃허브 페이지가 안내되어있다.
나는 Firebase로 할건데 위 목록에 없어서 마지막 링크 클릭하니,
뭐 이런 목록이 나오고, 여기서,
Sveltekit 에서 Firebase 를 통한 hosting 을 하도록 도와주는
adapter 깃허브 페이지를 안내받았다.
근데, 뭐니...
베타였고, 버젼이 1.1.1 까지만 지원을 한다.
개발이 도중에 끊겼더라..
와?? 그럼 어떻게하냐...
GPT에게 물어보니가 adapter-node 패키지를 설치해서 진행하는 방법을 알려줬는데,
뭔가 더 편한 방법이 있지 않을까?
하고,
구글 검색을 했는데,
대박!!!
sveltekit 이 옛날 자료들은 의미가 없어서,
검색필터를 1개월로 해놓고 찾았는데.
무려 3일전에, Firebase 공식 유투브 채널에서,
Web app framework 를 사용해서 hosting 하는 서비스를 발표했었더라.
ㅁㅊ...와... 씨 개소름... 이거 없었으면 나 hosting 한다고 개고생했을거같다.
운 개좋네 나....ㅜ
https://firebase.google.com/docs/hosting/frameworks-overview?hl=ko
안내 설명서 페이지도 생긴지 얼마 안된듯.
심지어 1일 전에 올라온, 어떤 개발자분이 올린신 영상을 통해
바로 Sveltekit 을 Firebase에서 호스팅하는 과정을 확인 할 수 있었다.
그대로 따라했다.
중요한 것은,
를 먼저 입력하고, firebase init 을 하는것...
코드에서도 확인할 수 있다시피, experiments 라는걸 보면 아직 개발이 진행중인단계임을 알 수 있다.
무튼
이걸 하면 hosting 선택시, 평소에 나오지 않던 질문을 받는다.
이런 질문은 없었거든????
근데 생겼어!
와..
Yes 해주면, 지역선택하라는게 나오는데
asia 지역이 east1 으로 하나밖에 안나온다.
아무튼 설정 쭉쭉 진행하고,
firebase deploy 를 하면,
자기들 실험중인 기능 사용해줘서 고맙다는 말과함께,,
이건 공식적으로 firebase 에서 만든 기능이 아니고, 일반 유저들이 합심해서 만들어졌고 유지보수 되고 있는 기능이라고.. 문제가 생기면, 커뮤니티에 제보하라고 한다.
ㅇㅎ...
나는 참 운이 좋은거 같다.
ㅋㅋ
타이밍 대박이네.
그렇게, sveltekit 의 build 과정이 자동으로 진행되고,
Firebase 의 Deploying 이 진행된다.
그리고 Deploy 가 완료되는데,
초기 셋업에서 나왔던, asia-east1 의 서버를 통해서 배포가 된 점이 매우 유감
firebase.json 에서 region 이 있길래,
으로 바꾸고 deploy 해봤는데
지역 5개 중에 하나만 가능하다고 에러남.
일단. 안내받은 Hosting URL 주소를 통해 접속을 해본다.
와 ㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
내 서비스가 인터넷에서 접속된다.
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
핸드폰으로도 접속해봐야지.
ㅠㅠㅠㅠㅠㅠㅠ
핸드폰에서도 접속이 된다니.. ㅠㅠ
감격...
이번 포스팅은 일단 여기까지...
Function 과 Hosting 에 성공했다.
와. . 감격이네. 진짜.ㅠㅠㅠ
오늘 개발하면서, Hosting 까지는 기대안했는데,
최근에 정말 운좋게 Firebase 에서 Sveltekit 호스팅 편하게 해주는 기능이 나와서,
바로 성공해버림. 하.. 행복하다.
아래는 Firebase init 을 할 때 Hosting 설정하는 과정에서,,
Github 관련 질문에 Yes 를 눌렀을 때 나오는 질문들이 이해가 안가서,
GPT 에게 물어본 내용 캡쳐.
