firebase hosting + vite.js

프로젝트가 완성되었으면, 빌드를 완료한다.

npm run build

 

빌드 완료된 디랙토리명을 확인한다.

  Vite.js    --> "dist",

  React.js --> "build"

 

1. firebase console 로 가서, 프로젝트 추가 또는 선택을 한다.

2.앱 추가하여 시작 - 앱 선택

3. 앱 닉네임 설정 - 예) rkko4

4. 호스팅 설정 클릭 - okkr-420413(아직배포없음)

5. 앱등록 버튼 클릭

6. Firebase SDK 추가 를 위해 코드 생성됨

npm install firebase

 

7. 터미널 통해 위   firebase 설치하고, package.json 에 등록되었음을  확인

8. 복사한 SDK 내용을 프로젝트 루트에 firebaseConfig.js 라는 파일로 붙여 넣는다. 

9. firebase console에서 "다음" 버튼을 클릭한다.

 

10. Firebase CLI 설치 명령어를 복사하여, 프로젝트에 설치한다.

npm install -g firebase-tools

 

11. 다음을 클릭하여, 터미널 창에서 Google에 Login 합니다.

firebase login

Already logged in as yangsyngwook@gmail.com

 

12. 로그인을 확인하고, 프로젝트 앱의 터미날에서 init 실행합니다.

firebase init

13. ? Are you ready to proceed?   (Y/n) 엔터

14. >( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

15. ? Please select an option: (Use arrow keys)
     > Use an existing project

16.? Select a default Firebase project for this directory: okkr-420413 (4okkr)
     i  Using project okkr-420413 (4okkr)

17. ? What do you want to use as your public directory? dist

18.? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

19. ? Set up automatic builds and deploys with GitHub? (y/N) n

 20. ? File dist/index.html already exists. Overwrite?  No

 21. 다음처럼 마무리 됨

+  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
PS D:\vite_\4okkr>

21. 터미널에서 배포명령을 한다. firebase deploy

22. 배포가 다음 처럼 마무리된다. 

PS D:\vite_\4okkr> firebase deploy

=== Deploying to 'okkr-420413'...

i  deploying hosting
i  hosting[okkr-420413]: beginning deploy...
i  hosting[okkr-420413]: found 128 files in dist
+  hosting[okkr-420413]: file upload complete      
i  hosting[okkr-420413]: finalizing version...
+  hosting[okkr-420413]: version finalized
i  hosting[okkr-420413]: releasing new version...
+  hosting[okkr-420413]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/okkr-420413/overview
Hosting URL: https://okkr-420413.web.app
PS D:\vite_\4okkr>

23. firebase console 에서 "콘솔로 이동"을 클릭하면, 사이트괸리(Hosting) 페이지로 넘어갑니다.

24. 사이트의 기본은 2개로 설정되나 커스톰 도메인을 추가 할 수있습니다.

25. 커스텀 도메인을 추가하고, DNS를 변경또는 CNAME 또는 SPF(TXT) 레코드 관리를 통해서 추가 확인

26. 커스톰 도메인 등록업체에 접속하여, 선택 후 신청하여 추가/변경 한다.

26. 최종 커스톰 도메인 추가 완료