Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

こんにちは、都内でフロントエンドエンジニアをやっていますかめぽんです。最近は、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

まとめ

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

isihigameKoudai
「結局最後はエモさ」の人です。 エモさを大事に、フロントエンドエンジニアとして活動しています。 Vue.js、Nuxt.js、Serverless、IA/UX、Creativeをおかずにご飯食べてます。
https://www.brightanddizain.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした