前置き
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
ログインが成功すると
このような画面が表示されます👀
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-10.45.34.png?resize=920%2C452&ssl=1)
次に、プロジェクトの一覧を表示させて
本当に正しいアカウントで
ログインできているのかを確認しましょう👀
terminal
$ firebase projects:list
ターミナルにプロジェクトの一覧が表示されます🌱
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/Frame-39.png?resize=920%2C299&ssl=1)
該当アカウントの
Firebase コンソールページと
一致していればOKです⭕️
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-13.41.46.png?resize=920%2C453&ssl=1)
CLIのバージョンの更新は
必要があれば行いましょう。
ターミナルにもuseで
このコマンドで更新してね、
と促されるので使用しましょう💡
Step3: Firebaseプロジェクトを初期化
terminal
$ firebase init
質問の回答
質問されるので、
この内容で答えてください。
Hostingを選択
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-14.37.51.png?resize=920%2C201&ssl=1)
既に作成済みのプロジェクトを選択
Firebaseのプロジェクトを選択
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-14.38.28.png?resize=920%2C56&ssl=1)
distと入力
y(Yes)デフォルトでsingle-page app(SPA)
※意図的にSSRに変えている場合は別
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-13.50.43.png?resize=920%2C56&ssl=1)
firebase.jsonの確認
firebase initが終わると
該当プロジェクトに
.firebasercや
firebase.jsonが作成されます。
firebase.jsonを確認しましょう!
⭕️ "public": "dist"
❌ "public": "public"
publicはデプロイするディレクトリを指すものです。
Nuxtはdist配下に作成されるので
distにしなければ上手く反映されません。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-12.00.12.png?resize=471%2C475&ssl=1)
Step4: Firebaseプロジェクトをローカルで実行してテスト
terminal
$ firebase serve --only hosting
ローカルサーバーはlocalhost:5000と出ます。
ブラウザで確認できればOKです🙆♀️
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-14.24.38.png?resize=684%2C60&ssl=1)
ページが反映されない場合
このような画面になっていたら
デプロイしてもこの画面しか表示されません。
デプロイしたのに反映されない!!!😖💦
という方はこちらを確認しましょう👀
npm install nuxt
したか?- distの指定ができているか?
npm run generate
をしたか?
GitHubからcloneしてきてnpm run generate
をしないとnpm install nuxt
していないよ!
とエラーも出ないでそのまま…
なんてことが有り得ます💡
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-10.50.33.png?resize=920%2C616&ssl=1)
Step5: Firebaseプロジェクトにデプロイ
いよいよデプロイです✨
terminal
$ firebase deploy
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-14.43.47.png?resize=920%2C375&ssl=1)
これでURLができたので
アクセスして表示を確かめてましょう✨👀
Firebase Hosting
ダッシュボードからも
URLの確認は可能です🌍
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-26-14.45.09.png?resize=920%2C543&ssl=1)
まとめ
前提条件さえ整っていれば
やりやすいかと思います💡
これでFirebaseの
ほとんどの機能はご紹介できました✨👏