まずgithubにリポジトリを作る
とりあえずprivateで作る。
nuxt.jsをインストール
ローカルのgitフォルダにプロジェクトを作る。
$ npm i create-nuxt-app フォルダ名
github、sourcetreeを連携しようとするもエラー
「すでにフォルダがあるよ」と両方から怒られる。
→挫折。一度睡眠。
17:30 起床
nuxt.jsとgithub、sourcetreeの連携
参考「Nuxt.jsをGitHubで管理する」
原因
sourcetreeで
新規＞URLからクローン
をしていたため。
sourcetreeで管理する
SourceTreeを起動し、
新規 > 既存のローカルリポジトリを追加
pushしようとするもマスターが表示されない
解決方法
$ git add .git
$ git commit -m "first commit"
$ git remote add origin ここにgitのリポジトリのURL
$ git push -u origin master
ブランチの追加をコマンドラインで行う。
一度、gitのリセットして.gitフォルダを作る
$ git init
今度はgitコマンドのエラー
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
解決方法
Xcodeのインストールで解決する。
再度、コマンドを打つと無事成功。
これでsourcetreeでgit管理できるようになった。
firebaseへホスティング（デプロイ）する。
参考「Nuxt.jsで作成したWebサイトをFirebaseでホスティングする」
nuxt.config.jsを変更する。
build: {
...
},
generate: {
dir: 'public'
}
静的ファイルを書き出してみる。
npm run generate
publicフォルダに吐き出されたみたいので次に進む。
firebaseにプロジェクトを作る
firebase-toolsを入れていなかったらインストールする。
npm install -g firebase-tools
とりあえずfirebaseにログイン
firebase login
ログイン後にfirebaseの初期化（設定し直す）
firebase init
いろいろ聞かれますが
一応、hosting以外も全て使うようにする。
デプロイしてみる
firebase deploy
エラーになる...
firebase.jsonエラー
Not in a Firebase app directory (could not locate firebase.json)
アプリの追加をする
「このアプリのFirebase Hostingも設定します。」
にチェックを入れて、アプリを登録
firebase.jsonエラー2
まだエラーが出る。
全てにチェックしたのが原因みたい。
firebaseの管理画面で
- cloud Firestore
- realtime database
を作成する
またターミナルでfirebaseからいろいろ聞かれるが全てyesで答える。
すると作業ディレクトリに
firebase.json
が作成される。
デプロイするとまたエラー...
参考SSRで作ったNuxtアプリをFirebase hostingで動的にデプロイする。
/functions/package.json
にnodeのバージョンとNuxtを追加。
Nuxtのバージョンはnuxt.config.jsに記述されているのを追加。
（見直したらhostingだけだとこの設定は要らなかった。）
/functions/に$cdで移動して
npm install
そしてまた作業ディレクトリに戻ってデプロイのコマンドを叩く。
またエラー...
エラー内容
npm ERR! functions@ lint: `eslint .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the functions@ lint script.
↓
firebase.jsonの
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
},
を削除
またまたエラー...
Error: HTTP Error: 400, Billing account for project
/functions/package.json
初めの方でnodeのバージョンを8→10が原因だった。
"engines": {
"node": "10"
},
"engines": {
"node": "8"
},
またまたまたエラー...
何回目だろうか。
ホスティングするディレクトを変更する。
"hosting": {
"public": ".nuxt/public",
"ignore": [
↓
"hosting": {
"public": "public",
"ignore": [
エラーですね...
Error: HTTP Error: 404, Requested entity was not found.
firebase toolsを最新のバージョンにすると解決するらしい。（インストールしてたつもりでも、こういうのはあるのですね）
最新にしてまたデプロイ
Error: package.json in functions directory has an engines field which is unsupported. Valid choices are: {"node": "10"}, {"node":"12"}, and {"node":"14"}.
"engines": {
"node": "8"
},
"engines": {
"node": "10"
},
デジャヴかと思い、10にする
エラーが変わった。
Error: Your project {プロジェクトID} must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:
https://console.firebase.google.com/project/{プロジェクトID}/usage/details
このプロジェクトのプランだとそのコマンドはできませんよ。プランを確認してね。
みたいなことが書いてある。
functionsだったり色々入れたので全てデプロイはできないということなのか。
なので
hostingだけにしてデプロイする。
firebase deploy --only hosting
すると
Deploy complete!
で、でき...！
しかし、あれ？firebaseの初期画面？？
npm run generate
を再度行って
firebase deploy --only hosting
再度アクセス
で、できた！！！
20:20 一応できた。
都度、エラーなどメモりながら作業をしていたのでまとめる
20:50 まとめ終わり
今後ちゃんと覚えること
- gitについて
- 設定はちゃんと必要なものだけ入れること（firebaseでとりあえず全部入れたらエラーが出まくったから）
- nodeのこと
- npm、yern、npxの仕組み