【PHP】PHPMailerを用いたメール送信方法

ホームページやLPには、必ずといっていいほど、お問い合わせフォームを設置する。

メールの送信方法は様々あるが、今回はさくらインターネットのレンタルサーバー上にHPを制作し、さくらインターネットのSMTPサーバーを利用したメール送信を実装したので、備忘録として残しておく。

ホームページ構成

今回は、更新頻度も少ないことから、WordPressではなく、SPAでのサイト制作を行った。

フロント：静的ファイルの生成機能もあるNuxt.jsを採用し、SPA作成
バック：PHPでメール送信機能のみ実装

フロントエンドから、JavaScriptでメールを送信する手段も以下のように存在する。

Gmail APIを使ったメール送信
SmtpJSを使ったメール送信

ただ、個人的に認証情報などをフロントエンドに持たせるのは好みではない。そこで、さくらインターネットのレンタルサーバー上では、Perl/Ruby/Python/PHPが使えるので、今回は一般的なPHPを用いてメール送信を実装した。（フロントエンドから、バックエンドへはaxiosで非同期通信を行い、フォームのデータの受け渡しを行った。）

PHPMailer

今回、PHP上でメールを送信する際に「PHPMailer」を用いた。

github.com

PHPMailer は SMTP サーバを利用してメールを送信するための PHP のライブラリである。HTML メールや添付ファイルを使ったメール送信も可能であり、万能であると言える。

ただし、脆弱性の問題から、5.2.22 (2017/1/9 リリース) より前のバージョンにはセキュリティ上のリスクが存在するので注意が必要である。

PHPMailer のインストールは、 Composer を使う方法が推奨されている。

composer require phpmailer/phpmailer

ローカル開発環境

ローカルで、メールの送信を確認するためには、PHPとApache環境が必要なため、Docker環境を構築した。

なお、実装したサンプルコードは GitHub に公開している。

github.com

本記事では、ポイントだけを抜粋して説明するため、実際にコード全体を確認する場合は GitHub を参照ください。

試験的に動作させる場合は、以下の手順で動作させてください。

public_html/.env.sampleをコピーして、.envとする
.envファイルに、SMTPサーバーのHOST/USER_NAME/USER_PASSWORD、そしてお問い合わせメールを受け取るINFO_MAILのアドレスを記載する。
docker-compose up でコンテナを立ち上げる
http://localhost:8000 にアクセスして、contactのページからお問い合わせをする
SMTPサーバーを介してメールが送信される

mail.phpの設定

POSTされたデータの受け取り

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
$params = json_decode(file_get_contents('php://input'), true);

さくらインターネットのサーバーの設定

項目	設定内容
接続ポート番号	25 ※ サブミッションポート（Port587）も利用できます
暗号化通信	○（STARTTLS） ※ 初期ドメインのみ ※ 465番ポートは利用できません

【さくらのメールボックス】基本仕様 – さくらのサポート情報

$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Port = 587;

465は使用できないので設定ミスに注意してください。
HTMLメールも送信することができ、非常に便利であると感じた。

メールの送信先

今回は、以下の2箇所にメールを送信する設定とした。

お問い合わせしてくれた方への自動返信メール
HPからお問い合わせがあったことを確認できるinfo宛の通知メール

// 宛先は一度、Reset
$mail->ClearAddresses();

こちらを1通目と2通目の間に挟むことで、連続してメールを送信することができる。

おまけ（Nuxt.js側の設定に関して）

axiosのbaseURLの設定

axios: {
  baseURL: process.env.NODE_ENV === 'production' ? 'https://test.com' : 'http://localhost:8000'
},

ローカル環境では、dockerコンテナのApacheサーバーである http://localhost:8000 にアクセスする必要があるので、nuxt.config.jsで設定を行う。

public_htmlへのデプロイ

"scripts": {
    "build": "cross-env NODE_ENV=develop nuxt build",
    "copy": "rm -rf ./public_html/_nuxt && cp -r ./dist/ ./public_html/",
    "apache": "npm run build && npm run copy"
},

build時には、developが設定されるよう変更し、スクリプトコマンドとしてcopyとapacheを追加している。
ローカル環境の場合は、フロントの修正完了後に、 'npm run apache' をすることで、public_htmlに変更が反映され、 apacheサーバー上での動作確認をすることができる。

また、本番にデプロイする場合は、 'npm run generate' をした後に、 'npm run copy' を実行し、public_htmlを本番サーバーにコピーするのみでデプロイすることができる。