【WordPress×Docker×Mailpit×WP Mail SMTP】メール送受信のテスト環境を構築する方法

Docker Web制作 WordPress 便利ツール 環境構築

【WordPress×Docker×Mailpit×WP Mail SMTP】メール送受信のテスト環境を構築する方法

※本記事は広告が含まれる場合があります。

なやむくん
ContactForm7でテストメールの送受信の確認を行いたい…。

なやむさん
テストメールの送受信を行うための環境構築の手順を知りたい…。

こちらの悩みについて解決していきます。

基本的にWebサイトにおいてお問い合わせフォームが存在しますが、メールの送受信の確認どのように行っていますか？

WordPressの開発環境の構築を行う際にLocalを活用することでMailhogの仕組みが備わっているため、簡単にメールの送受信を確認することはできるのできます。しかしDockerで開発環境を構築する場合は、その仕組みも自分で構築する必要があります。

本記事では、WordPress×Dockerで開発環境を構築した際の、メールテストができる環境を実装する手順を解説していきます。

WordPress×Dockerの開発環境の構築手順は以下記事よりご確認ください。

【WordPress×Docker】開発環境構築手順を解説
【WordPress×Docker】開発環境構築手順を解説

続きを見る

Mailpitの導入

まずはMailpitを導入していきます。Mailpitとは、開発環境向けのメールテストツールで、SMTPサーバーとして動作し、送信されたメールを、MailpitのUI上で確認できる機能を提供してくれます。

docker-compose.yml

docker-compose.ymlにMailpitを導入するための記述を追記します。

  mail:
    container_name: mailpit_local
    build:
      context: ./docker/mailpit
    ports:
      - "19825:1025"
      - "19880:8025"
    volumes:
      - ./mailpit:/data
    environment:
      TZ: Asia/Tokyo
      MP_MAX_MESSAGES: 5000
      MP_DATABASE: /data/mailpit.db
      MP_SMTP_AUTH_ACCEPT_ANY: 1
      MP_SMTP_AUTH_ALLOW_INSECURE: 1

Dockerfile

次にmailサービスに対してDockerfileを作成します。

FROM axllent/mailpit:latest

Dockerの再起動

docker-compose.ymlの設定とDockerfileの作成ができたらDockerを再起動します。

docker-compose up -d

Mailpitの受信ボックスの表示確認

Dockerが正常に起動したら、Mailpitの受信ボックス表示確認を行います。http://localhost:19880/にアクセスしましょう。

みつた
以下画像のようなページが表示されればMailpitの構築はOKです！

WordPress側の設定

それでは、送信するためのお問い合わせページをContactForm7で作成します。今回は以下のようなお問い合わせフォームを作成しました。

お問い合わせフォームのレイアウトを参考にされる場合は、以下記事よりご確認ください。

【JavaScript】Contact Form7に郵便番号入力による住所自動入力機能の実装方法
【JavaScript】Contact Form7に郵便番号入力による住所自動入力機能の実装方法

続きを見る

メールの送受信の設定はプロジェクトに合わせて行ってください。今回は受信側と送信側の両方に届くメールの確認を行うため、どちらの設定も行っています。

フォームとメールの設定が完了したら次に進みます。

WP Mail SMTPの設定

次にWP Mail SMTPプラグインを導入し、設定を行います。

有効にしたらサイドメニュー内に項目が追加されますので、設定画面に進みます。

設定画面の各入力設定は以下の通りです。

ここまで設定したらテストメールを送信します。サイドメニューの「ツール」からテストメールの送信が可能です。

送信が正常に行われたらMailpitの受信ボックスを確認してください。テストメールが受信されているはずです。受信されていればMailpitとWP Mail SMTPの連携は完了です。

実際にお問い合わせフォームからテストメールを送信

最後にContactForm7で作成したお問い合わせフォームからテストメールを送信します。

送信後に、Mailpitの受信ボックスを確認して、受信側に届くメールと送信側に届くメールの両方が存在していればOKです。

みつた
ここまででメールの送受信のテストを行う環境を構築することができました！お疲れ様です！

まとめ

ここまで読んでいただきありがとうございました。

WP Mail SMTPの設定で、SMTPホストはDockerのコンテナ名かつ、ポートは転送元のポート番号でも問題ないと思っており、いつまでたってもテストメールが失敗してしまう状態になってしまいましたが、色々調べている中で正しい入力内容を知ることができたという経験がありました。

今記事を参考にぜひWordPress×Docker環境でメールの送信テストを行う開発環境を構築してみてください！

-Docker, Web制作, WordPress, 便利ツール, 環境構築