firebase

【Nuxt.js】firebase基礎編:Firebase Hosting にデプロイしよう!

前置き

firebaseの記事をたくさん出してきましたが、
Hostingについてはまだ出していませんでした…!

「Firebase Hosting を使って
 自分のNuxtファイルを公開したい!」
という方へ向けた記事です。

既にfirebase慣れしている方は
公式を見れば分かると思うので…
「用語とかもよく分からないけど
 とにかくチャレンジしたい🔥💪」
みたいな方が対象です🌷

公式: Firebase CLI リファレンス

参考:
https://ema-hiro.hatenablog.com/entry/2020/01/12/100318
https://qiita.com/aql/items/11b0f9743dff982c2526
https://deha.co.jp/magazine/nuxt-js/
https://arrown-blog.com/firebase-javascript-hosting/#Firebase_HostingWeb
https://blog.mktia.com/diffrences-between-build-and-generate-in-nuxt/


前提条件

作成済みのNuxtプロジェクトがあること✨🪐

Nuxt公式インストールページ
このコマンドが実行できていて

terminal

$ npm init nuxt-app <project-name>
$ npm install nuxt
$ npm run dev

ここで実際の表示が確認できていること
http://localhost:3000/

そしてこちらをやっておきましょう💫
generateで静的生成と、
そのためのtergetをconfigに追記します✍️
この辺りはコマンドと開発を参考に🍀

terminal

$ npm run generate

generateでエラーが出る場合
Nuxtのアップグレード
解消されるかもしれません。


Step1: Firebase CLI をインストール

こちらに沿ってやっていきます。
Firebase CLI リファレンス

-gはグローバルを意味します。
なので、デプロイしたいプロジェクトに
cdで移動しなくても大丈夫です🙆‍♀️

terminal

$ npm install -g firebase-tools


Step2: Firebaseにログイン

terminal

$ firebase login

ログインが成功すると
このような画面が表示されます👀

次に、プロジェクトの一覧を表示させて
本当に正しいアカウントで
ログインできているのかを確認しましょう👀

terminal

$ firebase projects:list

ターミナルにプロジェクトの一覧が表示されます🌱

該当アカウントの
Firebase コンソールページ
一致していればOKです⭕️

CLIのバージョンの更新は
必要があれば行いましょう。
ターミナルにもuseで
このコマンドで更新してね、
と促されるので使用しましょう💡


Step3: Firebaseプロジェクトを初期化

terminal

$ firebase init

質問の回答

質問されるので、
この内容で答えてください。

Hostingを選択

既に作成済みのプロジェクトを選択
Firebaseのプロジェクトを選択

distと入力
y(Yes)デフォルトでsingle-page app(SPA)
※意図的にSSRに変えている場合は別


firebase.jsonの確認

firebase initが終わると
該当プロジェクトに
.firebasercや
firebase.jsonが作成されます。

firebase.jsonを確認しましょう!
⭕️ "public": "dist"
❌ "public": "public"

publicはデプロイするディレクトリを指すものです。
Nuxtはdist配下に作成されるので
distにしなければ上手く反映されません。


Step4: Firebaseプロジェクトをローカルで実行してテスト

terminal

$ firebase serve --only hosting

ローカルサーバーはlocalhost:5000と出ます。
ブラウザで確認できればOKです🙆‍♀️


ページが反映されない場合

このような画面になっていたら
デプロイしてもこの画面しか表示されません。
デプロイしたのに反映されない!!!😖💦
という方はこちらを確認しましょう👀

  • npm install nuxtしたか?
  • distの指定ができているか?
  • npm run generateをしたか?

GitHubからcloneしてきて
npm run generateをしないと
npm install nuxtしていないよ!
とエラーも出ないでそのまま…
なんてことが有り得ます💡


Step5: Firebaseプロジェクトにデプロイ

いよいよデプロイです✨

terminal

$ firebase deploy

これでURLができたので
アクセスして表示を確かめてましょう✨👀

Firebase Hosting
ダッシュボードからも
URLの確認は可能です🌍


まとめ

前提条件さえ整っていれば
やりやすいかと思います💡

これでFirebaseの
ほとんどの機能はご紹介できました✨👏

-firebase
-,

© 2021 aLiz Nuxt