前置き
firebaseの記事をたくさん出してきましたが、
Hostingについてはまだ出していませんでした…！
「Firebase Hosting を使って
自分のNuxtファイルを公開したい！」
という方へ向けた記事です。
既にfirebase慣れしている方は
公式を見れば分かると思うので…
「用語とかもよく分からないけど
とにかくチャレンジしたい🔥💪」
みたいな方が対象です🌷
参考:
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に追記します✍️
この辺りはコマンドと開発を参考に🍀
|
1 2 3 |
export default { target: 'static', } |
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の
ほとんどの機能はご紹介できました✨👏