Nuxt.js(SSR)プロジェクトをHerokuにデプロイする

Naoki Machida

Keywords

Nuxt.js
Heroku

Contents

1. 前提
2. Nuxtプロジェクト作成
3. 諸々回答
4. ローカルにNuxt.jsプロジェクトの作成完了
5. Herokuにログイン
6. Herokuにアプリケーションを作成
7. デプロイ
8. Host 0.0.0.0
9. ブラウザで確認
10. 参考URL

前提

Heroku アカウントを持っていること
Heroku CLIのインストール
gitのインストール
nodeのインストール
npmのインストール
npxのインストール(npxはnpm(ver 5.2.0)からデフォルトでバンドルされている)

Nuxtプロジェクト作成

<project-name>には任意のプロジェクト名を入力。ここではsampleとする。

$ npx create-nuxt-app <project-name>

諸々回答

$ npx create-nuxt-app sample

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in sample
? Project name sample
? Project description My breathtaking Nuxt.js project
? Author name naoki machida
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
⠴ Installing packages with npm

ローカルにNuxt.jsプロジェクトの作成完了

Herokuにログイン

$ heroku login

[heroku: Press any key to open up the browser to login or q to exit:]と表示されるので、何らかのボタンを押して、ブラウザでログインする。

Herokuにアプリケーションを作成

$ cd sample
$ heroku create

デプロイ

$ git add .
$ git commit -m "initial commit"
$ git push heroku master

標準出力に[Production build], [Installing dependencies], [nuxt build]とあることから、Productionモードであることや、[npm install]と[nuxt build]が実施されていることがわかる。

Heroku へデプロイするには？の設定をせずとも、[npm run build(nuxt build)]はしてくれているように見える。また、Procfileを作成しなくても、サーバが立ち上がっているように見える(実際うごいているので)。

Host 0.0.0.0

Herokuのダッシュボードにて、[Settings]-[Config Vars]より、Host: 0.0.0.0を設定する。

ブラウザで確認

$ heroku open

できた。

前提