今回達成すること

アプリの公開のために、Herokuへデプロイのセッティングを行っていき、実際にデプロイを行います。

今まではNuxtプロジェクトを編集してきましたが、あくまでRailsプロジェクトとしてHerokuにデプロイします。

これでRailsApiアプリがインターネット上に公開されます。

この記事の読み方

ターミナル上のコマンドは、RailsとNuxtで以下のように分けます。

• Railsプロジェクトに対するコマンド

myapp$ コマンド

• Nuxtプロジェクトに対するコマンド

frontend$ コマンド

【Nuxt】本番環境のaxiosのセッティング

本番環境でaxiosが使えるように、http通信に使うURLを設定します。

nuxt.config.jsを開きましょう。

frontend/nuxt.config.js

{
  ...
  axios: {
    baseURL: process.env.BASE_URL	|| '/'	// 追記
  },
  ...
}

• process.env.BASE_URL

  本番環境では、axiosのベースURLをHerokuの環境変数から読み込みます。

• || '/'

  開発環境では@nuxtjs/proxyモジュールで正常に動くので、わざわざbaseURLを設定しなくても良いのですが、空白になってしまうと気持ち悪いのでルートパスを代入しています。

【Nuxt】ESLintを開発環境のみで利用する設定を行う

Nuxtプロジェクト作成時にESLintを導入すると、nuxt.config.jsのdevModulesに'@nuxtjs/eslint-module'が記載されています。

今のままHerokuにデプロイすると、ビルド時にESLintなんでモジュールはないよ:rage:と激おこされます。

これはESLintモジュールが開発環境のみにインストールされているからです。

そこで、'@nuxtjs/eslint-module'を下記のように移動しましょう。

frontend/nuxt.config.js

{
	...
  devModules: [
   //  '@nuxtjs/eslint-module',  削除
    '@nuxtjs/vuetify'
  ],
  ...
}
  
if (process.env.NODE_ENV === 'development') {
  config.devModules.push('@nuxtjs/eslint-module')		// 追記
  // @nuxtjs/proxy module settings
  config.proxy = { '/api': 'http://localhost:3000' }
}

export default config

Herokuに環境変数をセットする

さて、Nuxtから離れましょう。

ターミナル上でRailsプロジェクトに移動してください。

HerokuにBASE_URLの環境変数をセットします。

URLはご自身のHerokuアプリのURLに書き換えてコマンドを実行してください。

myapp$ heroku config:set BASE_URL="https://spa-myapp8.herokuapp.com"

確認してみましょう。BASE_URLが出てこれば環境変数はセットされています。

myapp$ heroku config

BASE_URL: https://spa-myapp8.herokuapp.com
...

もし間違えても、環境変数名が同じ場合は上書きされますので安心して実行してください。

【Rails】デプロイ前のNuxtビルド設定を行う

ビルドとは、JSファイルとCSSファイルをプロダクション向けに縮小することです。

今のままHerokuにデプロイしても、Nuxtアプリのビルドは行われず、Railsのpublicディレクトリに入っている静的ファイルのみしか表示されません。

これを解決するために、Rails側にpackage.jsonファイルを作成し、Herokuデプロイ時にNuxtアプリをビルドする設定を行っていきます。

Railsのルートディレクトリ直下(Gemfileと同じ階層)にpackage.jsonファイルを作成してください。

package.json

{
  "license": "UNLICENSED",
  "engines": {
    "node": "12.7.0",
    "yarn": "1.17.3"
  },
  "scripts": {
    "postinstall": "cd frontend && yarn install && yarn build"
  }
}

コードのポイント

• license

  特段必要ありませんが、念のため使用ライセンスは許可しない。と設定しています。

• nodeとyarnのバージョン

  開発環境と一致させておいたほうが良いでしょう。

  下記のコマンドで開発環境のバージョンを調べられます。

$ node -v		v12.7.0
$ yarn -v		1.17.3

• postinstall

  Herokuデプロイ時のパッケージインストール完了後に呼び出されます。

  cdコマンドでfrontendディレクトリに移動し、yarn install && yarn buildを実行してね。と設定しています。

参考

package.json - Yarn

Herokuにビルドパックを追加する

ビルドパックとは、アプリケーションを動かすフレームワークのこと?です。

ちょっと上手く説明できません。Herokuに委託します。ごめんなさい。

Heroku ビルドパック

RailsプロジェクトをHerokuにデプロイ済みなので、今現状はビルドパックとして自動的にRubyがインストールされています。

ここに、Nuxtを動かすNode.jsを追加します。

myapp$ heroku buildpacks:add --index 1 heroku/nodejs

...
1. heroku/nodejs
2. heroku/ruby

• --index

  buildpacks:addのコマンドオプションです。Nodeを先に実行してNuxtのファイル群をRailsで表示する必要があるため、Rubyより前の「1」としています。

  ↓の説明まま。

  Using Multiple Buildpacks for an App | Heroku Dev Center

コミットしとく

さてここまでの編集をコミットしましょう。

Railsプロジェクト上でコミットしますのでお間違えのないように。

myapp$ git add -A
myapp$ git commit -m "heroku_deploy_settings"

マージしてHerokuにデプロイしよう

ブランチを作っている方は、マスターブランチにこれまでの変更を合算(マージ)しましょう。

myapp$ git checkout master
myapp$ git merge nuxt_new_project (←ブランチ名が違う場合は読み替えてください)
myapp$ git push
myapp$ git push heroku

Herokuデプロイのログに、ちゃんとビルドが表示されていれば上手くいっています。

...
remote:        $ nuxt build
remote:        ℹ Production build
remote:        ✔ Builder initialized
remote:        ✔ Nuxt files generated
remote:        ℹ Compiling Client
remote:        ✔ Client: Compiled successfully in 38.94s
...

Heroku上でちゃんと動いているか、ブラウザで確認してみてください。

myapp$ heroku open

OK!これにて完了です。

参考

「Auth0」で作る！認証付きシングルページアプリケーション

この本はユーザー認証まで作れておすすめです。

本屋はどうしても初心者向けの本が多いため、このような実践的な技術書は貴重です。

僕も挑戦しましたが「Auth0」のカスタマイズに苦戦したため、今回のアプリでは一からユーザーログイン機能を作ります。そのお話はもう少し先で。

ちょっと情報が古いところ

この本では、cross-envモジュールを使って環境変数のNODE_ENVを埋め込んでいました。

Nuxt.2.8ではprocess.env.NODE_ENVの中に、デフォルトで'development'の文字列が入っているため、cross-envはインストールしていません。

また、yarn buildを実行すると'production'の文字列に切り替わります。

試しにnuxt.config.jsにconsole.log(process.env.NODE_ENV)と記入してyarn buildを実行してみてください。

ターミナル上に'production'の文字列が表示されるはずです。

終わりに

これで、初めてのRails apiアプリをインターネット上に公開することができました。

以上でチャプター「RailsとNuxtを共存させる」を終わります。

次回からは、データベース設計とRailsモデル開発を行っていきます。

それではまた。