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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 この記事はWP専用です
https://wp.me/pc9NHC-1cp

前置き

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に追記します✍️
この辺りはコマンドと開発を参考に🍀

【nuxt.config.js】

export default {
 target: 'static',
}

// terminal
$ npm run generate

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

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-1cp