Heroku+Rails Netlify+Next.jsを中心としたWebアプリ構成
Heroku+Rails Netlify+Next.jsを中心とした構成でWebアプリを構築したのでメモです。
構成図
今回利用した技術スタック
SPAアプリ
Next.jsはReactを使ってSPAを作成するシンプルなフレームワークで、今回は利用しませんが洗練されたSSRも対応しています。
API + 管理画面
PaaSについて
Netlify
フロントエンドはNetlify を利用しました。 以下の機能を容易に設定することができるためです。
- フロントエンドのビルド機能
- CDN配信
- SSL設定
- Githubとの連携 (特定ブランチへのプッシュ、Pull Request時にプレビューアプリのデプロイ）
- パスワード設定機能（stg環境等を一部の人に公開するため）
Heroku
バックエンドのPaaSはHerokuを利用しています。 Railsのデプロイ先としては歴史があり、こちらも容易に利用できるCD機能、CLI、APIがあらかじめ揃っていることが強みです。
もしセキュリティレベル的に１段階上げたい要望がある場合、Private SpaceというVPCで動作させることができるプランもあります。
インフラやパイプラインの更新もherokuのサイクルに乗っかることで保守面のコストを下げることを狙いとしています。
またAdd-onで様々なサービスと連携が可能で、今回はメール配信に mailgun 、DNS管理にPointDNSを利用しています。
Netlify + Next.js ビルド設定
Next.jsには以下のscriptがあります。
next buildプロダクションビルドnext export静的サイトとしてoutフォルダに書き出し
package.jsonにnpm scriptとして以下のように設定し
"scripts": {
...
"build": "next build",
"export": "next export"
}
Netlifyのbuild設定は以下のようにしています。
APIサーバのBASE_URLなどはNetlifyのビルドの環境変数にセットし、 webpackのDefinePluginを用いて、静的ビルド時に注入するようにしています。
Next.js では next.config.js で webpackの設定を変更することができます。
const webpack = require("webpack"); const devApiUrl = 'https://example.com'; module.exports = { webpack: (config) => { config.plugins.push( new webpack.DefinePlugin({ API_BASE_URL: JSON.stringify(process.env.API_BASE_URL || devApiUrl), SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN), SENTRY_ENVIRONMENT: JSON.stringify(process.env.SENTRY_ENVIRONMENT), }); return config; } };
Heroku デプロイ設定
RailsのパイプラインはDocker Containerを用いず、Herokuのスタックを利用しています。（これは好みかもしれません） デフォルトのスタックを利用することで、特に他のAPMなどを導入せずにRubyのmetricsを見ることができます。
現在見れるものとしては以下です。
- Puma Pool Usage
- Free Memory Slots
- Heap Objects Count
導入方法も非常にかんたんで、Heroku側は Metricsのページの設定でRuby Language MetricsをONにして、heroku/metrics のbuildpackを追加するだけです。
Rails側は Barners gemをインストールする必要があります。
gem "barners"
Heroku Add-on設定
Heroku Add-onは追加すると、基本的に環境変数にサービスを利用するための認証情報が追加されます。
（例: Heroku Postgresであれば DATABASE_URL に接続情報が入っている）
このあたりは適当に追加して、アプリのコードで環境変数から設定値を受け取れるように設定しました。
利用したAdd-Onは以下です。
