Firebaseでお手軽にローカルのWEBアプリをSSL公開する

ローカルアプリをSSLで公開したい場合に

webアプリケーションにはSSL環境でないと動作しない機能があったりします。Googleが推しているPWAを実現するためのService workerもその一つ。

こういう場合にはローカル環境で開発したものをそのままテストすることができないので、SSL環境をとりあえず用意したい場合にはFirebaseのホスティング機能を使うのも一つの手です。

Firebaseホスティング機能を使えば、ローカルのアプリを手軽にweb上に公開することができます。

Firebaseを使う手順

Googleアカウントを作る

まず下記のGoogle Firebase公式ページにアクセスする。

Firebase
Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.

右上のコンソールへ移動を押してGoogleアカウントでログインする。

firebase-02

Googleアカウントをもし持っていない方がいたら、この機会に作っておいて損はありません。Googleアカウントがあれば、いろんなサービスのアカウントとして使えるので超便利です。

新規プロジェクトを作る

ログインできたら、プロジェクトを追加から新規プロジェクトを作ります。

firebase-01

モーダルが立ち上がるので、プロジェクト名(アプリ名)を適当に入力します。

一時的にホスティングに使う場合は特に悩む必要はないと思います。hato-appとでもしましょう。

firebase-03

今回はホスティング機能を使うだけなので、このままプロジェクトを作成を押します。

firebase-04

しばらくするとアプリの管理画面に移ります。

Firebase-toolsをインストール

左メニューの開発を選び、リストからHostingを選んでください。

firebase-05

開いた画面で「使ってみる」ボタンを押すと、下のようなモーダルが立ち上がります。

firebase-06

Firebaseを使うには、npmでfirebase-toolsをインストールする必要があります。

表示されている以下のコマンドを、macならターミナル、windowsならコマンドプロンプトで打ち込んでインストールしてください。

$ npm install -g firebase-tools

インストールができたら、次へを押して進みます。

firebase-07

公開したいローカルアプリのディレクトリに移動し、下記コマンドでfirebaseにログインします。

$ firebase login

ログインしたいGoogleアカウントを選択すると、「Firebase CLIがアカウントへのアクセスを要求しています」と表示されるので許可します。ログイン成功画面が表示されれば成功です。

Firebaseとローカルアプリを紐づける

公開したいローカルアプリのディレクトリ下で下記コマンドを入力し、ローカルアプリとFirebaseを紐づけます。

$ firebase init

色々聞かれますので、下のように答えていきます。

  • Hosting
  • hato-app (hato-app) ←先ほど作ったプロジェクト名
  • public
  • ローカルアプリがSPAの場合 Yes、その他の場合 No

設定が完了すると、カレントディレクトリに下の2つが作成されます。

  • firebase.json
  • publicディレクトリ

publicディレクトリには公開したいアプリのファイルを入れます。例えばReactアプリならnpm run buildして作られたbuildフォルダ内のファイルですね。

デフォルトではpublicフォルダ内のファイルがデプロイ対象となっています。

デプロイするフォルダを変更したい場合は、下記を参照してください。

Firebaseでデプロイするフォルダを変更する
Firebaseにデプロイするフォルダを変更 firebase.jsonを編集 firebase deploy コマンドでデプロイされるフォルダは、firebase init コマンドで作成された firebase.json に記述しま...

ローカルアプリをFirebaseにデプロイ

あとは下記コマンドを打つだけでローカルアプリがデプロイされます。

$ firebase deploy

デプロイが完了したら、アクセス先のURLが表示されるのでアクセスしてみましょう。ローカルアプリの画面が表示されていれば成功です。

うまくデプロイできていれば、Firebaseの管理画面にもアプリのURLが表示されるようになります。

firebase-08

Firebaseホスティングを使うときの注意点

SSLで動作を確認したい場合、Firebaseのホスティング機能は便利です。

ただ静的ファイル(html, js, image等)のみサポートのため、phpやrailsなどのプログラムを動かすことはできないので注意です。(現時点ではNode.jsのみ対応とのこと)

コメント