Heroku上でNuxt.js を使ってサーバサイドレンダリング(SSR)
サーバサイドレンダリングにチャレンジしてみたかったのです。 (やってみたいだけ)
Vue.jsにサーバサイドレンダリング専用のWebサイトがあったのですが、どうやらNuxt.jsの方が簡単にサーバサイドレンダリングできるようです(Vue.jsでもできなくはないけどWebpackの知識が多分に必要らしいのです。。。私そこまでまだ知識ない)。
Nuxt.jsはVue.jsをベースにしたフレームワークですので、Vue.jsを触り始めたばかりの私でも幾分できるのではないか、と、淡い期待を込めて。Nuxt.jsにチャレンジしてみます。
Nuxt.jsの公式ガイドはこちら
になります。
インストール
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です!お疲れ様でした。