LoginSignup
86

More than 3 years have passed since last update.

光の速さでデプロイ ~ Vue + Firebase hosting ことはじめ ~

Posted at

概要

こんにちは、都内でフロントエンドエンジニアをやっていますかめぽんです。最近は、Next.js + Firebaseで個人プロダクトを作っているんですが、Firebaseが便利すぎてお米が3杯食べられるくらいに感動しています。
何と言っても、スピード感が出せるのは非常に大きいなと感じています。特に、デプロイまでは本当にあっという間で、ものの数分でデプロイができます。
今回、Vue-cliとfirebase hostingを使ってプロジェクトの立ち上げからデプロイまでを、ササッと体験してもらえればと思います。

ターゲット

  • 光の速さでデプロイしたい人
  • Firebase実は使ってない人
  • Vue好きな人

メリット

  • SPAを光の速さでデプロイ出来る
  • firebase hostingが出来るようになる
  • Vue-cli触れる

本題

開発の流れ

今回の開発の流れは以下のように進めていきます。
事前に、firebase-toolsとVue-cliをグローバルインストールしておいてください。

  • vue-cliでプロジェクトの立ち上げ
  • firebaseプロジェクトの作成
  • プロジェクト内でfirebaseの設定
  • デプロイ

vue-cliでプロジェクトの立ち上げ

なにはともあれ、Vue-cliでプロジェクトを立ち上げましょう!以下コマンドにて、プロジェクトが一撃で作れます。

vue create [プロジェクト名]

すると、色々質問されると思うのですが任意で進めてみてください。
今回はManually select featuresを選択し、好きな設定でカスタマイズしていきます。
スペースキーで選択・非選択、エンターで決定できます。
スクリーンショット 2019-05-22 20.55.42.png

設定はまだまだ続きます、テストやLinterの設定などをお好みで選択していってください。
スクリーンショット 2019-05-22 20.57.10.png

最後までいき、以下のような画面が出たらプロジェクト作成完了です!

スクリーンショット 2019-05-22 21.00.45.png

firebaseプロジェクトの作成

次にFirebaseの設定です。https://console.firebase.google.com/u/0/ こちらのサイトにアクセスしてみてください。

すると以下のような画面が出るので、赤枠の部分を押してFirebaseプロジェクトを新規作成してみてください。

スクリーンショット 2019-05-22 22.19.34.png

プロジェクトの名前を打ち込み、、、
スクリーンショット 2019-05-22 22.19.53.png

プロジェクト作成を押すだけで、、、
スクリーンショット 2019-05-22 22.20.11.png

プロジェクトの作成が完了しました。
スクリーンショット 2019-05-22 21.25.00.png

プロジェクト内でfirebaseの設定

はじめに、プロジェクト内でfirebaseを使えるようにするために以下コマンドを売ってみてください。(事前にfirebase-toolsをグローバルインストールしておいてください)

firebase init

すると、こんな感じでターミナルが燃えていると思います。firebaseがもついろんな機能がありますが、今回はHostingを選んでください。
スクリーンショット 2019-05-22 21.20.13.png

そしたら、あらかじめ作っておいたプロジェクトが表示されるのでそれを選んでください。
スクリーンショット 2019-05-22 23.07.07.png

そして、firebaseの設定に関する質問を進めていくと以下のような画面が出るので、ここまでくればfirebaseプロジェクトとVue-cliで作ったプロジェクトをつなぎこむことが出来ました。

次に、Vue-cli側でアプリのデプロイをします。その前にfirebase.jsonの設定を少し変えます。Vue-cliのビルドしたファイルとfirebaseで読むときの設定を変えにいきます。npm run buildでVueの資材を吐き出せるのですが、その吐き出したファイルをホスティングするためにその対象ディレクトリを指定します。

{
  "hosting": {
    "public": "dist", //publicからdistへ
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

設定は以上になります!

デプロイ

そして、ここからデプロイに移っていくわけなんですが、その前にVue-cliの資材をビルドします。以下コマンドを打てみてください。

npm run build

すると、dist配下にファイルが流れ込んできたのがわかると思います。これらが、ホスティングする対象ファイルたちです。

スクリーンショット 2019-05-22 23.25.49.png

次に、以下魔法のコマンドを打つとホスティングされます。

firebase deploy

この画面が出たらデプロイが完了です!なんて簡単なんでしょうか。
スクリーンショット 2019-05-22 21.30.16.png

そして、ホスティングのURLにアクセスしてみて、吐き出した画面が表示されれば成功です!

スクリーンショット 2019-05-22 23.33.55.png

まとめ

いかがだったでしょうか?非常に簡単でスピーディにデプロイが出来たと思います。実案件でも良いですが、爆速でプロトタイプを作りたいときなどにも非常におすすめなのでジャンジャン使っていきましょう!それでは!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
86