Railsで作ったアプリに気軽にメール送信機能をつけて開発環境で確認してみよう！

メール機能を作ってみました！

MailCatcherのgemを使って実装しました
RubyのSMTPサーバで、開発中にメールを送信し、
ブラウザで結果を簡単に確認するためのツールです。

まずはお世話になったサイトです

本です

では下準備から行きます

今回は注文した詳細をメールで送ってみます。
bin/rails generate mailer OrderMailerとコマンドを打ちます

bin/rails generate mailer OrderMailer
      create  app/mailers/order_mailer.rb
      invoke  erb
      create    app/views/order_mailer
      invoke  rspec
      create    spec/mailers/order_mailer_spec.rb
      create    spec/mailers/previews/order_mailer_preview.rb

次に注文メーラーモデルにメールを送信するメソッドを追加

order_mailer.rb

class OrderMailer < ApplicationMailer
	# サイトのメールアドレス
  default from: '[e-mail]'

  def order_confirmation(user, order)
    @user = user
    @order = order
    mail(to: @user.email, subject: 'ご購入誠にありがとうございます。注文確認メールです')
  end
end

次はそれらしいビューを作成

app/views/order_mailer/にorder_confirmation.html.erbを作成
この部分がメールで送られる内容になります。

<h1>注文確認メール</h1>
<p>この度は素敵なお店でご購入ありがとうございます！</p>
<p>以下の内容で注文を受け付けました。</p>

<ul>
  <% @order.order_details.each do |detail| %>
    <li>商品名: <%= detail.product_name %></li>
    <li>値段: <%= detail.price.round %></li>
    <li>個数: <%= detail.amount %></li>
    <li>小計: <%= detail.price.round * detail.amount.round %></li>
  <% end %>
</ul>

<h2>合計金額: <%= @order.total_billing_price.round %>円です</h2>

最後に注文を確定したときにメールを送信するようorders#createを更新

OrderMailer.order_confirmation(current_user, @order).deliver_nowを追加します

order_controller.rb

if current_user.order_confirm(@order)
  OrderMailer.order_confirmation(current_user, @order).deliver_now
  flash[:success] = 'ご購入ありがとうございます'
  redirect_to products_path
else
  render 'cart_products/index', status: :unprocessable_entity
end

しかし今の段階では確認ができません。

メールを実際に送信するにはメールサーバーの設定が必要です。

ここで最初に紹介した、MailCatcherのgemを使って、送信メールをブラウザで確認します。

まずはインストールから

gem install mailcatcher

このGemはbundle installでインストールすると正常に動作しないことがあるらしいです。
このGemの開発者もgem install mailcatcherでインストールすることをすすめています

次に、Railsの設定を変更します。開発環境の設定

config/environments/development.rbを以下のように設定します
大体41行あたりです

# Don't care if the mailer can't send.
config.action_mailer.raise_delivery_errors = false
# ここから追加
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = { address: "localhost", port: 1025 }

これで、Railsアプリケーションから送信されるメールはMailCatcherによってキャッチされ、
http://localhost:1080 で閲覧可能になります。

これらの設定後、実際にメールを送信するアクション(注文確定)すると
メールが送信できているのかを確認します。

orders#createアクションを起こしてこのようなログが出ていれば成功です。

OrderMailer#order_confirmation: processed outbound mail in 114.5ms
rails_ec-web-1  | Delivered mail [e-mail] (120.8ms)

最後にMailCatcherを起動します

mailcatcherとコマンドを記述します

mailcatcher

Starting MailCatcher v0.8.2
==> smtp://127.0.0.1:1025
==> http://127.0.0.1:1080
*** MailCatcher runs as a daemon by default. Go to the web interface to quit.

このようにレスポンスがあれば接続できています
http://127.0.0.1:1080のIPアドレスでアクセスするか
http://localhost:1080 でアクセスしたら送信されたメールをブラウザで確認できます。

あれれ？接続ができないのはなぜ？

そうだった！自分はDockerで環境構築しているためポートマッピングをしてあげないとダメでしたね。

ローカルでRailsをインストールしている方はもうできていると思います！

ここからはDocker使ってる方用です

3000番もポートマッピングしているのでアクセスができています。
http://localhost:1080 もホストマシンとコンテナをポートマッピングする必要があります

docker-compose.ymlでwebサーバ、railsの環境構築されているコンテナの所で

ports:
    - "3000:3000"
    - "1080:1080"
    - "1025:1025"

1025はsmtp://127.0.0.1:1025のsmtpサーバ用です

コンテナを再起動してdocker compose pa -aで確認webサーバのportsを見るとこうなってます。

0.0.0.0:1025->1025/tcp, 0.0.0.0:1080->1080/tcp, 0.0.0.0:3000->3000/tcp

rails側の設定も少し変わります

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = { address: 'host.docker.internal', port: 1025 }

起動方法も少し変わります

mailcatcher --ip 0.0.0.0

Starting MailCatcher v0.8.2
==> smtp://0.0.0.0:1025
==> http://0.0.0.0:1080
*** MailCatcher runs as a daemon by default. Go to the web interface to quit.

--ip 0.0.0.0オプションをつけてIPアドレスを0.0.0.0に指定します。
これでIPアドレスが0.0.0.0のポート番号1080番で
メールキャッチャーのツールがブラウザで起動しアクセスできます！

こちらの内容がメールで送られています。

最後に

これにて開発環境で送ったメールを確認する方法を共有しました。

本番環境となるとconfig/environments/production.rbにもMailerの設定を記述する必要が出てきます。

気になる方は最初に貼ったrailsガイドに軽くやり方が最後の方に書いてあるのでみてみてください！

PFとかでメール機能でGmailでメール送りたいなと思う方は是非挑戦してみてください！

お疲れ様でした！！