布団の中にいたい

Androidアプリ開発の勉強をしている傍らで、elasticsearchとかをいじってみたりしています。最近は数学の勉強が楽しくなってきました。

Firebase hostingにvueのアプリケーションをデプロイする

普段はAWSを使っていて、ちょっとしたアプリケーションであれば、S3において外部からアクセスできるようにしてました。今回、ちょっとした事情でGCPを使わないといけなくなったので、同等のことができそうということで、Firebase hostingを使ってみました。

Firebase hostingはざっくり言うと、静的サイトをお手軽に公開できるサービスです。ざっくりしすぎですかね。詳細は公式のページを参照したほうがいいです。

firebase.google.com

今回はvueで作ったちょっとしたアプリケーションをFirebase hostingで動かしてみました。手順は以下。既に動かすアプリケーションはあるという前提です。

  1. firebaseでプロジェクトを作成
  2. firebase-toolsをインストール
  3. デプロイするアプリケーションのディレクトリを指定
  4. デプロイ

firebaseでプロジェクトを作成

firebaseのコンソールからプロジェクトを作成できるので、作成してください。

firebase-toolsをインストール

npmでfirebase-toolsをインストールします。

$ npm install -g firebase-tools

次にCLI経由でfirebaseにログインします

$ firebase login

コマンドを実行したら、認証用のページに飛ぶので認証してください。

デプロイするアプリケーションのディレクトリを指定

デプロイしたアプリケーションのルートで以下のコマンドを実行します。

$ firebase init

実行するとfirebase用の設定ファイルが生成されます。生成されるのは以下2つ。

  • firebase.json
  • .firebaserc

次に、firebase.jsonにデプロイするディレクトリを指定します。今回はpublicというディレクトリを指定します。

{
    "hosting": {
        "public": "public"
    }
}

デプロイ

以下のコマンドを実行するとデプロイされます。

$ firebase deploy

実行するとHosting URLが表示されるので、そこにアクセスすればデプロイしたアプリケーションを参照できます。

まとめ

実際書いたもののvueの要素は皆無ですね。まぁ、webpackでbuildしたものをデプロイすればいいだけなので、大した手間はないので、実際やってみるといいかと。個人的にはS3でやるよりお手軽だったので、ちょっとしたことするなら今後もFirebase hostingを使いましょうかね。