Firebaseをまったくの未経験から使ってインターネットにHTML公開するまで

Firebaseを使ってみます

Firebaseとは

BaaS（Backend as a Service)でリアルタイム同期が特徴です。

特徴: https://thinkit.co.jp/article/9451

補足の用語

 .【CDNサーバ】：コンテンツデリバリーネットワーク
   単にファイル（画像やZIPファイル等）をダウンロード配信するための技術。 
    CDNはファイルをただ配信するだけのサーバー達で構成されたネットワークのこと。

Firebase使う

ゴールは自身で作成したHTMLファイルをインターネット上に公開して、スマートフォンなどの他の端末からも閲覧できるようにするところまです。

・公式サイトでgoogleアカウントでログインして、プロジェクトを作成します。
使う機能はhostingサービスです。

利用するためには、環境整備

node.js ＠自端末

・サーバサイドで動くJavaScript
javascriptは基本フロントエンド側の言語として利用していたが、サーバ再度側にも使いやすくしたのでnode.jsです。

JavaScriptはブラウザ上で動くために開発されたプログラミング言語だ。ブラウザ上で、ページに動きを追加するのがメインのお仕事である。
クリックすると写真が大きくなったり
メイン画像が定期的に横にスライドしたり
ポップアップで注意が出たり
こういった動きはJavaScriptでできている。

実は、JavaScriptはブラウザ上だけではなく、サーバサイドでも動く。PHPやJavaなどと同じような使い方ができるということだ。
サーバサイドJavaScriptと呼ばれるが、その中でも代表的なのがNode.jsだ。現状は、他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけばいいだろう。

参考 -> https://eng-entrance.com/what-is-nodejs

firebaseはnode.jsを使って操作をしていく。

npm（node package manager） ＠自端末

node.jsをインストールすると合わせてインストールされます。
Node.js用のパッケージマネージャ
Rubyでいう gem 、 Perlでいう cpanm

バージョン確認 ＠自端末

$ node -v
v8.12.0
$ npm -v
6.4.1

次にFirebase ＠自端末

ログインgoogleアカウントにログインをします.
$ firebase login

プロジェクトを開始
$ firebase init

$:public mbpshu$ firebase init

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

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

  /Users/mbpshu/devwork/work_firebase/public

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting:
 Configure and deploy Firebase Hosting sites

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

? Select a default Firebase project for this directory: mytestproject (mytestproject-e18b8)

=== 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)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

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

✔  Firebase initialization complete!

デプロイ(自端末からfirebaseのコンテナに資材を配布（アップロード）する作業）
$ firebase deploy
→プロジェクトのフォルダで実行すること（publicの上のｐフォルダ）

$ firebase deploy

=== Deploying to 'mytestproject-e18b8'...

i  deploying hosting
i  hosting[mytestproject]: beginning deploy...
i  hosting[mytestproject]: found 2 files in public
✔  hosting[mytestproject]: file upload complete
i  hosting[mytestproject]: finalizing version...
✔  hosting[mytestproject]: version finalized
i  hosting[mytestproject]: releasing new version...
✔  hosting[mytestproject]: release complete

✔  Deploy complete!

Project Console: <https://console.firebase.google.com/project/XXXXX>
Hosting URL: <https://XXXXX>

https://XXXXXX

完了

ここまでくれば、 スマートフォンからでも閲覧可能。
projectフォルダ配下のpublicフォルダ内のindex.htmlを編集し、
都度deployすれば、インターネットにページを公開できます。

別のサイトをアップロードしたい場合

・コンソールでプロジェクトを作成
・公開したフォルダを自端末に作成(publicフォルダ）
・firebaseでinitして、deployする。

次は・・・・・

メモ帳か掲示板のようなサービスを作成したい。
ツイッターアカウントでログインして、ユーザごとに実施できるやつ。