Heroku上でNuxt.js を使ってサーバサイドレンダリング(SSR)

サーバサイドレンダリングにチャレンジしてみたかったのです。 (やってみたいだけ)

Vue.jsにサーバサイドレンダリング専用のWebサイトがあったのですが、どうやらNuxt.jsの方が簡単にサーバサイドレンダリングできるようです(Vue.jsでもできなくはないけどWebpackの知識が多分に必要らしいのです。。。私そこまでまだ知識ない)。

Nuxt.jsはVue.jsをベースにしたフレームワークですので、Vue.jsを触り始めたばかりの私でも幾分できるのではないか、と、淡い期待を込めて。Nuxt.jsにチャレンジしてみます。

Nuxt.jsの公式ガイドはこちら

ja.nuxtjs.org

になります。

インストール

npmがインストールされていることを前提とします。

$ npx create-nuxt-app .

"."にすると現在のディレクトリに作成されます。新規でディレクトリ作りたければ、ディレクトリ名を与えてください。

コマンドを叩くといろいろ聞かれます。私は下のように答えました。

  • Project name:(お好きなものを)
  • Project description: (お好きな説明を)
  • Use a custom server framework: express
  • Choose features to install: (なし)
  • Use a custom UI framework: bootstrap
  • Use a custom test framework: jest
  • Choose rendering mode: Universal
  • Choose a package manager: npm

インストールすると下記のようなディレクトリ構成になります。

├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── server
├── static
├── store
├── test
├── README.md
├── nuxt.config.js
├── jest.config.js
├── package-lock.json
└──package.json

Vue.jsやexpressで見たことあるような階層ですね。

ディレクトリが何を格納しているのかは公式ページ(ディレクトリ構造 - Nuxt.js )で確認することができます。

ローカルで動作確認

下記コマンドを打ちます。

$ npm run dev

http://localhost:3000/にアクセスすると初期画面が見られます。

Vue.jsのときと違って、Vueのロゴが動きますね。 (nuxt.jsのロゴがVue.jsのロゴを元に作られているのをこのとき初めて知りました)

Herokuへデプロイ

公式のWebサイトにHerokuへのデプロイ手順が載っています(https://ja.nuxtjs.org/faq/heroku-deployment/)。 最新情報はこちらを確認したほうが良いと思います。

ここでは私がやった手順のみ並べます。

Herokuに下記3つの環境変数をセットします。

$ heroku config:set NPM_CONFIG_PRODUCTION=false -a (アプリ名)
$ heroku config:set HOST=0.0.0.0 -a (アプリ名)
$ heroku config:set NODE_ENV=production -a (アプリ名)

1つ目の環境変数はnpm run buildの前に、毎度npm installを実行するようにするための設定だそう。

次にpackage.jsonにheroku-postbuildを追加します。

// package.json

// ----------(略)------------------
"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "heroku-postbuild": "npm run build",  // <-この行を追加
    "generate": "nuxt generate",
    "test": "jest"
  },
// ----------(略)------------------

そして最後にルートに「Procfile」を置きます。

// Procfile
web: npm run start

Herokuのリポジトリにpushし、デプロイ。

アプリのサイトにアクセスし、ローカルで見たのと同じサイトが表示されればOKです!お疲れ様でした。