syakoo's Lab

技術ブログやちょっと気合の入った記事を残すブログ

Firebaseを使ったWeb開発日記(動的サイトの作成)

はじめに

そこまで大きな事をするつもりはないです。ただの個人開発の勉強を含めたサービス作りの過程を残すブログです。

開発開始!

今回からFirebaseNode.jsを使ってWeb開発を始めます。 今回は動的サイトを作成するのを目標にして、以下の順番で進めていきます。

  1. Firebaseのプロジェクトを作成
  2. Firebaseの設定
  3. 静的サイトの動作確認
  4. 必要なパッケージのインストール
  5. サンプルコーディング
  6. 動的サイトの動作確認

1. Firebaseのプロジェクトを作成

まず、ブラウザでFirebaseを開いて、新規プロジェクトを作成します。今回はMELearningという名前で作成しました。

f:id:syakoo:20190727163534p:plain
プロジェクトを作成

(よく見たらスペル間違えてますね)

2. Firebaseの設定

次に、Firebaseで使う機能を把握して設定していきます。作業フォルダで以下のコマンドを実行

$ npm i -g firebase-tools

npmコマンドはNode.jsをダウンロードすると打てるようになります。

そして、firebaseでプロジェクトを作成したgoogleアカウントでログイン

$ firebase login

ここからFirebaseの機能を入れていきます。今回は動的サイトを作成するのでHostFunctionを用意します。

$ firebase init hosting

※↑ で先ほど作ったプロジェクト(今回はMELearning)をホスト先として設定します。

$ firebase init functions

※↑ でESLintを入れるか聞かれますが、今回は入れないでおきます。

この時点でのファイル構成はこんな感じになります。

f:id:syakoo:20190727163709p:plain
ファイル構成

3. 静的サイトの動作確認

最初に、hostingのみを使って静的サイトの動作確認をします。次のコマンドを入力するだけで静的サイトを立ち上げることができます。

$ firebase serve

これでChrome等のブラウザでlocalhost:5000と入力するとFirebaseで用意されている画面が表示されます(public/index.html)。

4. 必要なパッケージのインストール

次に動的のサイトで必要となるパッケージのインストールをしていきます。サーバーサイドのパッケージなので、ディレクトリをfunctions/に移動してから次のパッケージをインストールしましょう。

functions/へ移動

$ cd functions

パッケージのインストール

$ npm i express --save
$ npm i csrf --save
$ npm i express-session --save
$ npm i ejs --save

5. サンプルコーディング

動作確認用に簡単なコードを書いていきます。 まずは、functions/routesviewsディレクトリを作成します。そのあとに次のコードを書いていきます。

functions/index.js

const express = require("express");
const functions = require("firebase-functions");
const path = require("path");
const session = require("express-session");

const indexRouter = require("./routes/index");

const app = express();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "routes")));
app.use(
  session({
    secret: "secret key",
    resave: false,
    saveUninitialized: false,
    cookie: {
      maxAge: 24 * 60 * 1000,
      secure: false
    }
  })
);
// setting Rotine
app.use("/", indexRouter);

exports.app = functions.https.onRequest(app);

functions/routes/index.js

const express = require('express');

var router = express.Router();

router.get('/', function(req, res, next){
    res.render('index', {message: 'Hello Firebase and Node!'});
});

module.exports = router;

functions/views/index.ejs

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1><%- message %></h1>
    </body>
</html>

たくさん書いていますが、内容はそんなに複雑ではなく、functions/index.jsでこのfunction全体の設定等を書いて、functions/routes/index.js/が入力されたときにどのviewを返すか設定して、functions/views/index.ejsでクライアント側に見える形にレンダリングしています。

6. 動的サイトの動作確認

動作確認する前に、ちょっとした設定が必要になります。hostfunctionを紐付ける設定をする必要があります。次のファイルを変更。

firebase.json

{
  "hosting": {
    "public": "public",
    //ここを追加--------
    "rewrites": [{
      "source": "**",
      "function": "app"
    }],
    //-----------------
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

それでも先に静的ファイルが呼び出されるらしいので、静的ディレクトリのpublicの中身を削除。

動作確認です。先程と同じコマンドを入力します。

$ firebase serve

そしてエラーが起こっていないのを確認して、localhost:5000を見てみると...

f:id:syakoo:20190727163808p:plain
動作確認
正常に動作していることがわかりました。

さいごに

自分用に日記形式で書くか、他人に読んでもらう気持ちで書くかによって丁寧さが変わりますね。