입문

Firebase는 mBaaS로서 이미 하나의 지위를 세웠지만 실제 사용하는 기계가 없다면 데이터베이스 등 백엔드 주위에서만 서비스를 제공한다고 생각하기 쉽다.
사실 Firebase는 관리형 서비스도 제공하여 SSL을 지원하는 정적 사이트를 쉽게 발표할 수 있다.
GitHub Pages 등 SSL을 지원하는 정적 사이트 관리 서비스는 다른 서비스도 있지만 오픈소스가 필요 없고 Firebase의 다른 서비스와 친화성이 높기 때문에 서버 없는 웹 서비스도 공개할 수 있어 좋은 인상을 남겼다.
이번에는 Firebase의 위탁 관리 서비스를 이용하여 사이트를 공개하고 싶습니다.
약 5분이면 완성할 수 있는 간단한 절차지만 오래된 Firebase 자료를 많이 봤기 때문에 정리했습니다.

선결 조건

이 항목은 이미 Node입니다.js 환경을 가져온 사람을 대상으로 합니다.
가져오지 않은 사람은 아래 항목을 참고하여 각각 가져오십시오.
http://qiita.com/544/items/7237a32c68619236f446

계정 및 항목 만들기

Firebase 계정 만들기

Firebase는 현재 구글 계정만 있으면 바로 사용할 수 있기 때문에 특별한 계정을 만들 필요가 없다.

Firebase 사이트에 가서 화면 오른쪽에 있는 로그인으로 구글 계정에 로그인하세요.
또한'Firebase'에서 검색한 후 먼저 적중한 것은 낡은 사이트이기 때문에 아래의 링크에서 이동하는 것은 확실하다.
https://firebase.google.com/
로그인이 완료되면 를 사용하여 관리 공간에 액세스합니다.

항목 만들기

다음은 위탁 관리 항목을 등록합니다.

콘솔에서 "새 프로젝트 만들기"를 선택한 다음 프로젝트 만들기로 이동합니다.

프로젝트 이름 및 국가를 선택하고 [프로젝트 만들기] 를 클릭합니다.이렇게 준비 끝.

위탁 관리

초기 설정이 끝났기 때문에 위탁 관리 준비에 들어갔다.
여기서부터 기본적으로 명령줄의 조작으로만 진행된다.

Firebase Tools 배포

우선 Firebase를 호스팅할 때 Firebase의 도구 모음을 설치해야 합니다.
다음 명령을 실행하면 명령줄에서 Firebase를 처리할 수 있습니다.
shell

$ npm install -g firebase-tools

보안 설치가 완료되면 다음 명령을 사용하여 로그인합니다.
shell

$ firebase login

실행할 때 구글 계정의 메일주소와 비밀번호를 물어보니 자신의 계정 정보에 로그인하세요.

Firebase 애플리케이션 생성 및 배포

준비 시간이 길어졌지만 드디어 응용 프로그램을 만들고 배치해야 합니다.firebase init 명령을 사용하면 대화방의 질문에 대답하기만 하면 배치 가능한 상태로 설정할 수 있다.

$ firebase init

You're about to initialize a Firebase project in this directory:

  /path/to/project-dir

? What Firebase CLI features do you want to setup for this folder? (Press <space> to select)

 ◯ Database: Deploy Firebase Realtime Database Rules
❯◉ Hosting: Configure and deploy Firebase Hosting sites

initialize를 실행하면 다음 선택 화면이 되므로 Hosting만 검사하고 들어갑니다.
그런 다음 다음 다음 옵션으로 이동합니다.

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do you want to associate as default?
  [don't setup a default project]
  Project-Hoge (project-hoge)
  Project-fuga (project-fuga)
❯ Qiita-Firebase-Test (qiita-firebase-test)
  [create a new project]

이 화면에 도착하면 방금 만든 프로젝트 이름(여기는 Qiita-Firebase-Test)을 선택하여 들어갑니다.
그 다음에 모두 Enter를 사용하면 됩니다.
마지막✔ Firebase initialization complete!으로 제작에 성공했다.
공용 디렉터리와 두 개의 프로필만 만들면 됩니다.
마지막으로 누구나 볼 수 있도록 배치해 보자.
배포를 진행하고 배포 결과를 열려면 다음 명령을 사용하십시오.
shell

$ firebase deploy && firebase open hosting:site

=== Deploying to 'qiita-firebase-test'...

i  deploying hosting
✔  database: rules ready to deploy.
i  hosting: preparing public directory for upload...
✔  hosting: public folder uploaded successfully
✔  hosting: 2 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Hosting Site: https://qiita-firebase-test.firebaseapp.com
Dashboard: https://console.firebase.google.com/project/qiita-firebase-test/overview


Visit the URL above or run firebase open
Tip: You can also run firebase open hosting:site

Opening Hosting: Deployed Site link in your default browser:

https://qiita-firebase-test.firebaseapp.com

이렇게 하면 브라우저에서 아래 화면을 열면 배치가 완료됩니다.고생하셨습니다.

편집된 내용을 재배치하다.

마지막으로 한 차례의 배치를 마쳤지만 그 후의 편집과 배치 방법을 소개하겠습니다.
편집할 때 public 디렉터리에 있는 HTML을 직접 편집하여 배치용 파일을 직접 업데이트합니다.
이 부근은 기본적인 정적 사이트 제작과 같은 이치로 진행할 수 있다.
그리고html에 관해서는 파일을 찾을 수 없는 상황에서 자동으로 읽기 때문에 특히 이것에 관해서는 특별한 설정이 필요하지 않습니다.
그리고 편집된 내용을 다시 배치하려면 아까와 같은 명령을 실행하여 최신 상태로 업데이트할 수 있습니다.
shell

$ firebase deploy && firebase open hosting:site

끝내다

따라서 지금까지는 우선 Firebase에 정적 사이트를 배치할 수 있다.
HTML5 주위의 API는 어쨌든 SSL 연결이 필요하기 때문에 적당한 임대 서버에서 쉽게 시도하기 어려운 서비스입니다. 이런 서비스는 정말 감사합니다.
다른 위탁 관리 서비스와 비교해도 장점이 많기 때문에 적당히 분리해서 사용하면 편리하다.
전체적으로 FireBase 웹 사이트 관리는 다음과 같은 용례에 유용하다고 생각합니다.
나는 만약 일치하는 기회가 있다면 한번 사용해 보아도 있을 것이라고 생각한다.

실험장으로 쉽게 사용하고 싶은 경우

SSL 연결이 필요한 API를 두드리려면

실험하면서 Firebase의 다른 기능을 공개하고 싶은 경우

GitHub 자료 라이브러리가 난립하는 것을 싫어하는 것은 작은 실험을 하는 사람을 위한 것이다