파이어베이스에 무료로 웹 호스팅 하기

아래 내용은 PC에 node와 npm이 설치되어 있고, 파이어베이스에 프로젝트를 만든 후의 내용입니다.

맥OS에 홈브류를 이용해 node와 npm 설치 : https://boxwitch.tistory.com/373

npm install -g firebase-tools

터미널에 위 스크립트를 입력하여 firebase-tools를 설치합니다.

firebase login

firebase-tools가 설치되면 작업 폴더를 하나 생성하고 해당 경로에서 터미널을 열어 위 스크립트를 입력하고 엔터를 누릅니다.

파이어베이스에 사용량과 오류를 보고하겠냐고 물어오면 y나 n을 입력합니다.

자동으로 브라우저를 통해 구글 로그인 절차가 시작됩니다.

Firebase CLI 앱을 신뢰할 수 있다고 허용을 눌러줍니다.

파이어베이스 CLI 로그인이 성공했다고 메시지가 출력됩니다.

firebase init

위 스크립트를 입력하여 파이어베이스를 초기화합니다.

파이어베이스 글씨가 크게 표시되고, 그 아래 래디얼 버튼으로 몇 가지 선택 옵션이 나타납니다.

파이어베이스의 여러 서비스 중 호스팅을 선택해야하는데, 호스팅 메뉴가 두 가지입니다. github을 통한 작업말고, 파이어베이스 호스팅 파일 설정 메뉴를 선택합니다.

위, 아래 방향키를 눌러 하늘색 포커싱을 움직여서 선택하고 엔터를 누릅니다.

이미 파이어베이스에 생성된 프로젝트가 있으므로 Use an existing project를 선택하고, 나열되는 프로젝트들 중에서 호스팅으로 사용할 프로젝트를 선택합니다. 위아래 방향키로 움직여 선택 후 엔터를 누릅니다.

웹으로 접근할 수 있는 디렉토리명에는 public, 연결 페이지 index.html로 Yes, 깃헙을 이용한다에 No, 호스팅에 파일을 덮어쓰려면 Yes 등을 선택하고 엔터를 누르면 파이어베이스 호스팅 설정이 완료됩니다.

초기화 후에는 PC의 프로젝트 폴더에 firebase.json파일과 public 폴더가 생성되며, public 폴더안에 index.html파일도 함께 생성됩니다.

firebase serve

위 스크립트를 터미널에서 사용하면 프로젝트에 있는 html 페이지를 로컬에서 열어볼 수 있습니다.

스크립트 입력후 나타난 로컬 호스팅 서버의 주소로 브라우저에 접속하여 html페이지를 열어 봅니다.

파이어베이스에서 자동으로 생성한 index.html페이지입니다.

firebase deploy

프로젝트의 폴더에 웹페이지로 사용할 html들을 꾸며넣고 파이어베이스 호스팅 서버 올릴때에는 위의 스크립트를 사용합니다.

프로젝트의 폴더 구성 그대로 호스팅 서버로 옴겨집니다.

파이어베이스에서 Hosting의 대시보드에 도메인 주소가 있습니다.

이 주소를 사용하여 호스팅 서버의 웹 페이지를 접속할 수 있습니다.

맥에 홈브류 및 node, npm 설치 : https://boxwitch.tistory.com/373

유니티에서 파이어베이스 스토리지를 이미지 서버로 사용하기 : https://boxwitch.tistory.com/142

댓글