Firebase Hostingでさらっとデプロイしよう！
Nuxt.jsを用いてアプリ開発を終えて、さあデプロイをするぞっと息込んだものの...
distに内容がコピーされない・・・！
そんな困った時に解決できたお話です。
1. firebaseにログインする
まず、 firebase login でfirebaseへログインを行う。
コマンドを実行すると匿名で使用状況やエラーの情報を収集しても良いですか？と質問されます。
userNamenoAir:Nuxt-Parenting userName$ firebase login
i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? (Y/n) Yes
i To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=1060600744&redirect_uri=http%3A%2F%2Flocalhost%3A9005
Waiting for authentication...
選択後にどのアカウントでログインを行うのか選択する画面へ切り替わるので、
自分の好きなアカウントを選んで下さい。
使用するアカウントを選択すると、『 Firebase CLI が Google アカウントへのアクセスをリクエストしています 』と次ページへ進むので、内容を確認後 『 許可 』をして下さい。
許可をすると、↓下記画像のようにログインに成功しました！とお知らせしてくれるので、ターミナルへ戻りましょう。
ターミナルでもログイン成功のメッセージが表示されます。
✔ Success! Logged in as ＊＊＊＊@gmail.com
これでfirebaseへのログインは完了です！！
・・・ちなみに、ログイン済みの状態で firebase login を行うと、
すでにログイン済みであることも教えてくれました！他のアカウントを使用したい場合は firebase logout でログアウトし、またログインからやり直せば大丈夫です！
userNamenoAir:Nuxt-Parenting userName$ firebase login
Already logged in as ＊＊＊＊@gmail.com
2. プロジェクトの初期化を行う
次に、firebaseプロジェクトとして firebase init hosting を実行し、初期化を行い、質問がいくつか聞かれるので順に回答していきます。
最後に、✔ Firebase initialization complete! の文が出れば設定の完了です！
userNamenoAir:Nuxt-Parenting userName$ firebase init hosting
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/userName/Desktop/Nuxt-Parenting
Before we get started, keep in mind:
* You are initializing within an existing Firebase project directory
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i Using project nuxt-parenting (Nuxt-Parenting)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote dist/404.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
userNamenoAir:Nuxt-Parenting userName$
(１) ? What do you want to use as your public directory? ( public )
デプロイ行うディレクトリを決定します。
create-react-app なら npm run build を実行したら build ディレクトリが作成され、ビルドしたファイルが保存されますが、今回取り扱っているNuxt.jsでは、『 distディレクトリ 』を作成します。
デフォルトではpublicになっていますので dist に設定をします。
(２) ? Configure as a single-page app ( rewrite all urls to /index.html )? (y/N)
構成を聞かれます。SPAならばYesを選択し、それ以外ならばNoを選択します。
今回はSSRを用いていたので、Noを選択しました。
(３) ? Set up automatic builds and deploys with GitHub? (y/N)
GitHubで自動ビルドとデプロイを設定するか問われるので、お好きな方を選択してもらえれば大丈夫です。
⚠️ 注意する質問 ⚠️
? File public/index.html already exists. Overwrite? (y/N)
-> publicファイルのindex.htmlはフォルダが存在していますよ、上書きしますか？と問われますので、既存のindex.htmlファイルを上書きしないように No と選択して下さい。
3. ビルドを行う
ビルドを行うために、ビルド先を指定してあげる必要があります。
firebase.jsonの public のデフォルトが public になっているので、 dist を設定する。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
次に、 npm run build のコマンドでビルドを実行する。
これで .distディレクトリにコピーされるはずでした・・・。
POINT : buildとgenerateの違い
・build ： Node.js サーバにデプロイ するとに使うコマンド
nuxt.config.json でデフォルトの target: 'server' が設定されているときに，
npm run build を実行すると project/.nuxt/dist 以下にファイルが生成される。
Ex:) Heroku、Digital Ocean
・generate：ホスティングサービスにデプロイ するときに使うコマンド
nuxt.config.json で target: 'static' が設定されているときに，
npm run generate を実行するとproject/dist 以下にファイルが生成される。
Ex:) Netlify、Vercel、Firebase Hosting
今回、ホスティングサービスにデプロイを行う為、nuxt.config.json に target: 'static'を設定する。
export default {
・・・ 省略 ・・・
target: 'static',
// hostingの時に書いてあげると、.nuxtのdistをコピーできるよ！
}
再度 npm run build のコマンドでビルドを実行する。
distフォルダがプロジェクト内に作成されていれば成功です！
4. デプロイを行う
firebaseへのアプリ登録手順については省きます！
こちらのサイトに細かく明記されていましたので、閲覧し進行して頂ければ問題ないです！
最後に、firebase deploy とコマンド入力し、デプロイを実行します。
※ 下記の「**********-*****」はデプロイを行うアプリ名です。
userNamenoAir:Nuxt-Parenting userName$ firebase deploy
=== Deploying to '**********-*****'...
i deploying hosting
i hosting[**********-*****]: beginning deploy...
i hosting[**********-*****]: found 15 files in public
+ hosting[**********-*****]: file upload complete
i hosting[**********-*****]: finalizing version...
+ hosting[**********-*****]: version finalized
i hosting[**********-*****]: releasing new version...
+ hosting[**********-*****]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/***** (frebaseのリンクURL)
Hosting URL: https://**********.firebaseapp.com (開発プロジェクトの公開URL)
「Deploy complete!」と表示されればデプロイは完了です！
上記の「Hosting URL：https://**********.firebaseapp.com」よりリンクするとwebページにて
作成したアプリ画面が表示されるはずです。
また、Firebase consoleのHostingページを開き、
ダッシュボードから公開URLを確認することも可能です。
デプロイを行った日時の確認や、デプロイデータの保存数なども自動設定することが出来ます。
(キャプチャでは、5データを自動保存設定しだものになっています。)
Firebase Hostingを用いたデプロイ手順は以上になります！
おわりに
Firebaseでのデプロイに躓き何時間も調べる羽目になってしまったので、同じ思いをされいる方は参考にしてみて下さい…！また、今回の大きな問題点は「distファイル」が作成されなかった事です。ポイントとなったのは build と generate で、扱っているサーバーに適したコマンドを使用する必要性があると新たに学ぶことが出来ました。
今後もデプロイは必ず触れてくるものだと思いますので、hostingだけでなく他の方法も試していきます！
参考
・Firebaseでデプロイしよう！：https://qiita.com/hiroki-harada/items/ca22ac177db68e3c3796
・デプロイでこけた話：https://qiita.com/dai_designing/items/d91cb416ac15d7b9423f
・Setup Completeなのに反映されない
：https://bokunonikki.net/post/2019/1110_firebase_cannot_deploy/
・buildとgenerateの違い
：https://blog.mktia.com/diffrences-between-build-and-generate-in-nuxt/