【React+firebase+NodeMailer】問い合わせフォームの作成
Reactでメール送信する場合は
・Gmail単体利用
・NodeMailer+cloud Function+Gmailの組み合わせ
・Sendgridを使用する。
というパターンがある事がわかりました。
少し調べた資料だと
・Gmailを単体で利用する場合、コードにgmailアドレスとPASSを入力する
・SendGridもよさそうですが、今回GCPを使用しているので使用するサービスが増えると管理が増える
だったので今回Firebaseを導入している ので
Firebase Functions + Nodemailer + Gmail
のパターンでいきたいと思います。
参考
https://qiita.com/numaC/items/8701de4a836719c0653d
https://qiita.com/katsuomi/items/19dd6f3e33d795ba0e96
手順の解説
①Firebaseの環境をセットアップ
②FireFunctionにnodeで作ったsendMailプログラムをデプロイする。
( Nodemailerを使うメーラーにGmail)
③FireFunctionを呼び出すReactプログラムの作成
Firebaseの環境のセットアップ
Firebase CLIをインストールを下記コマンドで行う
npm install -g firebase-tools下記コマンドでfirebaseにログインを行う
dockerのubuntuで開発をおこなっていますが–no-localhostを付けないとえらーになるのでオプションを指定します。
firebase login --no-localhostログイン後初期化を行います。初期化時にcreate functionをして下さい。
firebase init functions次にnodejsで開発を行う時に使うpackegeをインストールします。
// functionsディレクトリへ移動
cd functions
// Nodemailerとcorsのインストール
npm install --save nodemailer
npm install corsまた、プログラムでfirebaseのパスワード等を使うので下記コマンドで環境変数に指定します。
firebase functions:config:set gmail.email="Gmailのアドレス" gmail.password="Gmailのパスワード" admin.email="送信元のアドドレス"
NodeMailerでのメール送信
NodemailrでGmailを使う場合に最大の壁はgmailでのセキュリティ関連になります。
gmailでセキュリティ解除の方法は二つあるのですが、
1.二段階認証なしでアプリの
2.二段階認証ありで
単体テストを行うためには下記のようなアクセスのURLにアクセスして動作確認を行います。
https://ロケーション-アプリID.cloudfunctions.net/関数名?パラメーターまたhttpからの呼び出しでは関数の設定が異なりますので注意です。
exports.sendMail = functions.https.onRequest((req, res) => {
}on callからの呼び出し
exports.sendMail = functions.https.onCall((data, context) => {
}まとめ
1.Firebaseの設定をlinuxから行う
2.NodeMailをcloud funtionから単体テストを行う。
3.Gmailのセキュリティ設定を設定(セキュリティ解除)を行う。
4.reactからcloud funtionsの関数を呼び出す