firebaseでnuxtのdeployをする方法の覚書です。
デプロイ自体は簡単なのですが、結構エラーや細かいうっかりトラブルがあるため、忘れないようにめもです。
Contents
- 1 firebaseでnuxtのdeployをする(基礎)
- 2 firebaseでnuxtのdeployをする(初期設定の順番/エラー対策)
- 2.1 firebase: Command not found
- 2.2 Error: Failed to list Firebase projects. See firebase-debug.log for more info
- 2.3 firebase loginでログインできない
- 2.4 Error: Not in a Firebase app directory (could not locate firebase.json)
- 2.5 firebase initの設定(再設定)
- 2.6 firebase init Firebase14(2021年度版)
- 2.7 Firebase Hosting Setup Completeが表示される
- 2.8 デプロイ後にeslintが動かなくなった
- 2.9 npm ERR! missing script: build
- 2.10 nuxtでデプロイ時にconsole.logを消去する
- 2.11 Error: Failed to authenticate, have you run firebase login?
- 3 firebase deployが反映されない
- 4 firebaseでホスティングの公開を停止する
- 5 firebaseでnuxtの開発環境と本番環境をわける
- 6 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に書かれたサイトにアップロードされます。
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 [email protected]
こちらに履歴があります。
https://github.com/firebase/firebase-tools/releases
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の数々のトラブルはこちらの記事でみれます。。
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後に次のファイルが生成されます。
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と表示される場合があります。
場合によっては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でホスティングの公開を停止する
npm install -g firebase-tools // PCを新しくした場合、インストールから
firebase login
firebase projects:list // 選択されていなかったら選択する
firebase use プロジェクト名
firebase projects:list
firebase hosting:disable
カスタムドメインの公開が停止されます。
firebaseでnuxtの開発環境と本番環境をわける
長くなったため、別記事にしました。
firebaseの学習
本や動画などをこちらの記事で紹介しています。
ご参考になれば幸いです。
コメント