firebaseでnuxtのdeploy(error対策/反映されない)

firebaseでnuxtのdeployをする方法の覚書です。

デプロイ自体は簡単なのですが、結構エラーや細かいうっかりトラブルがあるため、忘れないようにめもです。

2回目以降は基礎の見出しだけみればOKですが、初回は初期設定が必要な場合もありますため、必要に応じてそちらの見出しもみてください。

1 firebaseでnuxtのdeployをする(基礎)
- 1.1 firebaseのダウングレードとバージョン一覧
2 firebaseでnuxtのdeployをする(初期設定の順番/エラー対策)
3 firebase deployが反映されない
4 firebaseでnuxtの開発環境と本番環境をわける
5 firebaseの学習

firebaseでnuxtのdeployをする(基礎)

SPAとSSRなどによってビルド方法が違うようです。

普通、

npm run generate

SPAの場合は

npm run build

vueやnuxtの場合、VS Code上にビルドするとビルドフォルダのdistができます。staticフォルダにsw.jsもできます。

次のコマンドでプロジェクト情報の一覧が見れます。

firebase projects:list

Resource Location IDが[Not specified]になっている場合、リージョンの設定がされていません。

デプロイします。

firebase deploy

hostingのみの変更はこちら。こちらの方が時間がかかりません。

firebase deploy --only hosting

公開するとfirebase > Hostingに書かれたサイトにアップロードされます。

デプロイの意味は展開する、配置するです。プログラミング的には、開発環境からステージング環境へシステムを公開することでしょう。ブロガーっぽくいうとFTPソフトでアップロードしたような状態ですかね。

firebase deployとだけ紹介しているサイトも多いのですが、先ほどのプロジェクト一覧から選定する場合は次のようになります。

firebase deploy --project プロジェクトID

公開を辞める方法もあわせて覚えておきましょう。

firebase hosting:disable

? Are you sure you want to disable Firebase Hosting?
This will immediately make your site inaccessible! (Y/n)

と言われるため、yを押してenter。再読み込みするとSite Not Foundになります。

firebase hosting:disable -y

おまけですが、-yをつけるとyes/noの選択肢もなくなります。

firebaseのダウングレードとバージョン一覧

npm uninstall -g firebase-tools
npm install -g firebase-tools@9.12.0

こちらに履歴があります。

Releases · firebase/firebase-tools

The Firebase Command Line Tools. Contribute to firebase/firebase-tools development by creating an account on GitHub.

firebaseでnuxtのdeployをする(初期設定の順番/エラー対策)

初期設定が必要な場合、上記の流れ以外にいろいろと作業が必要になることがあります。

下記の流れで進むでしょう。

npm install -g firebase-tool
firebase login
firebase init
npm run build
firebase deploy

firebase: Command not found

もしも

firebase: Command not found.

とでたら、firebase tools(Firebase CLIと書いてあることもあるぽい)が入っているか確認。

firebase --version

入っていなかったら、

npm install -g firebase-tools

グローバルインストールしているので、大抵の人は入っているでしょう。

yarnを入れている場合はyarnで試しましょう。yarnに乗り換えたとき、再インストールが必要でした。

yarn global add firebase-tools

アンインストールはこう。

yarn global remove firebase-tools

Error: Failed to list Firebase projects. See firebase-debug.log for more info

Error: Failed to list Firebase projects. See firebase-debug.log for more info

ログアウトしてログインしましょう。久々にデプロイの作業をしようとするとでることがあるっぽいです。

firebase logout
firebase login

firebase loginでログインできない

Firebase CLI が Google アカウントへのアクセスをリクエストしています

のままログインされない症状に遭遇。esetに邪魔されていました。。esetを一時的に解除しないと無限ループ。ファイヤウォールをオフにしたらあっさりと進みました。

(追記)esetはこれまで10回ぐらいいろいろな種類のトラブルを起こして貴重な時間を浪費してきました。。セキュリティソフトとしてはまあいいのですけど、開発環境としてはトラブルが多すぎるため、他のセキュリティーソフトを使うのもありです。

esetの数々のトラブルはこちらの記事でみれます。。

AndroidやParallelsDesktopのセキュリティソフト比較(eset カスペルスキー/マカフィー/ウイルスバスターはおすすめはどっち)

PC2台持ちと加え、Parallels desktop、Android、Windowsタブレット、ipad mini、iphoneを使っています。この構成でセキュリティソフトを何にすべきか検討しました。またcpuが100%になる問題にも悩

