ローカルアプリをSSLで公開したい場合に
webアプリケーションにはSSL環境でないと動作しない機能があったりします。Googleが推しているPWAを実現するためのService workerもその一つ。
こういう場合にはローカル環境で開発したものをそのままテストすることができないので、SSL環境をとりあえず用意したい場合にはFirebaseのホスティング機能を使うのも一つの手です。
Firebaseホスティング機能を使えば、ローカルのアプリを手軽にweb上に公開することができます。
Firebaseを使う手順
Googleアカウントを作る
まず下記のGoogle Firebase公式ページにアクセスする。
右上のコンソールへ移動を押してGoogleアカウントでログインする。
Googleアカウントをもし持っていない方がいたら、この機会に作っておいて損はありません。Googleアカウントがあれば、いろんなサービスのアカウントとして使えるので超便利です。
新規プロジェクトを作る
ログインできたら、プロジェクトを追加から新規プロジェクトを作ります。
モーダルが立ち上がるので、プロジェクト名（アプリ名）を適当に入力します。
一時的にホスティングに使う場合は特に悩む必要はないと思います。hato-appとでもしましょう。
今回はホスティング機能を使うだけなので、このままプロジェクトを作成を押します。
しばらくするとアプリの管理画面に移ります。
Firebase-toolsをインストール
左メニューの開発を選び、リストからHostingを選んでください。
開いた画面で「使ってみる」ボタンを押すと、下のようなモーダルが立ち上がります。
Firebaseを使うには、npmでfirebase-toolsをインストールする必要があります。
表示されている以下のコマンドを、macならターミナル、windowsならコマンドプロンプトで打ち込んでインストールしてください。
$ npm install -g firebase-tools
インストールができたら、次へを押して進みます。
公開したいローカルアプリのディレクトリに移動し、下記コマンドでfirebaseにログインします。
$ firebase login
ログインしたいGoogleアカウントを選択すると、「Firebase CLIがアカウントへのアクセスを要求しています」と表示されるので許可します。ログイン成功画面が表示されれば成功です。
Firebaseとローカルアプリを紐づける
公開したいローカルアプリのディレクトリ下で下記コマンドを入力し、ローカルアプリとFirebaseを紐づけます。
$ firebase init
色々聞かれますので、下のように答えていきます。
- Hosting
- hato-app (hato-app) ←先ほど作ったプロジェクト名
- public
- ローカルアプリがSPAの場合 Yes、その他の場合 No
設定が完了すると、カレントディレクトリに下の２つが作成されます。
- firebase.json
- publicディレクトリ
publicディレクトリには公開したいアプリのファイルを入れます。例えばReactアプリならnpm run buildして作られたbuildフォルダ内のファイルですね。
デフォルトではpublicフォルダ内のファイルがデプロイ対象となっています。
デプロイするフォルダを変更したい場合は、下記を参照してください。
ローカルアプリをFirebaseにデプロイ
あとは下記コマンドを打つだけでローカルアプリがデプロイされます。
$ firebase deploy
デプロイが完了したら、アクセス先のURLが表示されるのでアクセスしてみましょう。ローカルアプリの画面が表示されていれば成功です。
うまくデプロイできていれば、Firebaseの管理画面にもアプリのURLが表示されるようになります。
Firebaseホスティングを使うときの注意点
SSLで動作を確認したい場合、Firebaseのホスティング機能は便利です。
ただ静的ファイル（html, js, image等）のみサポートのため、phpやrailsなどのプログラムを動かすことはできないので注意です。（現時点ではNode.jsのみ対応とのこと）
コメント