aoma blog

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

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

IT Firebase GitHub Maday

おはこんばんちは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...

複数のGitHubアカウント運用で片方のプライベートリポジトリをcloneできなくて困った話

IT GitHub 複数アカウント エラー

仕事用と個人用などで複数GitHubアカウントを持ってる人は多いと思います。 で、仕事用リポジトリに個人用の（決して知られたくない）アカウントでコミットしてしまったー！という事故が発生することも多いと思います。 私もその一人です。

原因も解決策もよくわかってないのですが、今回PCを初期化したこともありしっかり設定することにしました！

ひとつのPCで複数GitHubアカウントを運用する

参考にさせていただいたのはこちらの記事！

複数のGitアカウントを手動切替不要で運用する - Qiita

手動で切り替える必要なしということで最高だなと思い設定させていただきました。（完全自動化は諦めたのですが（後述））

設定手順

1. 鍵を作る

お前らのSSH Keysの作り方は間違っている - Qiita を参考に仕事用と個人用で2つ作りました。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

余談：コメント欄にメアド入れるのが一般的って書いてあったのでその通りにしたけど、公開鍵の中に記載されるから微妙だな。。次から こうしよう。

ssh-keygen -t rsa -b 4096 -C "aoma" -f ~/.ssh/id_rsa_aoma

公開鍵をコピーして、それぞれのGitHubアカウントに登録します。

pbcopy < ~/.ssh/id_rsa.pub # クリップボードにコピーするコマンド

2. 使用する秘密鍵の設定

~/.ssh/configの設定をします。 あんまりよくわかってないんですが、Hostごとにどの秘密鍵を使うか。的な？

vi ~/.ssh/config

Host github_work
HostName github.com
User git
IdentityFile ~/.ssh/id_rsa
IdentitiesOnly yes
UseKeychain yes
AddKeysToAgent yes

Host github_aoma23
HostName github.com
User git
IdentityFile ~/.ssh/id_rsa_aoma
IdentitiesOnly yes
UseKeychain yes
AddKeysToAgent yes

3. cloneしたリポジトリに設定する

下記のようにcloneする親ディレクトリを用意します。

そして、cloneしたリポジトリ毎にgit configのコマンドを実行することにしました。

# 仕事用なら
git config --local user.name "hogehoge"
git config --local user.email "hogehoge@users.noreply.github.com"
git config --local url."github_work".insteadOf "git@github.com"

# 個人用なら
git config --local user.name "aoma23"
git config --local user.email "12345601+aoma23@users.noreply.github.com"
git config --local url."github_aoma23".insteadOf "git@github.com"

cloneした際は必ず実行しないといけませんが、そこは頑張ることにしました。

※参考にさせていただいた記事ではここを自動化（cloneしたら自動設定）してたのですが、私には難しすぎて諦めました。

プライベート（非公開）リポジトリがcloneできない！

やっと表題の件なのですが、個人用のPrivate（非公開）リポジトリがcloneできなくてはまりました。

仕事用は非公開リポジトリでもgit clone 〜でクローンできる。（先に秘密鍵作ったから？）

env GIT_SSH_COMMAND="ssh -i ~/.ssh/id_rsa_aoma -F /dev/null" git clone 〜 として秘密鍵指定しても下記のようなエラーに。

% env GIT_SSH_COMMAND="ssh -i ~/.ssh/id_rsa_aoma -F /dev/null" git clone git@github.com:aoma23/test.git 
Cloning into 'test'...
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

う〜む、、と悩んでたら同じような現象になっている人を発見！

GitHubでリモートからcloneできないときにやったこと - Qiita

どうやらSSH公開鍵をGitHubに登録するだけでなく、ssh-agentに秘密鍵を登録する必要あるそうです。

ほうほう。
ということで ssh-agentを利用して、安全にSSH認証を行う - Qiita を参考にssh-agentを登録してみることに。

まずはssh-add -l で現状登録されている鍵を確認！
なるほど、1個（仕事用）しか登録されていない。

ということで個人用の秘密鍵を登録！

ssh-add -K ~/.ssh/id_rsa_aoma

再度ssh-add -l で確認したところ無事2個になってました。

これでcloneいけるのでは！？

% env GIT_SSH_COMMAND="ssh -i ~/.ssh/id_rsa_aoma -F /dev/null" git clone git@github.com:aoma23/test.git 
Cloning into 'test'...
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.

キター！！

コミットも検証しましたがそれぞれのアカウントでしっかりコミットされてました！最高！

誰かの役に立てば幸いです。それではまた！

RampowのUSB変換アダプタを買ったよ！

IT 日常 USB変換アダプタ rampow

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

USB を USB Type C に変換したくてamazonで調べたら なんと 893円という驚きのプライスで売っているじゃありませんか！
しかも2個セット！

