Firebase 入門(1) ～ Todo アプリをデプロイできるのか? (1)

今まで作ってきた Todo アプリを FIrebase にデプロイしてみる。

まず、新たにプロジェクトを作成して、Hosting に js をデプロイしてみる。作成したときの Project ID を覚えておく。あとで使う。

まず、Firebase ツールをインストールする

$ npm install -g firebase-tools

続いて Google にログイン

$ firebase login

んで、プロジェクトを初期化

$ firebase init

設定は以下

? Are you ready to proceed? Yes
? 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
? Select a default Firebase project for this directory: [create a new project]
=== Hosting Setup
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No

はじめに作成したプロジェクトのプロジェクトIDを今回作成したプロジェクトに追加

$ firebase use --add <Project ID>

デプロイしてみる。

$ firebase deploy

http://.firebaseapp.com にアクセスすると、public フォルダにある静的コンテンツがデプロイされていることがわかる。

---

ローカルで確認するには firebase serve を使用する。

$ firebase serve

http://localhost:5000 にアクセスすると、やはり public フォルダにある静的コンテンツがデプロイされている。

---

webpack でビルドしたファイルをデプロイする

React 入門 (1) ～ 基本環境構築 ～ を同フォルダに展開。

webpack.config.js に output の項目を足す

module.exports = {
  // ここから
  output: {
    filename: "bundle.js",
    path: __dirname + "/public"
  },
  // ここまでを追加
  module: {

npm run build すると public フォルダにデプロイされる

この状態で firebase serve をしたが、前のページが表示される。firebase deploy しないとダメみたい。

$ firebase deploy
$ firebase serve

localhost:5000 に Hello React が表示されていれば成功。

---

というところで今日のところは終了。明日以降に完全なTodoアプリのデプロイをしていく。あと、サーバ－サイドをどうするか考えないといけないので、このシリーズはもうあと数回続くと思う。

---

成果物

GitHub - bamchoh/firebase-study at 1c2c12978a1bbafa4416781d5288e9255a0b793c