Odpravljanje težav Nodemailer SMTP na Vercelu

Isanes Francois
Sobota, 01. junij 2024 22:52:21
JavaScript (Next.js)

Reševanje težav z e-pošto v produkciji

Ali imate težave z Nodemailerjem, ko je vaša aplikacija nameščena na Vercelu? Medtem ko v vašem lokalnem okolju vse deluje brezhibno, lahko prehod na proizvodnjo včasih povzroči nepričakovane napake.

V tem članku bomo raziskali pogoste težave in njihove rešitve, pri čemer se bomo posebej osredotočili na to, zakaj vaša nastavitev e-pošte SMTP morda ne uspe na Vercelu, tudi če deluje lokalno. Poglobimo se v odpravljanje težav in odpravo teh težav.

Ukaz Opis
NextRequest Predstavlja objekt zahteve v poti API-ja Next.js, ki omogoča dostop do podatkov dohodne zahteve.
NextResponse Uporablja se za ustvarjanje odzivnih objektov v poti API-ja Next.js, kar omogoča pošiljanje odgovorov JSON.
nodemailer.createTransport Inicializira transportni objekt za pošiljanje e-pošte prek SMTP z Nodemailerjem.
transport.sendMail Pošlje e-pošto s transportnim objektom, ustvarjenim z nodemailer.createTransport.
await request.json() Ekstrahira podatke JSON iz dohodne zahteve v asinhroni funkciji.
fetch Izvaja zahteve HTTP, kot je pošiljanje podatkov obrazca končni točki API-ja.
useState Upravlja stanje znotraj funkcionalne komponente React, uporabno za obdelavo vnosov obrazcev.

Razumevanje rešitve za težave z Nodemailerjem

Priloženi zaledni skript je zasnovan za pošiljanje e-pošte prek kontaktnega obrazca z uporabo na poti API-ja Next.js. Ko je na to končno točko podana zahteva POST, skript izvleče e-pošto, ime in sporočilo iz telesa zahteve. Nato z uporabo teh podrobnosti sestavi e-poštno vsebino HTML. Transportni objekt je ustvarjen z , ki določa podrobnosti strežnika SMTP, vključno z gostiteljem, vrati in poverilnicami za preverjanje pristnosti.

Ko je prevoz nastavljen, se pokliče z možnostmi e-pošte za pošiljanje e-pošte. Če je uspešen, se vrne odgovor JSON, ki označuje uspeh; sicer se vrne sporočilo o napaki. Na sprednji strani je funkcija pošlje podatke obrazca končni točki API z uporabo ukaz z zahtevo POST. Država se upravlja z uporabo useState za zajemanje in posodabljanje vhodnih vrednosti obrazca. Po oddaji obrazca se funkcija sproži postopek pošiljanja e-pošte, kar zagotavlja nemoteno uporabniško izkušnjo.

Zaledna koda: Upravljanje z nastavitvijo Nodemailer v Next.js

JavaScript (pot API-ja Next.js)