Rampow USB Type C to USB 3.0 変換アダプタ【2個セット/保証付き】MacBook Pro/Air/iPad Pro 2019/Surface/Sony Xperia/Samsung USB C to USB 3.1 Gen1 OTG対応 10Gbit/sの超高速データ転送 10000+回の抜き差しテスト 変換コネクタ 在宅勤務支援

Rampow USB Type C to USB 3.0 変換アダプタ【2個セット/保証付き】MacBook Pro/Air/iPad Pro 2019/Surface/Sony Xperia/Samsung USB C to USB 3.1 Gen1 OTG対応 10Gbit/sの超高速データ転送 10000+回の抜き差しテスト 変換コネクタ 在宅勤務支援

  • メディア: エレクトロニクス

ということで買ってみました！

保証サービスの紙が可愛くていい感じ。
高級感もあるし普通に使えました！

ありがとうRampow！いい商品です！オススメ！

（なんかステマ記事みたいになってしまったw）

OKRの本を呼んだよ！

IT OKR 日常 読書

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

シリコンバレー式で大胆な目標を達成する方法 読みましたー！

OKR（オーケーアール）

OKR（オーケーアール）

ハンナとジャックおもしろかった！

OKR身につけたぜー！！

  • OKRが間違っていることに気付いても途中で変えてはならない
    • 途中で変えると真面目に取り組まなくていいという印象をチームに与えてしまう
    • くよくよせずにそのまま進み、成功や失敗を次の設定に活かす
  • プロダクトチームのOKRが上にある
    • まず部門ごとにOKRを作ってしまうと板挟みになってカオスになりがち
    • 初めは会社のOKRのみにしたり特定のチームだけでやってみるなど、小さく始めて浸透させていくとよい
  • OももちろんだがKRもポジティブなものにする。（失注を20%未満にするといったネガティブな数値目標はNG。80％以上継続するといった感じ）

読みやすかったのでオススメです！ぜひー。

LICEcapがmacのcatalinaで動かないときの対処法

IT LICEcap mac エラー

catalinaのmacにLICEcap入れたら全く動きませんでした。 saveボタンを押しても一向に動いてる気配がない感じ。。

ということでググった解決法をメモ。

  1. パーミッションを許可する

https://user-images.githubusercontent.com/1505339/67440500-545ce700-f5ae-11e9-869e-94805dc38041.png

上記キャプチャのようにパーミッションを有効にしてあげる必要があるのですが、全然項目にLICEcapが出てきません。

を参考に下記コマンドを実行しました。

sudo xattr -rd com.apple.quarantine /Applications/LICEcap.app
  1. 保存時に.gifを指定する

一番の原因はこれだったような気がします。 保存するファイル名に拡張子を指定してあげないと動かないらしく、.gifをつけたら動きました。

f:id:aoma23:20200309193339p:plain

動いて良かったー！

デブサミ2020に行ってきた！

IT カンファレンス デブサミ

行ってきました！デブサミ2020の1日目！ 寝坊しちゃって午後から参戦。ランチセッション逃したー。涙

event.shoeisha.jp

参加したセッションの一言メモ

13-D-5 ともにつくる「DX」〜事業会社、スタートアップ、グローバル、そして・・・「あなた」〜

株式会社Insight Edgeは住友商事グループのDXを推進するエンジニア集団だってことはわかったが「DX」はなんなのかよくわからなかったぜ！

13-A-6 GitHubやMicrosoftが機能リリースする舞台裏

カナリアリリース大事。なんでもチャットbotがやっちゃう。リリーストレイン？それリリースブランチのことちゃうかー？

13-B-7 コンテナをシンプルに使おう 〜 Cloud Run のすゝめ 2020 冬

Cloud Run使ってみよー！そのためにもまずはコンテナの学習が必要だ。がんばれ俺！いや俺にはApp Engineで十分な気もする。独自コンテナなんて俺には必要ないし！

13-E-8 チームをつくるモブプログラミング ～内側と外側から語る～

モブプロはいいぞ！

今回のデブサミで一番驚いたこと

雅叙園のトイレ縮小してる！！

f:id:aoma23:20200213225605j:plain

小便器が橋の手前に！！

比較：人生一度は行きたい！目黒雅叙園のトイレ。 - aoma blog

明日も楽しみましょー！

CUNEの地獄袋 開封の儀

日常 CUNE 地獄袋

地獄袋、運良く抽選に当たりましてGETしました！

CUNE 地獄袋 2020のチケット情報・予約・購入・販売｜ライヴポケット

サイズはざっくり「小さめ」と「大きめ」の2種類とのことで、「大きめ」を選びました！

これより開封の儀をとり行う

いきます！

  • デニム
  • ジップパーカー×2
  • パーカー
  • ヘアバンド×4
  • ペンケース
  • ハギレ×2
  • 入場チケットバンド
  • 初音ミクコラボタグ多数
  • ポストカード多数
  • 20と描かれたペロペロキャンディ
  • ボールペン1本
  • 結束バンド1本

かなり嬉しい結果でしたー！
CUNE好きだな。

追記

ちなみにパーカーにはワレメとヤブレがありました。