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

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

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

https://railsguides.jp/action_mailer_basics.html

https://github.com/sj26/mailcatcher

本です

https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4-ebook/dp/B07JHQ9B5T/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=1642106965&sr=8-6

## では下準備から行きます
今回は注文した詳細をメールで送ってみます。
`bin/rails generate mailer OrderMailer`とコマンドを打ちます
```zsh
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
```

## 次に注文メーラーモデルにメールを送信するメソッドを追加
```ruby:order_mailer.rb
class OrderMailer < ApplicationMailer
	# サイトのメールアドレス
  default from: 'notifications@example.com'

  def order_confirmation(user, order)
    @user = user
    @order = order
    mail(to: @user.email, subject: 'ご購入誠にありがとうございます。注文確認メールです')
  end
end
```
## 次はそれらしいビューを作成
`app/views/order_mailer/`に`order_confirmation.html.erb`を作成
この部分がメールで送られる内容になります。
```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`を追加します

```ruby: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行あたりです
```ruby
# 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](http://localhost:1080/)** で閲覧可能になります。

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

orders#createアクションを起こしてこのようなログが出ていれば成功です。
```
OrderMailer#order_confirmation: processed outbound mail in 114.5ms
rails_ec-web-1  | Delivered mail 6497c8b6e979_13fd4-491@63818aa95769.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](http://127.0.0.1:1080/)のIPアドレスでアクセスするか
**[http://localhost:1080](http://localhost:1080/)** でアクセスしたら送信されたメールをブラウザで確認できます。

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

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

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

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

```yml
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側の設定も少し変わります
```ruby
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番で
メールキャッチャーのツールがブラウザで起動しアクセスできます！

![スクリーンショット 2023-06-25 15.28.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124781/2a0d15ee-ed66-d87c-ee7b-520473aa7683.png)

![スクリーンショット 2023-06-25 15.32.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124781/c6d1129a-560d-4c65-9e96-610390bba88b.png)
こちらの内容がメールで送られています。

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

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

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

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

お疲れ様でした！！