こちらの悩みについて解決していきます。
基本的にWebサイトにおいてお問い合わせフォームが存在しますが、メールの送受信の確認どのように行っていますか？
WordPressの開発環境の構築を行う際にLocalを活用することでMailhogの仕組みが備わっているため、簡単にメールの送受信を確認することはできるのできます。しかし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: 1Dockerfile
次にmailサービスに対してDockerfileを作成します。
FROM axllent/mailpit:latestDockerの再起動
docker-compose.ymlの設定とDockerfileの作成ができたらDockerを再起動します。
docker-compose up -dMailpitの受信ボックスの表示確認
Dockerが正常に起動したら、Mailpitの受信ボックス表示確認を行います。http://localhost:19880/にアクセスしましょう。
WordPress側の設定
それでは、送信するためのお問い合わせページをContactForm7で作成します。今回は以下のようなお問い合わせフォームを作成しました。
お問い合わせフォームのレイアウトを参考にされる場合は、以下記事よりご確認ください。
-
-
【JavaScript】Contact Form7に郵便番号入力による住所自動入力機能の実装方法
続きを見る
メールの送受信の設定はプロジェクトに合わせて行ってください。今回は受信側と送信側の両方に届くメールの確認を行うため、どちらの設定も行っています。
フォームとメールの設定が完了したら次に進みます。
WP Mail SMTPの設定
次にWP Mail SMTPプラグインを導入し、設定を行います。
有効にしたらサイドメニュー内に項目が追加されますので、設定画面に進みます。
設定画面の各入力設定は以下の通りです。
ここまで設定したらテストメールを送信します。サイドメニューの「ツール」からテストメールの送信が可能です。
送信が正常に行われたらMailpitの受信ボックスを確認してください。テストメールが受信されているはずです。受信されていればMailpitとWP Mail SMTPの連携は完了です。
実際にお問い合わせフォームからテストメールを送信
最後にContactForm7で作成したお問い合わせフォームからテストメールを送信します。
送信後に、Mailpitの受信ボックスを確認して、受信側に届くメールと送信側に届くメールの両方が存在していればOKです。
まとめ
ここまで読んでいただきありがとうございました。
WP Mail SMTPの設定で、SMTPホストはDockerのコンテナ名かつ、ポートは転送元のポート番号でも問題ないと思っており、いつまでたってもテストメールが失敗してしまう状態になってしまいましたが、色々調べている中で正しい入力内容を知ることができたという経験がありました。
今記事を参考にぜひWordPress×Docker環境でメールの送信テストを行う開発環境を構築してみてください！
