Go to Qiita Advent Calendar Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@KKoh

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

Posted at

最初に

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

macにnode.jsをインストール

https://qiita.com/yacchi1123/items/a85598bf7a35cb1307dc
https://www.suzu6.net/posts/45/

を参考に進める

Homebrewのインストール

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

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

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

Installation successful!を確認

nodebrewのインストール

nodebrewのPATH変数を設定

$ brew install nodebrew

プロファイルを開く

$ vi ~/.bash_profile

以下の内容を追加

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

nodebrewのPATH変数の読込み

$ source ~/.bash_profile

確認

$ nodebrew -v

$ 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のインストール

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

$ mkdir -p ~/.nodebrew/src

$ nodebrew install-binary latest

バージョン確認

$ nodebrew list
v12.3.1

current: none

有効にする

$ 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

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

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

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

firebaseツールインストール

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

npm install firebase-tools -g

$ 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"を一度実行

npm install

$ 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"を実行

cd functions/
npm install

$ 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にプロジェクト追加&設定

にアクセス、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

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

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

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

// 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に置き換え

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

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

Firebaseにデプロイ

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

npm run build

$ 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

firebase login

$ 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先を指定

firebase use --add

$ 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

firebase deploy

$ 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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?