aoma blog

エンジニアの日常とか技術とか

【はじめてのFirebase】第一話：GitHub管理からデプロイまで

IT Firebase GitHub Maday
この記事は移転しました。約5秒後に新記事へ移動します。
移動しない場合はココをクリックして新サイトをお楽しみください。

おはこんばんちはaomaです。

今日からMaday（まっでい）というアプリを作っていくことにしました。（どんなサービスかはお楽しみに？）
プラットフォームはFirebaseです！
ただここでひとつ問題がありまして、Firebase使ったことないんですよね。。。

この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである！第一話！

第一話の内容

  • Firebaseをとりあえず構築してブラウザでアクセスできるようになる
  • FirebaseのソースをGitHubで管理できるようになる
  • 途中様々な困難（エラー）に出会うが、記録が残されているのでアナタの助けになるかもしれない...

本編

clone

% env GIT_SSH_COMMAND="ssh -i ~/.ssh/id_rsa_aoma -F /dev/null" git clone git@github.com:aoma23/maday.git
Cloning into 'maday'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

gitアカウント設定

% git config --local user.name "aoma23"
git config --local user.email "51367901+aoma23@users.noreply.github.com"
git config --local url."github_aoma23".insteadOf "git@github.com"

設定されたこと確認

% git config -l                        
credential.helper=osxkeychain
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true
remote.origin.url=git@github.com:aoma23/maday.git
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.master.remote=origin
branch.master.merge=refs/heads/master
user.name=aoma23
user.email=51367901+aoma23@users.noreply.github.com
url.github_aoma23.insteadof=git@github.com

% node -v
v12.16.2

firebase-toolsインストール

% npm install -g firebase-tools                                                
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/local/bin/firebase -> /usr/local/lib/node_modules/firebase-tools/lib/bin/firebase.js

> protobufjs@6.9.0 postinstall /usr/local/lib/node_modules/firebase-tools/node_modules/protobufjs
> node scripts/postinstall

+ firebase-tools@8.1.1
added 532 packages from 357 contributors in 23.914s

googleにlogin

% firebase login

f:id:aoma23:20200424004411p:plain

% % firebase init

とりあえず全選択して進んだら下記エラー、、

=== Firestore Setup

Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations

initコマンドのメモ

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <sp
ace> to select, <a> to toggle all, <i> to invert selection)Database: Deploy Firebase Realtime Database Rules, Firestore: Deploy rules and create in
dexes for Firestore, Functions: Configure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites, Storage: Deploy Cloud S
torage security rules, Emulators: Set up local emulators for Firebase features

=== 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.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: maday-eeeee (maday)
i  Using project maday-eeeee (maday)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
? File database.rules.json already exists. Do you want to overwrite it with the Database Rules for maday-eeeee from the Firebase Console? Yes
✔  Database Rules for maday-eeeee have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules
? File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console? Yes

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> protobufjs@6.9.0 postinstall /Users/aoma23/Documents/repo/aoma23/maday/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 258 packages from 206 contributors and audited 972 packages in 11.843s

30 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== 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? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a
> to toggle all, <i> to invert selection)

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

とりあえずここまでをリポジトリにコミット！

firebase serve すると http://localhost:5000/ にアクセスできること確認。開発はここでやってけばいいのかな？

無事デプロイできて、ブラウザからアクセスできること確認！

ようこそ素晴らしきFirebaseの世界へ。知らんけど。

To Be Continued...