reactでfirebaseを使ってgmailを送信

はじめに

　reactでfirebaseを使ってgmailを送信するアプリ作成に関する忘備録です。

条件

・node.jsがインストール済み
・firebaseのプロジェクトがあること（従量加算）

フロントエンドとバックエンドの同時作成

フロントエンドはhostingにデプロイし、バックエンドはfunctionにデプロイする必要があるようですが、reactでは同時に作成できるようです。

アプリ作成

ターミナル

npx create-react-app firebase-email-sender
cd firebase-email-sender

Firebase SDKのインストール:

ターミナル

npm install firebase

Firebase.jsファイルの作成:

配置先はsrc/firebase.js

Firebase.js

import { initializeApp } from "firebase/app";
import { getFunctions } from "firebase/functions";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
export const functions = getFunctions(app);

メール送信フォームの作成:

src/App.js に、メール送信フォームを作成

APP.js

import { httpsCallable } from "firebase/functions";
import React, { useState } from "react";
import "./App.css";
import { functions } from "./firebase";

function App() {
  const [emailContent, setEmailContent] = useState("");
  const [emailAddresses, setEmailAddresses] = useState("");
  const [emailSubject, setEmailSubject] = useState(""); // 件名用のステート

  const sendEmail = async () => {
    const sendMail = httpsCallable(functions, "sendBulkEmail");
    try {
      const result = await sendMail({
        subject: emailSubject, // 件名を追加
        content: emailContent,
        recipients: emailAddresses.split(",").map((email) => email.trim()),
      });
      console.log("Result:", result);
      alert("Email sent successfully!");
    } catch (error) {
      console.error("Error sending email:", error);
      alert("Failed to send email.");
    }
  };

  return (
    <div className="EmailForm-container">
      <div className="content">
        <div className="title">
          <h1>メール送信</h1>
        </div>
        <div className="subject">
          <label htmlFor="subject">件名</label>
          <input
            type="text"
            id="subject"
            value={emailSubject}
            onChange={(e) => setEmailSubject(e.target.value)}
            placeholder="Enter email subject"
          />
        </div>
        <div className="emailaddress">
          <label htmlFor="emailAddresses">Email Address</label>
          <input
            type="text"
            id="emailAddresses"
            value={emailAddresses}
            onChange={(e) => setEmailAddresses(e.target.value)}
            placeholder="Enter email addresses separated by commas"
          />
        </div>
        <div className="text">
          <label htmlFor="emailContent">内容</label>
          <textarea
            id="emailContent"
            value={emailContent}
            onChange={(e) => setEmailContent(e.target.value)}
            placeholder="Enter email content here..."
          />
        </div>
        <button onClick={sendEmail}>Send Email</button>
      </div>
    </div>
  );
}

export default App;

App.cssの設定

App.css

/* 全体のコンテナ */
.EmailForm-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f4f8;
  font-family: "Arial", sans-serif;
}

/* 内部のコンテンツ */
.EmailForm-container .content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

/* タイトル */
.EmailForm-container .content .title h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* ラベル */
.EmailForm-container .content .subject label,
.EmailForm-container .content .emailaddress label,
.EmailForm-container .content .text label {
  font-size: 22px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
  display: block;
}

/* 入力フィールド */
.EmailForm-container .content .subject input,
.EmailForm-container .content .emailaddress input,
.EmailForm-container .content .text textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* テキストエリアのスタイル */
.EmailForm-container .content .text textarea {
  height: 100px;
  resize: none;
}

/* ボタンのスタイル */
.EmailForm-container .content button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.EmailForm-container .content button:hover {
  background-color: #0056b3;
}

###　バックエンドのセットアップ
バックエンドは、同一アプリの中のfunctionsフォルダに作成します。
今回の場合、firebase-email-sender/functionフォルダの中です。
まず、Nodemailerをインストールします。

ターミナル

cd functions
npm install nodemailer

メール送信用のCloud Functionの作成:

アプリの中に存在するfunctions/index.js ファイルを編集します

index.jp

require("dotenv").config();
const functions = require("firebase-functions");
const nodemailer = require("nodemailer");

// メール送信者の設定
const transporter = nodemailer.createTransport({
  service: "gmail", // Gmailを使用する場合
  auth: {
    user: process.env.EMAIL_USER, // .env ファイルから環境変数を読み込む
    pass: process.env.EMAIL_PASS, // 送信者のメールアカウントのパスワード
  },
});

exports.sendBulkEmail = functions.https.onCall((data, context) => {
  const mailOptions = {
    from: "[e-mail]", // 差出人のメールアドレス
    to: data.recipients.join(", "), // 受信者のメールアドレス
    subject: data.subject, // クライアントから送信された件名を使用
    text: data.content, // クライアントから送信された本文を使用
  };

  return transporter
    .sendMail(mailOptions)
    .then((info) => {
      return { success: true, messageId: info.messageId };
    })
    .catch((error) => {
      throw new functions.https.HttpsError("internal", error.message);
    });
});

###.envファイルの作成
functionsファイルの直下に設ける。
パスワードはアプリ用のものを入手する必要があります。

.env

EMAIL_USER=********@gmail.com
EMAIL_PASS=****************


###　メールアドレスを環境変数を設定しているので、functionsにdotenvモジュールをインストールする。
```:ターミナル
cd functions
npm install dotenv

アプリのHostingを実施

ターミナル

npm run build
firebase deploy --only hosting

Firebase Functionsのデプロイ:

全てではなく、functionsだけをデプロイします。

ターミナル

firebase deploy --only functions