React/TS study - twitter clone(8)

Firebase Hosting

 

호스팅 페이지에서 시작하기를 누르면 해당 화면이 출력된다

 

Firebase CLI를 설치해준다

npm install -g firebase-tools

 

 

 

Google에 로그인 하기위해서

firebase login

 

입력을하면 해당 문구가 나오는데 정보수집여부 동의 Y/N 을 선택해주면 구글 로그인창이 뜬다

 

 

 

 

성공하면 해당 문구가 뜨면서 연결된 이메일을 출력해준다

 

 

firebase init

을 입력해준다 (initiate : 초기화)

 

"Are you ready to proceed? (Y/n)" 라는 질문이 나오는데, 

이것은 Firebase 프로젝트 초기화를 진행할 준비가 되었는지를 묻는 것

 

 

yes를 누르면 해당 화면이 출력되는데

프로젝트를 어떤요소로 구성하고싶은지 묻는 창이다

 

여기서 Hosting을 선택해준다

spacebar를 눌러서 select해주고 enter 입력

 

 

해당 화면이 출력되는데

Use an existing project(기존 프로젝트 사용) 옵션을 선택하기 (enter 입력)

 

 

그러면 내 프로젝트 목록을 보여준다.

원하는 프로젝트로 이동하여 enter 입력

 

 

어떤걸 public폴더로 설정할지를 물어본다

 

 

프로젝트에서 package.json을 열면 Vite로 프로젝트를 만들 때 'build' 명령어가 생성된걸 확인할 수 있다

 

 

 

새 터미널을 열어서 

npm run build

를 입력해서 실제로 어디에 빌드되는지 확인해보기

 

입력했을 때 오류나는 부분이나 경고가 들어간 파일(변수 선언후 미사용) 같은 부분이 없다면 해당 화면이 출력

 

Vite가 모든것을 압축해 저장하는 폴더의 이름은 'dist'임을 알 수 있음

그러므로 Firebase에게 dist 폴더를 배포하고싶다고 입력하기

 

 

single-page app으로 구성하는지? yes

 

 

Github에 자동으로 빌드하고 배포하도록 설정하는지? No

 

 

 dist/index.html 파일이 이미 존재합니다 덮어쓸까요? yes

 

 

작업을 완료하면 firebase.json 파일이 생성되고 dist폴더가 생성된다.

여기까지가 Project의 Firebase 초기화작업

 

 

dist폴더 업로드하기 (Vite 빌드폴더)

 

 

  "scripts": {

    ........

    "predeploy" : "npm run build",

    "deploy" : "firebase deploy"

  },

package.json 파일로 가서 script에

predeploy,  deploy 명령어 생성

predeploy를 위에 적어야 deploy가 실행되기전에 실행된다

 

터미널에 npm run deploy 를 실행하면 자동으로 nodejs가 predeploy명령어를 먼저 실행한 후에 deploy명령어를 실행

 

 

 

호스팅 페이지 생성 완료해주기

 

 

 

npm run deploy 

를 입력하여 hosting이 성공하면 hosting url이 배포된다.

 

코드가 수정되어 재배포가 필요하면 npm run deploy를 다시 입력해주면 된다.

 

 

 

 

발생했던 오류

 

해당오류가 발생하면

https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3

실행 정책 정보 - PowerShell

이쪽으로 이동하여 PowerShell 실행정책에 대한 설정을 바꿔준다.

 

Windows PowerShell에 접근하여 관리자권한으로 실행한다.

 

PowerShell에서

Set-ExecutionPolicy -ExecutionPolicy Bypass

를 입력해서 모두 예 로 바꿔준다.

 

이후 정상적으로 작동이 가능했다

>> 발생원인 : 작업환경 변경으로 인한 오류발생