大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【Rails】本番環境のツール各種

はじめに

こんにちは!大ちゃんの駆け出し技術ブログです。

ほぼポートフォリオも完成というところまできたので、本番環境に必要な解析ツールやHerokuのAdd-onを導入したのでそれらの導入を記録した記事を残しておきます。各ツールの機能について説明を入れながら導入していきます。

New Relic APM

【概要】

HerokuのAdd-onでアプリのパフォーマンスを監視してくれるサービスです。非常によく使われるAdd-onのようで導入も簡単でした。

【参考】

  • 公式

Elements Marketplace: New Relic APM

  • 導入記事

Heroku上のRailsアプリにNewRelicを導入する - Qiita

【インストール】

① アプリ画面から「Resources」の欄に移動し、Add-on検索からNew Relic APMを検索し、Freeプランで追加します。

https://i.gyazo.com/e93631fa7305ea503acb1b8e0661b5b4.png

ダッシュボード画面に遷移します。下記コマンドをターミナルに打ち込めば遷移できます。

$ heroku addons:open newrelic

③ 「Add an app or servise」をクリック

https://i.gyazo.com/9da77111954924cf6ea248b606dbeb92.png

④ サイドバーが出現するのでそこで言語にRubyを選択

https://i.gyazo.com/643fa75b2a065fdce3453ef16607a4ab.png

⑤ 各項目を入力していきます。

https://i.gyazo.com/e39b558805a50fd66756c0937ab7cb86.png

  • Give your application a name

⇒ アプリ名を入力

  • Are you using Bundler?

⇒ Yesを選択すると、下記gemをインストールするように指示されるのでインストール

# Gemfile
gem 'newrelic_rpm'

# ターミナル
$ bundle install
・
・
・
Installing newrelic_rpm 7.1.0
  • Download your custom configuration file

ファイルをダウンロードしconfig配下に配置します。Licenseが書かれているので環境変数に移します。

# config/newrelic.yml
#
# This file configures the New Relic Agent.  New Relic monitors Ruby, Java,
# .NET, PHP, Python, Node, and Go applications with deep visibility and low
# overhead.  For more information, visit www.newrelic.com.
#
# Generated June 15, 2021
#
# This configuration file is custom generated for NewRelic Administration
#
# For full documentation of agent configuration options, please refer to
# https://docs.newrelic.com/docs/agents/ruby-agent/installation-configuration/ruby-agent-configuration

common: &default_settings
  # Required license key associated with your New Relic account.
  license_key: ENV['LICENSE_KEY']

  # Your application name. Renaming here affects where data displays in New
  # Relic.  For more details, see https://docs.newrelic.com/docs/apm/new-relic-apm/maintenance/renaming-applications
  app_name: prof-chan

  distributed_tracing:
    enabled: true

  # To disable the agent regardless of other settings, uncomment the following:
  # agent_enabled: false

  # Logging level for log/newrelic_agent.log
  log_level: info

# Environment-specific settings are in this section.
# RAILS_ENV or RACK_ENV (as appropriate) is used to determine the environment.
# If your application has other named environments, configure them here.
development:
  <<: *default_settings
  app_name: prof-chan (Development)

test:
  <<: *default_settings
  # It doesn't make sense to report to New Relic from automated test runs.
  monitor_mode: false

staging:
  <<: *default_settings
  app_name: prof-chan (Staging)

production:
  <<: *default_settings

④ これでローカルでの設定は完了。デプロイします。

⑤ 実際にアクセスしてデータを取得できているか確認します。

Sentry

HerokuのAdd-onでサイトのエラーなどを監視し、ログとして記録するサービスです。他のAdd-onでもログの検知ツールはありますが、どちらがいいかがあまりわからなかったので脳死でSentryにしました。

【参考】

  • 公式

Rails Error and Performance Monitoring

Rails

  • 導入記事

Kazu Tech Blog

【インストール】

① アプリ画面から「Resources」の欄に移動し、Add-on検索からSentryを検索し、Freeプランで追加します。

https://i.gyazo.com/cbd3d0dfb18d62712aecf90e3958cb21.png

② gemをインストール

# Gemfile
gem 'sentry-rails'
gem 'sentry-ruby'

#ターミナル
$ bundle install
・
・
・
Installing sentry-ruby-core 4.5.1
Fetching sentry-ruby 4.5.1
Fetching sentry-rails 4.5.1
Installing sentry-ruby 4.5.1
Installing sentry-rails 4.5.1

config/initializers/sentry.rbを作成します。

# config/initializers/sentry.rb
Sentry.init do |config|
  config.dsn = 'https://xxxxxxx:xxxxxxx@xxxx.ingest.sentry.io/xxxxxx'
  config.breadcrumbs_logger = [:active_support_logger]

  # To activate performance monitoring, set one of these options.
  # We recommend adjusting the value in production:
  config.traces_sample_rate = 0.5
  # or
  config.traces_sampler = lambda do |context|
    true
  end
end

config.dsnの値はアプリの「Settings」のConfig Varsから「SENTRY_DSN」のキーの値を参照してください。Add-onが追加されているとここに自動的に値が割り振られています。

https://i.gyazo.com/70b2c53c810f422836b25eb0390ca820.png

④Herokuにデプロイしましょう。

⑤動作確認として下記コマンドを実行します。

Sentry.capture_message("test message")

Log Rocket

【概要】

Log Rocketとは自分のサイトでどのようにユーザが動いたのかを動画として記録してくれるツールです。ユーザがどこで迷っているかやどの画面に多くの時間を使っているのかなどがこれをみると一目瞭然。こんなものが今できたんですね。びっくりしました。

【参考】

  • 公式

Modern Frontend Monitoring and Product Analytics

  • 導入記事

ユーザー行動を動画で記録できる「LogRocket」の使い方・設定方法【JSコード1行で簡単導入】 | Tekito style.me

【インストール】

①トップ画面から「Get Started Free」をクリック

https://i.gyazo.com/ae0bffcf7119b4967087ab3a2f9cc7db.png

②認証方法を選択しログインします。(Googleログインなど外部認証で問題ないです。)

https://i.gyazo.com/5dac9db3f597faf7a0402b8b35bd99d6.png

③プロジェクト名を入力します。基本的にはサイトのドメインなのでいいと思います。また、プロジェクト管理用アカウントとしてメールアドレスを指定して他の人などを招待もできます。自分はサイト用のアドレスを追加しました。

https://tekito-style.me/wp-content/uploads/2019/09/th_6-1logrocket.jpg

④インストール方法としてnpmを使用して直接インストールする方法とheadタグにscriptを挿入する方法があります。npmより取り外しが簡単なscriptでも問題ないと思います。

  • npm

https://i.gyazo.com/247909326120e966558130eeb9549c74.png

  • script

https://i.gyazo.com/0f2fa49cfc0c0226b3a14bb3a349f841.png

headタグにscriptを追加(slimの場合)

doctype html
html
  head

/ Log Rocket
    script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"
    javascript:
      window.LogRocket && window.LogRocket.init('9mwyop/f');

以上でLog Rocketの導入は完了です。めちゃ簡単で驚きました。