テクノロジー

簡単にウェブページを公開できるFirebase Hostingの使い方を紹介

ウェブページやサービスを作って公開したいけど、サーバーを立ち上げ方がわからない、サーバーを構築するのはちょっと面倒と感じたことがある人は多いでしょう。今回は、サーバーを立てる手間を省いでウェブページを公開できるFirebase Hostingについて紹介します。

Firebase Hostingとは?

Googleが運営している「Firebase」というサービスで提供されているウェブコンテンツのホスティングサービスです。ウェブコンテンツというのは、ホームページやウェブサービスといったものでFirebase Hostingを使えばサーバーを立てることなく公開することができます。

Firebaseについて

FirebaseはGoogleが提供するインフラサービスでバックエンドの部分を簡単に作ることができるように設計されています。Firebaseでは様々な言語に対応したSDKが用意されており、iOSやAndroidに組み込むといったことも容易にできるようになっています。

iOSアプリ開発でFireaseを導入する方法については、こちらの記事で紹介しています。

Firebase Hostingの使い方

では、Firebase Hostingの使い方について紹介していきます。

事前に準備しておくこと

はじめに、ローカルでホスティングするプロジェクト用のディレクトリを作成しましょう。今回は hosting というディレクトリで作成します。

コンソール上で下記のコマンドを実行して作成します。

$ mkdir hosting

公開する環境をでセットアップ

次に、Firebase Consoleへアクセスして Firebase Hosting ページをから「はじめる」を押して進めます。

すると、以下のような画面が出てくるので下記のコマンドをコンソール上で実行しましょう。

$ npm install -g firebase-tools


インストールが完了して次に進むと、Firebaseへのログインを行います。コンソールで下記のコマンドを実行して、ログイン情報を入力してください。

$ firebase login

ログインが完了したら、最初に作った hosting ディレクトリへ移動して Firebase で利用するための初期化を行います。

$ cd hosting
$ firebase init

コマンドを実行すると以下のような出力がされます。実行するといくつか入力が求められるので、順に入力していきましょう。

  1. Hosting Serviceをスペース選択する
  2. Use an existing projectを選択する
  3. 作成したFirebaseプロジェクトを選択する
  4. public directoryは public を使うのでEnterを入力
  5. rewriteの設定は y にしておきます

初期化が完了するので、動作テストをしてみましょう。

ローカル上で動作テストしてみる

ローカルでテストをするために、サーバーを立ててみます。以下のコマンドでサーバーを立てることができます。

firebase serve

サーバーが立ち上がったら http://localhost:5000 にアクセスしてみましょう。すると次のようなページが表示されます。これは、public/index.html ファイルが表示されています。

最後にFirebase上へデプロイしてみましょう。下記のコマンドでデプロイできます。

$ firebase deploy

そうすると、デプロイが完了して Hosting URL というのが表示されるのでアクセスしてみると先ほどのページが表示されます。

最後に

今回は、Firebase Hostingについて紹介していきました。今後も、より詳しい内容で紹介していくので興味のある方は Twitter のフォローをお願いします。また、他にもFirebaseやiOSアプリ開発について以下の記事で紹介しているので参考にしてみてください。


hstack-vstackSwiftUIでレイアウトを簡単にするHStackとVStackの使い方Prev

簡単にサーバーを立てたい時におすすめのCloud Functins for Firebaseを紹介!Next

Related post

  1. テクノロジー

    ReactiveXとは?RxJSの入門と導入手順

    Rx (Reactive Extension)とはここ数年で話題になっ…

  2. テクノロジー

    iOSアプリ開発が簡単にできるStoryboard入門

    iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成…

  3. テクノロジー

    簡単にサーバーを立てたい時におすすめのCloud Functins for Firebaseを紹介!…

    ウェブサービスやアプリで使うからサーバーを立てたいけど、サーバーを立ち…

  4. テクノロジー

    IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

    iOSアプリ開発をStoryboardを使って開発している方も増えてき…

  5. iOSアプリ開発

    Firebase iOSの解説・セットアップ編

    アプリを作る・サービスを立ち上げるといったとき、ほとんどの場合はDBや…

  6. xcode

    iOSアプリ開発

    iOSアプリ開発に必要なXcodeについて知ろう

    「アプリ開発って難しそう」「アプリを作ってみたいけど作り方がわからない…

PAGE TOP