netlify functionのフォームのやりかたとか

Tech

自社サイトを構築するときに、いままではWordpressのプラグインを使っていたので フォームを送信したときに自動的に送信した人のメールアドレスに返信するシステムを作っていた。 JAMstackだとサーバーも何もないのでそのような動的な動きを作るにはどうすればいいか悩んだ。

netlify function

https://docs.netlify.com/functions/overview/

これを使うことでAWS Lambdaと同様の動きをnetlify上で起こすことができる。 今回使用するのはsubmission-createdという名前を使うことでFORMが送信されたときをトリガーとして動作させることができる。 他にも様々なことをトリガーとしてどうさせることができるので用途に応じてチョイスするのが良いだろう。

使う内容としてはnodemailerを使う https://nodemailer.com/about/

require('dotenv').config();

const nodemailer = require('nodemailer');

exports.handler = function(event, context, callback) {
  const { name, email, message } = JSON.parse(event.body).payload.data

  console.log(user);

  let transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {
      type:"OAuth2",
      user:"GmailのID",
      clientId:"取得したClientID",
      clientSecret:"取得したコード",
      refreshToken:"（リフレッシュトークン）",
      accessToken: "（アクセストークン)"   
    },
  });


  console.log(event.body);

  let mailOptions = {
    from: `"表示する名前"<使用するgmailアドレス>`,
    to: `${email}`,
    subject: 'ありがとうございます。フォームを送信いたしました',
    html: `${name}様　メッセージを送信しました。`,
  };

  transporter.sendMail(mailOptions, function(error, info) {
    if (error) {
      callback(error);
    } else {
      callback(null, {
        statusCode: 200,
        body: 'Ok',
      });
    }
  });
};
Netlifyはサーバーレスの味方

フォームを作ることに関してはまた別に書こうとは思うが かんたんな動的動作についてはサーバーレスでもなんとかなるのでコストダウンにつながるのではないかとは思われる。