よしたく blog

ほぼ週刊で記事を書いています

ドットインストールの「Firebaseでウェブサイトを公開してみよう」を見た

Firebase オンライン学習

f:id:yoshitaku_jp:20181128144942p:plain

Firebaseが流行っているので、ちょっと学習したいなと思いました。いくつか動画学習サイト探していたら、ドットインストールでFirebaseでウェブサイトを公開してみようがあったので、触ってみました。

https://dotinstall.com/lessons/hosting_firebase

公開するサイトのソースコードは学習サイト内で作ったものを使用するようなので、必要があればこちらを受講することをおすすめします。

#01 Firebaseでサイトを公開してみよう 02:20

  • FirebaseにはHosting機能がある
  • Firebaseには無料枠がある
    • サイトを公開する程度なら十分
      • 容量1GB
      • 毎月の転送量10GB

#02 プロジェクトを作ってみよう 02:33

  • 公開するフォルダの名前はpublicにする
  • public配下のファイルがすべて公開される
    • 公開したくないファイルはpublicから除いておく

#03 Node.jsをインストールしよう 02:08

  • FirebaseはNode.jsを使って操作する
  • インストールだけの章
  • control + lでコンソールをクリアすることができる
    • 知らなかった

#04 firebase-toolsをインストールしよう 02:23

  • Firebaseのコマンドラインツールをインストールする
    • sudo npm install -g firebase-tools
  • firebase -Vでバージョン確認
  • firebase loginでログインをする
    • Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)と利用情報の送信を許可するか聞かれる

#05 プロジェクトの設定をしよう 02:44

  • プロジェクトフォルダは以下でfirebase init
    • Hosting: Configure and deploy Firebase Hosting sitesでスペースキー
    • 作ったプロジェクトyoshitaku-base-7d93f (yoshitaku-base)を選択してスペースキー
    • What do you want to use as your public directory? (public)
    • Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
      • single-pageはデフォルトでNo
    • File public/index.html already exists. Overwrite? (y/N)
      • index.htmlの初期化はデフォルトでNo
    • Firebase initialization complete!が出ればOK！

#06 サイトを公開してみよう 03:00

  • プロジェクト配下にfirebase.jsonが、public/404.htmlが生成されている
  • firebase deployでデプロイが開始される
    • 最後にURLhttps://yoshitaku-base-7d93f.firebaseapp.comが生成され、デプロイが完了する

#07 サイトを更新してみよう 02:30

  • サイトを更新したいときもfirebase deployでデプロイがされる
  • コンソール上では、今までの履歴も見ることができる

#08 別のサイトを作ってみよう & #09 サイト公開の流れを確認しよう 02:47 & 02:32

  • 今までの復習

まとめ

  • 約30分ぐらいでfirebaseのhosting機能が学べる
  • 他の機能も使ってみたいがコースがないのが残念