【React+firebase+NodeMailer】問い合わせフォームの作成

React


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の関数を呼び出す