22. Deploy - Firebase Hosting [1]

 

 

 

Visual Studio Code 툴 터미널에서 firebase login 명령어 실행 시 

firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\DEV-002\AppData\Roaming\npm\firebase.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https: //go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + firebase login + ~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

해당 오류가 발생할 수 있는데 이는 Windows PowerShell의 실행 정책(Execution Policy) 설정 때문에 발생한 것이다.

 

Power Shell에서 관리자 권한으로 실행을 하거나

Visual Studio Code 툴 터미널에서

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 명령어를 실행 후

firebase login 명령어를 실행하면 된다.

 

firebase login 명령어 실행 시

브라우저 새창이 열리면서 구글 계정으로 로그인을 진행한다.

 

firebase init 명령어 실행 후

어떤 요소들로 project를 구성하고 싶은지 선택을 해야 하는데 

이때 Hosting으로 커서가 가게 만들고 스페이스바를 누르면 선택이 되고 엔터를 누르면 완료가 된다. 

다음 순서에는 Use an existion project 옵션을 선택해야 하는데 커서를 가게 만들고 엔터를 누르면 된다.

다음 순서에는 터미널을 입력하는 경로에는 nwitter-reloaded 프로젝트만 있기 때문에 해당 프로젝트 밖에 보이지 않는 것이고

nwitter-reloaded에 커서가 가게 하고 엔터를 누른다.

다음 순서에는 무엇을 public 폴더로 설정하는지 묻는데..."dist"라고 입력 후 엔터를 누르면 된다. 오타나면 안된다!!!

다음 순서에는 "single-page app"으로 구성하는지 묻는데..."y" 입력 후 엔터를 누른다.

다음 순서에는 GitHoub와 함께 자동으로 빌드라고 배포하도록 설정 하는지 묻는데..."n" 입력 후 엔터를 누른다. 

다음 순서에는 dist/index.html이 이미 존재하는데 덮어쓸거냐고 묻는데..."y" 입력 후 엔터를 누른다.

 

Vite 프로젝트를 만들때

package.json 파일을 보면 "build" 명령어가 생성되는걸 확인할 수 있다.

Visual Studio Code 툴 터미널 하나를 더 열어서 실제로 bundle이 어디에 빌드되는지 확인을 위해 npm run build 명령어를 실행한다.

Vite를 통한 빌드가 실행되고

터미널에 dist/index.html 라고 나와 있는데

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

결국 Firebase에게 dist 폴더를 배포하고 싶다고 명령해야 한다.

dist는 distribute의 줄임말 아닐까...

 

pkackge.json

{
  "name": "nwitter-reloaded",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "firebase": "^10.1.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^6.14.2",
    "styled-components": "^6.0.7",
    "styled-reset": "^4.5.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@types/styled-components": "^5.1.34",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}