Error: Not in a Firebase app directory (could not locate firebase.json)

Error: Not in a Firebase app directory (could not locate firebase.json)

とでたら

firebase init

firebase initの設定(再設定)

firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

こんな記号文字がでます。

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then  Enter to confirm your choices.
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules

デプロイする場合、Hosting: Configure and deploy Firebase Hosting sitesを選びます。スペースで選んでenterです。

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

今ある存在するfirebaseの存在するプロジェクトを使うため、Use an existing projectです。

次から少し注意が必要です。

? What do you want to use as your public directory? dist

distです。nuxtはビルドした際にdistを生成するからです。ちゃんと指定しないと公開後ハマることになります。。

Configure as a single-page app (rewrite all urls to /index.html)?

spaならyes、そうじゃないならnoになりますかね。

init後に次のファイルが生成されます。

firebase.json
firebaserc

うまく公開できない場合、firebase initを再度やることになります。Overwrite(上書き)していいかと聞かれるのでyes/noで対応しましょう。

firebase initをもう一度やると次のようなものがでるようになります。

XXX already exists. Overwrite?

firebase init Firebase14(2021年度版)

久々にfirebase initをやったら選択肢が若干変わっていたため、覚書です。

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm yo
ur choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No

Firebase Hosting Setup Completeが表示される

デプロイ後、自分のサイトが表示されず、Firebase Hosting Setup Completeと表示される場合があります。

firebase initの設定をやり直しましょう。
場合によってはdistフォルダを根こそぎ削除してビルドのやりなおしも必要です。
あっているはずなのに、うまく反映されない場合、再読み込みで反映されたときがありました。

デプロイ後にeslintが動かなくなった

eslintのアップデートなどでは症状は改善されませんでした。

デプロイ時に生成されるdistフォルダを削除すると症状が改善されました。

毎回削除するのは面倒なので、.eslintignoreを生成して無視リストに入れます。sw.jsもビルド時に生成されるものでeslintのエラーがでるためいれます。

# eslintの無視リスト
dist
static/sw.js

npm ERR! missing script: build

npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:

cloud functionsを使っていてうっかりfunctions以下でビルドとしたのが原因だったようです。他が原因の場合もあるようです。

nuxtでデプロイ時にconsole.logを消去する

nuxtの場合、機能があるようです。追加するだけです。

export default {
  build: {
    terser: {
      // https://github.com/terser/terser#compress-options
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  }
}

tureとfalseでもいいかもしれませんが、node.jsの環境変数を使う場合は次のようになります。

drop_console: process.env.NODE_ENV === 'production'

余談ですが、node.jsの環境変数を確認する方法は次のとおり。どこかのページに挟めばOKです。process.envはみんな見れます。

const key = process.env.NODE_ENV
console.log('key', key)
console.log('process.env', process.env)

Error: Failed to authenticate, have you run firebase login?

Error: Failed to authenticate, have you run firebase login?

とでたら

firebase login

Allow Firebase to collect CLI usage and error reporting information? (Y/n)

yでenter

ログイン画面が開くため、Firebaseを使っているGoogleのアカウントでログインしましょう。

firebase deployが反映されない

凡ミスはビルドし忘れですかね…。あるいはビルドが通っていない。firebase deployだけしていたみたいな。

次に開発環境などいくつか環境を作っていた場合、デプロイ先を間違えているですね。

次にキャッシュ系を疑いますかね。

ちょっとだけ特殊なものとして本番サーバーの通常のurlは反映されているんだけど、独自ドメインだけ反映されないことがありました。小一時間たったのち、見てみると反映されていました。

firebaseでnuxtの開発環境と本番環境をわける

長くなったため、別記事にしました。

firebaseで開発環境と本番環境を分ける/カスタムドメインの料金/DNS設定

firebase複数プロジェクト運用の覚書です。firebaseでnuxtの開発環境と本番環境を分ける(複数プロジェクト運用)deploy時に開発環境と本番環境を分ける必要性を感じる人もいるでしょう。いくつかのルートがありますが、fireb

firebaseの学習

本や動画などをこちらの記事で紹介しています。

【udemyで大人買い】vue.js/vuetify/nuxt/firebaseのおすすめ入門本/動画

vue.js、vuex、nuxt、firebaseの入門本や動画でおすすめはどれでしょう。現在、個人的にnuxt.jsで個人開発をしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです。本やUdemyの動画は1時間短縮

ご参考になれば幸いです。