macbook買いたてでfirebase-startup-kitをsetup

# 最初に

https://github.com/snakajima/firebase-startup-kit

* こちらのkitをsetupした
* 完全に自分用の作業＆実行履歴
* 解説等はなし

# macにnode.jsをインストール
https://qiita.com/yacchi1123/items/a85598bf7a35cb1307dc
https://www.suzu6.net/posts/45/

を参考に進める

## Homebrewのインストール

https://brew.sh/index_ja.html にアクセス

インストール用のスクリプトを実行

```terminal
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Installation successful!を確認

## nodebrewのインストール
nodebrewのPATH変数を設定

```terminal
$ brew install nodebrew 
```

プロファイルを開く

```terminal
$ vi ~/.bash_profile
```


以下の内容を追加

```text
# for nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

nodebrewのPATH変数の読込み

```terminal
$ source ~/.bash_profile
```

確認

```terminal
$ nodebrew -v
```

```terminal
$ nodebrew -v
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```

## node.jsのインストール

そのままだとエラーがでたので

```terminal
$ mkdir -p ~/.nodebrew/src
```

```terminal
$ nodebrew install-binary latest
```

バージョン確認

```terminal
$ nodebrew list
v12.3.1

current: none
```

有効にする

```terminal
$ nodebrew use v12.3.1
use v12.3.1
$ node -v
v12.3.1
```

その他、tabを有効にした
http://neos21.hatenablog.com/entry/2017/03/16/194231

# firebase-startup-kit

https://github.com/snakajima/firebase-startup-kit

から今回はzipをダウンロード、以下のディレクトリに展開

```
/Users/***/Develop/FirebaseSample/firebase-startup-kit
```

このディレクトリに移動する

## firebaseツールインストール

firebaseツールをインストールするために "npm install firebase-tools -g"を実行

```terminal
npm install firebase-tools -g
```

```terminal
$ npm install firebase-tools -g
/Users/***/.nodebrew/node/v12.3.1/bin/firebase -> /Users/***/.nodebrew/node/v12.3.1/lib/node_modules/firebase-tools/lib/bin/firebase.js

> fsevents@1.2.9 install /Users/***/.nodebrew/node/v12.3.1/lib/node_modules/firebase-tools/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/***/.nodebrew/node/v12.3.1/lib/node_modules/firebase-tools/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote
+ firebase-tools@6.10.0
added 579 packages from 294 contributors in 24.06s
```

## 必要なノードモジュールを取得

必要なノードモジュールを取得するために "npm install"を一度実行

```terminal
npm install
```

```terminal
$ npm install

> fsevents@1.2.9 install /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/chokidar/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote

> fsevents@1.2.9 install /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/jest-haste-map/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/jest-haste-map/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote

> grpc@1.20.3 install /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download 
[grpc] Success: "/Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown/grpc_node.node" is installed via remote

> core-js@2.6.8 postinstall /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/babel-runtime/node_modules/core-js
> node -e "try { require('./scripts/postinstall'); } catch (e) { /* empty */ }"

Thank you for using core-js ( https://github.com/zloirock/core-js )!

Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js-pure@3.1.2 postinstall /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/core-js-pure
> node -e "try { require('./scripts/postinstall'); } catch (e) { /* empty */ }"

Thank you for using core-js ( https://github.com/zloirock/core-js )!

Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> protobufjs@6.8.8 postinstall /Users/***/Develop/FirebaseSample/firebase-startup-kit/node_modules/protobufjs
> node scripts/postinstall

added 1722 packages from 890 contributors and audited 889446 packages in 41.816s
found 0 vulnerabilities
```

同様にfunctionsディレクトリで "npm install"を実行

```terminal
cd functions/
npm install
```

```terminal
$ cd functions/
$ npm install

> grpc@1.21.1 install /Users/***/Develop/FirebaseSample/firebase-startup-kit/functions/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download 
[grpc] Success: "/Users/***/Develop/FirebaseSample/firebase-startup-kit/functions/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown/grpc_node.node" is installed via remote

> protobufjs@6.8.8 postinstall /Users/***/Develop/FirebaseSample/firebase-startup-kit/functions/node_modules/protobufjs
> node scripts/postinstall


> firebase-functions@2.3.1 postinstall /Users/***/Develop/FirebaseSample/firebase-startup-kit/functions/node_modules/firebase-functions
> node ./upgrade-warning


======== WARNING! ========

This upgrade of firebase-functions contains breaking changes if you are upgrading from a version below v1.0.0.

To see a complete list of these breaking changes, please go to:

https://firebase.google.com/docs/functions/beta-v1-diff

added 352 packages from 236 contributors and audited 1095 packages in 15.218s
found 0 vulnerabilities
```
## Firebaseにプロジェクト追加&設定

