Firebase Hostingを使ってWebアプリケーションを公開する

Published: 2018年5月27日 by tomsato

概要

FIrebaseの中の機能の一つであるHostingサービスを使うまでの流れをまとめる
具体的に言うとnuxt.jsで作成した静的ファイルをFirebase Hostingにアップしてアプリケーションを動かしてみる

mBaaSとは

スマートフォンアプリでよく利用される汎用的な機能を提供するサービスで
バックエンド周りの機能をクラウドを通して利用することができる

Firebaseとは

Googleが提供するmBaaSのこと

Firebase HostingはFirebaseの機能の一つで静的ファイルのホスティングサービスとなっている

Firebaseダッシュボード作成まで

Firebaseトップの「使ってみる」から

プロジェクト名とプロジェクトIDを入力して作成を行う
https://(プロジェクトID).firebaseapp.com
というドメインでアプリケーションが起動することになるのでプロジェクトIDは慎重に決める(従ってプロジェクトIDは他の人と被らないようにユニークに決める必要がある)

ダッシュボードが出来上がる

Firebaseにデプロイする

Firebase CLI リファレンス よりFirebase CLIをダウンロードする
このCLIを使ってデプロイを行う

$ npm install -g firebase-tools

Firebaseにログインするまで

$ firebase login
...
Success! Logged in as XXXX@XXX.com

Firebaseにアップロードするアプリケーションのディレクトリまで移動してFirebaseを使う準備を行う

$ cd /path/to/

// initが完了するとfirebase.jsonという設定ファイルが作成されているはず
$ firebase init

// Hostingを選択
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, t
hen Enter to confirm your choices.
Hosting: Configure and deploy Firebase Hosting sites

// 作成したプロジェクト名を選択
? Select a default Firebase project for this directory: プロジェクト名 (プロジェクトID)

// Hosting用のディレクトリ設定。nuxt generateで作成したものをアップするのでdistにした
? What do you want to use as your public directory? dist

// 全てのURLを/index.htmlに上書きしない。Noを選択。
? Configure as a single-page app (rewrite all urls to /index.html)? No

デプロイを行う

ローカル環境でのFirebaseをエミュレートする
$ firebase serve
実際にFirebaseにデプロイする
$ firebase deploy

デプロイが完了すると以下のドメインでアップしたアプリケーションが動作していることを確認できる
https://(プロジェクトID).firebaseapp.com

無料枠の制限

同時接続は100、容量は1GBまで、通信容量は10GB/月までなので小規模サイトの場合は問題なく使える

また前述しているがドメインは「https://(プロジェクトID).firebaseapp.com」となる

デフォルトのドメインが.comなのは嬉しいが、割と人気のあるサービスなのでプロジェクトIDがシンプルな名前の場合(例:1英単語、最低文字数である6文字の英数字、文として成り立つ2英単語の組み合わせなど)はすでに使われていて違う名前にさせられる可能性があるので注意

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

カテゴリ一覧

タグ一覧