Zenn
🍘

Remixで、mail する (メール送信)

2021/12/08に公開
JavaScript
Node.js
Remix
tech

概要:

Remixで、メールする例となります。

  • 作成時に、vercelを選択した例です。

構成

  • remix
  • nodemailer

準備

  • npm add
npm i --save nodemailer

メール送信

https://gist.github.com/kuc-arc-f/4e7c72d1f298ce93a320a924d9165edd

  • nodemailer, import
mailer.ts
const mailer = require("nodemailer");

export default mailer;
  • Config. の変数は、 .env等から呼び込む例で、SMTP設定になります。

SMTP_HOST: ホスト
SMTP_PORT: ポート番号
SMTP_AUTH_USER: ユーザー
SMTP_AUTH_PASS: パスワード
SEND_MAIL_ADDRESS: 送信元のメール
receiverEmailAddress: 送信先のメール

mail.tsx
/* mail test */
import { useEffect, useRef, useState } from "react";
import type { MetaFunction, LoaderFunction } from "remix";
import { useLoaderData, Link } from "remix";
import { Form, json, useActionData, redirect } from "remix";
import Config from '../../../config'
import mailer from '../../lib/mailer'

export let meta: MetaFunction = () => {
  return {
    title: "test, mail",
    description: "Welcome to remix!"
  };
};

export async function action({ request }) {
  let formData = await request.formData();
  let to_mail = formData.get("to_mail");
console.log(to_mail);
//console.log(Config);
  const receiverEmailAddress = to_mail;
console.log(Config.SMTP_HOST);
console.log(Config.SMTP_PORT);
console.log(Config.SMTP_AUTH_USER);
console.log(Config.SMTP_AUTH_PASS);
console.log(Config.SEND_MAIL_ADDRESS);
  let transporter = mailer.createTransport({
    host: Config.SMTP_HOST,
    port: Config.SMTP_PORT,
    secure: Config.SMTP_SECURE,
    auth: {
      user: Config.SMTP_AUTH_USER,
      pass: Config.SMTP_AUTH_PASS,
    },
  });
  let info = await transporter.sendMail({
    from: Config.SEND_MAIL_ADDRESS,
    to: receiverEmailAddress,
    subject: "title_1",
    text: "text_sample",
  });
console.log("Message sent: %s", info.messageId);
console.log("Preview URL: %s", mailer.getTestMessageUrl(info));

  return json({ result: 'OK' })
}

export default function Page() {
  let data = useActionData();
  console.log(data);
  const onClick = async function(){
  }
  return (
    <div className="remix__page">
      <main>
        <h2>mail ,test</h2>
        <hr />
        <Form method="post" name="form1" className="remix__form">
        <label>
          <div>to_mail:</div>
          <input type="text" id="to_mail" name="to_mail" className="form-control"  />
          </label>
          <div>
            <button type="submit">Submit</button>
          </div>
        </Form>        
      </main>
    </div>
  );
}

関連のページ

https://zenn.dev/knaka0209/articles/ac0e552abe1a8b

....

Discussion