import { type NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(request: NextRequest) {
  try {
    const { email, name, message } = await request.json();

    const htmlContent = `
      <html>
        <head>
          <style>
            body {
              font-family: Arial, sans-serif;
              font-size: 16px;
            }
            .container {
              max-width: 600px;
              margin: 0 auto;
            }
            .subject {
              color: #b02d1f;
              margin-bottom: 20px;
            }
          </style>
        </head>
        <body>
          <div class="container">
            <h2 class="subject">New Message From Contact Form</h2>
            <p><strong>Name:</strong> ${name}
            <p><strong>Email:</strong> ${email}
            <p><strong>Message:</strong> ${message}
          </div>
        </body>
      </html>`;

    const transport = nodemailer.createTransport({
      host: "example.prod.iad2.secureserver.net",
      port: 465,
      secure: true,
      auth: {
        user: process.env.MY_EMAIL,
        pass: process.env.MY_PASSWORD,
      },
    });

    const mailOptions = {
      from: process.env.MY_EMAIL,
      to: process.env.MY_EMAIL,
      subject: `New Message from ${name} (${email})`,
      html: htmlContent,
      replyTo: email,
    };

    await new Promise((resolve, reject) => {
      transport.sendMail(mailOptions, function (err) {
        if (!err) {
          resolve('Email sent!');
        } else {
          reject(err);
        }
      });
    });

    return NextResponse.json({ message: 'Email sent' });
  } catch (err) {
    return NextResponse.json({ error: err.message || "An error occurred" }, { status: 500 });
  }
}

Koda sprednjega dela: pošiljanje e-pošte prek kontaktnega obrazca

JavaScript (React)

import { FormData } from '@/components/ContactForm';

export function sendEmail(data: FormData) {
  const apiEndpoint = '/api/email';

  fetch(apiEndpoint, {
    method: 'POST',
    body: JSON.stringify(data),
  })
    .then((res) => res.json())
    .catch((err) => console.error("Error sending email:", err));
}

// Example of how to use sendEmail function:
import { useState } from 'react';
import { sendEmail } from '@/utils/send-email';

export default function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    sendEmail(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <textarea name="message" value={formData.message} onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
}

Zagotavljanje pravilne konfiguracije spremenljivke okolja

Eden ključnih vidikov, ki se pogosto spregleda pri obravnavanju težav, kot je opisana, je pravilna konfiguracija spremenljivk okolja v produkcijskem okolju. Medtem ko imajo lokalna razvojna okolja običajno preprost dostop do spremenljivk okolja prek datoteke .env, uvajanje v storitev, kot je Vercel, zahteva, da so te spremenljivke pravilno nastavljene v nastavitvah platforme. To zagotavlja, da so občutljivi podatki, kot so e-poštne poverilnice, varno upravljani in dostopni vaši aplikaciji med izvajanjem.

Če želite konfigurirati spremenljivke okolja v Vercelu, morate iti v nastavitve projekta in dodati zahtevane spremenljivke v razdelku »Spremenljivke okolja«. Prepričajte se, da se imena spremenljivk okolja natančno ujemajo s tistimi, uporabljenimi v vaši kodi. Ta korak je ključnega pomena za brezhibno delovanje funkcij, kot je pošiljanje e-pošte prek strežnikov SMTP z uporabo Nodemailerja.

  1. Zakaj moja e-pošta deluje lokalno, na Vercelu pa ne?
  2. Zagotovite, da so vaše spremenljivke okolja pravilno nastavljene na Vercelu. Preverite konfiguracijo SMTP in podrobnosti preverjanja pristnosti.
  3. Kako nastavim spremenljivke okolja na Vercelu?
  4. Pojdite v nastavitve projekta na Vercelu, poiščite razdelek »Okoljske spremenljivke« in tam dodajte svoje spremenljivke.
  5. Katere so pogoste težave z Nodemailerjem v proizvodnji?
  6. Težave pogosto vključujejo nepravilne spremenljivke okolja, napačno konfigurirane nastavitve SMTP ali omrežne omejitve.
  7. Ali lahko z Nodemailerjem uporabim kateri koli strežnik SMTP?
  8. Da, če imate pravilne podrobnosti konfiguracije, kot so gostitelj, vrata in poverilnice za preverjanje pristnosti.
  9. Kako lahko odpravim napako 500 iz svojega e-poštnega API-ja?
  10. Preverite strežniške dnevnike za določena sporočila o napakah in zagotovite, da so vse odvisnosti in konfiguracije pravilno nastavljene.
  11. Kakšni so najboljši varnostni postopki za pošiljanje e-pošte?
  12. Uporabite spremenljivke okolja za občutljive informacije, varne povezave (SSL/TLS) in pravilno preverite pristnost vašega e-poštnega strežnika.
  13. Ali potrebujem drugačno nastavitev za lokalno in produkcijsko okolje?
  14. Čeprav je nastavitev lahko podobna, zagotovite, da so konfiguracije, specifične za okolje, pravilno uporabljene v proizvodnji.
  15. Ali obstaja alternativa Nodemailerju za pošiljanje e-pošte?
  16. Da, druge možnosti vključujejo SendGrid, Mailgun in AWS SES, ki ponujajo robustne API-je za pošiljanje e-pošte.
  17. Zakaj je moja e-pošta označena kot vsiljena pošta?
  18. Prepričajte se, da je vsebina vaše e-pošte dobro oblikovana, vključuje ustrezne glave in da ima vaša pošiljateljska domena ustrezne zapise SPF/DKIM.
  19. Ali lahko uporabljam Gmail z Nodemailerjem v proizvodnji?
  20. Da, lahko uporabljate Gmail, vendar ga morate konfigurirati z geslom za aplikacijo in omogočiti manj varne aplikacije ali uporabiti OAuth2 za večjo varnost.

Skratka, reševanje težave Nodemailerja, ki deluje lokalno, ne pa tudi na Vercelu, vključuje nekaj ključnih korakov. Prepričajte se, da so vaše spremenljivke okolja pravilno konfigurirane v nastavitvah Vercela. Preverite, ali so podrobnosti vašega strežnika SMTP, vključno z gostiteljem, vrati in poverilnicami za preverjanje pristnosti, točne. Ti ukrepi bi morali odpraviti napako 500, na katero naletite v produkcijski gradnji. S pravilno nastavitvijo in skrbnim posvečanjem podrobnostim bi moral vaš kontaktni obrazec brezhibno delovati v lokalnem in produkcijskem okolju ter zagotavljati zanesljive komunikacijske zmogljivosti za vašo aplikacijo.