firebaseでnuxtのdeployをする(error対策込み)

おすすめのオンラインプログラミング学習

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

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

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

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

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

普通、

npm run generate

SPAの場合は

npm run build

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

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

firebase projects:list

デプロイします。

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 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のアカウントでログインしましょう。

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やParallels desktopのセキュリティソフト比較おすすめで軽いのは!?
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以下でビルドとしたのが原因だったようです。他が原因の場合もあるようです。

firebase deployが反映されない

1番単純なのはビルドし忘れですかね…。firebase deployだけしていたみたいな。次にキャッシュ系を疑いますかね。

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)
スポンサーリンク

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

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

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

firebaseの学習

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

【udemyで大人買い】vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです...

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

コメント

タイトルとURLをコピーしました