Fukuoka Firebase #1

## Firebaseで作るServerless Web Application ### Fukuoka.Firebase1 清家史郎(@seike460)

###### Who? Fusic Co., Ltd.  清家史郎  @seike460 [](https://twitter.com/seike460) [](https://www.facebook.com/seike460) [](https://github.com/seike460)

### tech - Program Language - PHP - Go - infrastructure - Server, Network - IaC - Cloud - AWS SA Professional - Other - Serverless - Vue.js、React

### OSS products - AWS Tools (Go) - [FictionBase](https://github.com/fictionbase/fictionbase) - Serverless Runtimel Base - [s3ry](https://github.com/seike460/s3ry) (s3 prompt cli) - S3を使いやすくしたCLI - [utakata](https://github.com/seike460/utakata) (Serverless Slack Notificatier) - iCalイベントをSlack通知する

このスライドは公開済みです https://slide.seike460.com/slides/fukuokafirebase1#/

#### Agenda - FirebaseとWebとServerless <!-- .element: class="fragment" --> - 今回のArchitecture <!-- .element: class="fragment" --> - 構築手順 <!-- .element: class="fragment" --> - まとめ <!-- .element: class="fragment" -->

### FirebaseとWeb Application mBaaS(mobile backend as a Service)に分類されると良く言われていた 最近は `mobile and web`と言っている -> Web作ってみるか

### FirebaseとServerless - Firebase、Serverless - Firebase Hosting - Web Hosting - Firebase FireStore - KVS - Firebase Authenication - 認証 - Firebase Cloud Function - 関数 ServerlessなWeb作ってみるか <!-- .element: class="fragment" -->

### 何を作るか - ライトなやつが良い - 個人でやってるフットサルチームのページを作ろう - 機能 - ユーザー認証 - 参加登録(KVS保存) - メール送信

### Architecture 

### demo

### 構築手順 - Hosting - Nuxtで生成したHTMLを配信 - Auth0 - `ログイン画面`と認証を提供 - Cloud Function - axiosから叩かれるAPIを提供 - FireStore - Cloud Functionが利用するKMS - SendGrid - SMTPを提供

### Hosting Nuxt生成のHTMLをCLIでアップロードするだけ 僕はhostingというディレクトリ内にNuxtを構築してdeploy Bucketをシンボリックリンクにしています ``` $ ln -s hosting/dist dist ``` nuxt buildして、firebase deploy ``` $ cd hosting $ npm run build $ cd ../ $ firebase deploy ``` SSL証明書なども「ドメイン接続」 -> DNSでAレコード設定で簡単に

### Authenication Firebase Authenication を使って実装しようとしたのですが、 画面を提供してくれるAuth0を利用して楽をしました... Firebase Authenication + Nuxtの認証に書かれたQiitaは[こちら](https://qiita.com/redshoga/items/da5c0e247e0df314a257)

Auth0はFirebase Authenicationをbackendにすることも可能 

### Cloud Function + FireStore リクエストを受け付けるエンドポイントを提供 - FireStoreへの保存 Nodeの場合 ``` const admin = require('firebase-admin') const collection = firestore.collection('join'); collection.add({ name: name, date: new Date(), }) ```

#### Cloud Function + SMTP 潔いマニュアル↓ [SendGrid を使ってメールを送信する](https://firebase.google.com/docs/functions/tips?hl=ja#use_sendgrid_to_send_emails) ``` Cloud Functions はポート 25 での送信接続を許可しないため、保護されていない接続では SMTP サーバーに接続できません。 メールを送信するには、SendGrid を使用することをおすすめします。 ``` ※Gmailなら利用出来るとのこと Nodeの場合 ``` const sgMail = require('@sendgrid/mail'); // APIKEYをセットして sgMail.setApiKey("XxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxX"); const msg = { to: 'futsal@seike460.com', from: 'futsal@seike460.com', subject: 'フットサルに参加者が現れました', text: name + 'さんが参加しました', }; // 送るだけ sgMail.send(msg); ```

### まとめ - FirebaseはFull Serverless Webに出来るbackendがある - 細かい事は良いから作ってみた - Full Firebaseだけじゃなくて、周辺Serviceを使うと幸せになれそう

# 宣伝

### Serverless Days Japan Tour 2019

### Serverless Days <font color='red'>Japan Tour</font> 2019

### Serverless Days Tokyo 2019 <!-- .element: class="fragment" --> ### <font color='red'>Serverless Days Fukuoka 2019 </font> <!-- .element: class="fragment" -->

福岡にServerlessの波が来る！ Firebaseな皆様のCfpをお待ちしております(まだ準備中...) `Serverless Meetup Fukuoka #5` もあるよ

Thank you! Fusicは技術が大好きなエンジニアを募集しています  https://fusic.github.io