Nuxt.jsをfirebaseにホスティングするために出たエラー全て書き出しておく。

##まずgithubにリポジトリを作る
とりあえずprivateで作る。

##nuxt.jsをインストール
ローカルのgitフォルダにプロジェクトを作る。

```
$ npm i create-nuxt-app フォルダ名
```

## github、sourcetreeを連携しようとするもエラー
「すでにフォルダがあるよ」と両方から怒られる。
→挫折。一度睡眠。

**17:30 起床**
nuxt.jsとgithub、sourcetreeの連携
参考「[Nuxt.jsをGitHubで管理する](https://note.com/youtarow/n/nf7e8d2aff2b1)」

**原因**
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でホスティングする](https://deha.co.jp/magazine/nuxt-js/)」
nuxt.config.jsを変更する。

```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で動的にデプロイする。](https://qiita.com/sychocola1/items/c3f329da3a14c85c3a73)

/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の


```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が原因だった。

```/functions/package.json
  "engines": {
    "node": "10"
  },
```

```/functions/package.json
  "engines": {
    "node": "8"
  },
```

##またまたまたエラー...
何回目だろうか。
ホスティングするディレクトを変更する。

```firebase.json
  "hosting": {
    "public": ".nuxt/public",
    "ignore": [
```
↓

```firebase.json
  "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"}.
```

```/functions/package.json
  "engines": {
    "node": "8"
  },
```

```/functions/package.json
  "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の初期画面？？
![Welcome_to_Firebase_Hosting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/9d7e5203-9881-eae8-21ab-75008111177e.png)

```
npm run generate
```
を再度行って

```
firebase deploy --only hosting
```
再度アクセス
![FireShot Capture 057 - best5 - best5 - best5-f6dd8.web.app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/6908140c-ccc0-fe85-08cb-b3f05631ec51.png)

で、できた！！！

**20:20 一応できた。**

都度、エラーなどメモりながら作業をしていたのでまとめる

**20:50 まとめ終わり**

#今後ちゃんと覚えること

- gitについて
- 設定はちゃんと必要なものだけ入れること（firebaseでとりあえず全部入れたらエラーが出まくったから）
- nodeのこと
- npm、yern、npxの仕組み