タグ別アーカイブ: Heroku

Node.js + React で SSR ~ Heroku の利用 ~

Overview

前回までの記事で, SPA (Single Page Application) の開発環境構築に関して紹介しましたが, SPA では, 以下のような理由から, SSR (Server Side Rendering) を併用することも多いです.

  • 初期表示速度の改善
  • レガシークローラーやページ解析への対応

したがって, SSR の最低限の実装を紹介していきたいと思います.

しかしながら, SSR という名前からもわかるように, レンダリングをしてくれるサーバーが必要となります. 今回は, サーバーサイドのスクリプトには Node.js を使って, Isomorphic な実装をしたいと思います. したがって, Node.js が使えるサーバーが必要になります.

Node.js が使えて, 無料で利用できる PaaS (Platform as a Service) として Heroku があります (Node.js だけでなく, PHP, Ruby, Python, Java, Scala, Go なども使えます) . 今回の SSR の実装には, Heroku を使うことにします.

この記事では, Heroku の使い方を紹介します (すでに, Node.js を使える環境をもっているのであれば, スルーしてください).

1. Create Heroku Account

まずは, アカウントを作成します.

Heroku
Heroku
Heroku Sign up
Heroku Sign up

2. Install Heroku CLI

Heroku をターミナルから操作できるように, Heroku CLI をインストールします.

3. Log in

ターミナルで以下のコマンドを実行します (Email アドレスとパスワードを入力する必要があるので, アカウント作成したときのものをそれぞれ入力してください).

$ heroku login
Enter your Heroku credentials:
Email: rilakkuma.san.xjapan@gmail.com
Password: **************
Logged in as rilakkuma.san.xjapan@gmail.com

Heroku に ssh 公開鍵をアップロードします.

$ ssh-keygen
$ heroku keys:add ~/.ssh/id_rsa.pub

4. git init

Heroku にアプリケーションをデプロイするにも, Git でファイルを管理する必要があります

$ git init

5. Create Procfile

Procfile というファイルを作成し, アプリケーションを起動するコマンドを記述します. 今回は以下のような記述で OK です

web: node app-server.js

6. Create Application

SSR をするための, アプリケーションを作成していきます.

$ npm init -y
$ npm install --save express

1つ注意点があり, 本来は, devDependencies に入るパッケージ (–save-dev でインストールするパッケージ) は, Heroku だとデプロイの対象とならないようなので, すべて, –save オプションでパッケージをインストールします.

app.js

'use strict';                                                                                                                             

const express = require('express');
const app       = express();
const path      = require('path');

const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res, next) => {
    const html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello SSR</title>
</head>
<body>
    <section id="app">
        <h1>Hello SSR</h1>
    </section>
</body>
</html>`;

    res.status(200).send(html);
});

app.listen(port, () => {↲
    console.log(`Listening on port ${port} ...`);
});

ここで注意が必要なのは,

const port = process.env.PORT || 8080;

の部分です. ローカルで動作させる場合には, 8080 のような任意のポート番号で OK なのですが, Heroku でデプロイする場合には, 任意のポート番号を利用すると, 以下のようなエラーが発生するので, Heroku の環境変数に定義されているポート番号を利用するように process.env.PORT を指定します.

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

ここまでで, 作成した

  • package.json
  • Procfile
  • app-server.js

をコミットしておきます.

7. heroku create

以下のコマンドを実行します

$ heroku create app-ssr
Creating ⬢ app-ssr... done
https://app-ssr.herokuapp.com/ | https://git.heroku.com/app-ssr.git

app-ssr はアプリケーション名で, 省略することも可能です (その場合, 任意のアプリケーション名がつきます).

また, 以下のコマンドであとから変更することも可能です.

$ heroku rename [アプリケーション名」

8. Deployment

最後の手順です. アプリケーションを Heroku でデプロイします. といっても, 難しいことはなく, GitHub に push するのと同じ要領で,

$ git push heroku master

push すれば, 自動的にデプロイが開始されます.

デプロイが完了したら,

https://app-ssr.herokuapp.com/

にアクセスします.

SSR by Heroku
SSR by Heroku

このように表示されていれば OK です. また, ディベロッパーツールの Network をみても document としてレスポンスが返ってきているのがわかります.

もし, 何らかのエラーが原因で表示されない場合には,

$ heroku logs

でログを調べて, デバッグしてみてくだだい.

また, heroku コマンドの一覧は,

$ heroku help

で調べることが可能です.