MawaLog

一日一日を大切に、楽しく生きる。技術と音楽が好き。

Firebaseでプロジェクトをコード書いて=>WebAPIサーバーに仕立てるときのコマンドのメモ

memo

Firebaseを使い始めるときのコマンドのメモ

環境
MacOS
・npm
・FirebaseCLIでログイン済み

1:プロジェクトを作る

Webコンソールにログインして、プロジェクトを作っておく

2:コマンドを作業ディレクトリをつくって打つ

$ firebase init hosting

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

//なんかFirebaseぽいロゴが・・・笑

You're about to initialize a Firebase project in this directory:

  /自分が/設定した/ディレクトリ

=== Project Setup

? Select a default Firebase project for this directory: [create a new project]

// 手順1で作っておいたプロジェクトを選ぶ

=== Hosting Setup
? What do you want to use as your public directory? public

//public

? Configure as a single-page app (rewrite all urls to /index.html)? No

//N

✔  Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

//多分成功したっぽい

これでホスティングの準備ができた模様

3:functionsを初期化

functions/index.jsというのができるので、そこにWebAPIを書くとWebAPIサーバーの準備はできる

$ firebase init functions

//中略

=== 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
? Do you want to install dependencies with npm now? Yes

4: functions/index.jsにコードを書く

ここは個々人の目的にあったAPIを書く

5: デプロイ

WebAPIの関数部分だけのデプロイはこのようにやるっぽい

(firebase.jsonがあるディレクトリで実行)
$ firebase deploy --only functions

//デプロイ先が出てくる。curlなどで試すとよい

//Error: Not in a Firebase app directory (could not locate firebase.json)

curlテストもうまくいき、とりあえずWebAPIの簡易サーバーはできた

参考になった書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発