https://firebase.google.com

にアクセス、Googleアカウントでログイン

プロジェクトを作成
https://qiita.com/kohashi/items/43ea22f61ade45972881#firebase%E3%82%92%E5%A7%8B%E3%82%81%E3%81%A6%E3%81%BF%E3%82%8B

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342109/2dfd915d-f13a-243b-dd84-59ae96bcc27c.png)

このプロジェクトのダッシュボードから、アプリを追加して "web"（</>）を選択

プロジェクトの設定＞全般＞マイアプリ、Firebase SDK snippetの「構成」

設定ファイルをコピーして、src / config.jsファイルに貼り付け

```javascript
// Replace this section with the config file of your own Firebase project.
const firebaseConfig = {
  apiKey: "**************************",
  authDomain: "test-hoge**.firebaseapp.com",
  databaseURL: "https://test-hoge**.firebaseio.com",
  projectId: "test-hoge**",
  storageBucket: "test-hoge**.appspot.com",
  messagingSenderId: "***************",
  appId: "*********************************"
};

export default firebaseConfig;
```

.firebasercファイルの「skelton-us」という単語をFirebaseプロジェクトIDに置き換え

```text
{
  "projects": {
    "default": "test-hoge**"
  }
}
```

firebaseコンソールを開き、Cloud Firestoreを作成（secureの方を推奨）

## Firebaseにデプロイ

npm run buildでビルドする
buildディレクトリに生成される

```terminal
npm run build
```

```terminal
$ npm run build

> blog@0.1.0 build /Users/***/Develop/FirebaseSample/firebase-startup-kit
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  297.86 KB  build/static/js/2.315ae836.chunk.js
  2.7 KB     build/static/js/main.3da476f3.chunk.js
  762 B      build/static/js/runtime~main.a8a9905a.js
  271 B      build/static/css/main.34de6062.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy
```

Firebaseにログイン
https://qiita.com/Watakatsu/items/667f45081a6dfbc11074

```terminal
firebase login
```

```terminal
$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

Visit this URL on any device to log in:
https://accounts.google.com/************************

Waiting for authentication...

✔  Success! Logged in as *******@gmail.com
```

deploy先を指定

```terminal
firebase use --add
```

```terminal
$ firebase use --add
? Which project do you want to add? test-hoge**
? What alias do you want to use for this project? (e.g. staging) default

Created alias default for test-hoge**.
Now using alias default (test-hoge**)
```

deploy

```terminal
firebase deploy
```

```terminal
$ firebase deploy

=== Deploying to 'test-hoge**'...

i  deploying firestore, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/***/Develop/FirebaseSample/firebase-startup-kit/functions
> tslint --project tsconfig.json

Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build /Users/***/Develop/FirebaseSample/firebase-startup-kit/functions
> tsc

✔  functions: Finished running predeploy script.
i  firestore: checking firestore.rules for compilation errors...
i  firestore: reading indexes from firestore.indexes.json...
✔  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  firestore: uploading rules firestore.rules...
✔  firestore: deployed indexes in firestore.indexes.json successfully
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (33.92 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting[test-hoge**]: beginning deploy...
i  hosting[test-hoge**]: found 14 files in build
✔  hosting[test-hoge**]: file upload complete
✔  firestore: released rules firestore.rules to cloud.firestore
i  functions: creating Node.js 8 function helloWorld(us-central1)...
✔  functions[helloWorld(us-central1)]: Successful create operation. 
Function URL (helloWorld): https://us-central1-test-hoge**.cloudfunctions.net/helloWorld
i  hosting[test-hoge**]: finalizing version...
✔  hosting[test-hoge**]: version finalized
i  hosting[test-hoge**]: releasing new version...
✔  hosting[test-hoge**]: release complete

✔  Deploy complete!

Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/test-hoge**/overview
Hosting URL: https://test-hoge**.firebaseapp.com
```

# 参考
【Mac】node.jsインストール方法 - Qiita
https://qiita.com/yacchi1123/items/a85598bf7a35cb1307dc

MacにNode/npmをインストールする手順 2019年1月更新 - suzu6
https://www.suzu6.net/posts/45/

bash-completion：Mac のターミナルで Tab 補完を有効にする - Corredor
http://neos21.hatenablog.com/entry/2017/03/16/194231

Firebaseの始め方 - Qiita
https://qiita.com/kohashi/items/43ea22f61ade45972881#firebase%E3%82%92%E5%A7%8B%E3%82%81%E3%81%A6%E3%81%BF%E3%82%8B

Firebaseで初めてのデプロイ - Qiita
https://qiita.com/Watakatsu/items/667f45081a6dfbc11074