Firebase hostingにvueのアプリケーションをデプロイする
普段はAWSを使っていて、ちょっとしたアプリケーションであれば、S3において外部からアクセスできるようにしてました。今回、ちょっとした事情でGCPを使わないといけなくなったので、同等のことができそうということで、Firebase hostingを使ってみました。
Firebase hostingはざっくり言うと、静的サイトをお手軽に公開できるサービスです。ざっくりしすぎですかね。詳細は公式のページを参照したほうがいいです。
今回はvueで作ったちょっとしたアプリケーションをFirebase hostingで動かしてみました。手順は以下。既に動かすアプリケーションはあるという前提です。
- firebaseでプロジェクトを作成
- firebase-toolsをインストール
- デプロイするアプリケーションのディレクトリを指定
- デプロイ
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を使いましょうかね。