Løsning af Nodemailer SMTP-problemer på Vercel

Isanes Francois
Lørdag den 1. juni 2024 kl. 22.07.21
JavaScript (Next.js)

Løsning af e-mail-problemer i produktionen

Står du over for problemer med Nodemailer, når din app er implementeret på Vercel? Selvom alt fungerer perfekt på dit lokale miljø, kan overgangen til produktion nogle gange føre til uventede fejl.

I denne artikel vil vi udforske almindelige problemer og deres løsninger, specielt med fokus på, hvorfor din SMTP-e-mail-opsætning muligvis mislykkes på Vercel, selvom det fungerer lokalt. Lad os dykke ned i fejlfinding og løsning af disse problemer.

Kommando Beskrivelse
NextRequest Repræsenterer anmodningsobjektet i Next.js API-ruter, hvilket giver adgang til indgående anmodningsdata.
NextResponse Bruges til at oprette svarobjekter i Next.js API-ruter, hvilket muliggør afsendelse af JSON-svar.
nodemailer.createTransport Initialiserer et transportobjekt til at sende e-mails ved hjælp af SMTP med Nodemailer.
transport.sendMail Sender en e-mail ved hjælp af transportobjektet oprettet med nodemailer.createTransport.
await request.json() Udtrækker JSON-data fra den indgående anmodning i en asynkroniseringsfunktion.
fetch Udfører HTTP-anmodninger, såsom at sende formulardata til et API-slutpunkt.
useState Administrerer tilstand i en React funktionel komponent, nyttig til håndtering af formularinput.

Forstå løsningen på Nodemailer-problemer

Det medfølgende backend-script er designet til at håndtere e-mail-afsendelse via en kontaktformular ved hjælp af i en Next.js API-rute. Når der foretages en POST-anmodning til dette slutpunkt, udtrækker scriptet e-mailen, navnet og meddelelsen fra anmodningens brødtekst. Det konstruerer derefter et HTML-e-mail-indhold ved hjælp af disse detaljer. Transportobjektet oprettes med , med angivelse af SMTP-serverdetaljerne, inklusive værts-, port- og godkendelsesoplysninger.

Når transporten er sat op, kaldes med e-mail-mulighederne for at sende e-mailen. Hvis det lykkes, returneres et JSON-svar, der indikerer succes; ellers sendes en fejlmeddelelse tilbage. På frontenden er funktionen sender formulardataene til API-slutpunktet ved hjælp af kommando med en POST-anmodning. Staten styres vha useState at fange og opdatere formularinputværdier. Ved indsendelse af formularen funktionen udløser e-mail-afsendelsesprocessen, hvilket sikrer en smidig brugeroplevelse.

Backend-kode: Håndtering af Nodemailer-opsætning i Next.js

JavaScript (Next.js API-rute)

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 });
  }
}

Frontend-kode: Sender e-mail via kontaktformular

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>
  );
}

Sikring af korrekt miljøvariabelkonfiguration

Et afgørende aspekt, der ofte overses, når man håndterer problemer som det beskrevne, er den korrekte konfiguration af miljøvariabler i produktionsmiljøet. Mens lokale udviklingsmiljøer normalt har nem adgang til miljøvariabler gennem en .env-fil, kræver implementering til en tjeneste som Vercel, at disse variabler er korrekt opsat i platformens indstillinger. Dette sikrer, at følsomme oplysninger, såsom e-mail-legitimationsoplysninger, administreres sikkert og er tilgængelige for din applikation under kørsel.

For at konfigurere miljøvariabler på Vercel, skal du gå til dine projektindstillinger og tilføje de nødvendige variabler under afsnittet 'Miljøvariabler'. Sørg for, at navnene på miljøvariablerne stemmer nøjagtigt overens med dem, der bruges i din kode. Dette trin er afgørende for den problemfri funktion af funktioner som at sende e-mails gennem SMTP-servere ved hjælp af Nodemailer.

  1. Hvorfor fungerer min e-mail lokalt, men ikke på Vercel?
  2. Sørg for, at dine miljøvariabler er korrekt opsat på Vercel. Kontroller SMTP-konfigurationen og godkendelsesdetaljerne.
  3. Hvordan indstiller jeg miljøvariabler på Vercel?
  4. Gå til dine projektindstillinger på Vercel, find sektionen 'Miljøvariabler', og tilføj dine variabler der.
  5. Hvad er almindelige problemer med Nodemailer i produktionen?
  6. Problemer omfatter ofte forkerte miljøvariabler, forkert konfigurerede SMTP-indstillinger eller netværksbegrænsninger.
  7. Kan jeg bruge enhver SMTP-server med Nodemailer?
  8. Ja, så længe du har de korrekte konfigurationsdetaljer såsom værts-, port- og godkendelsesoplysninger.
  9. Hvordan kan jeg debugge en 500-fejl fra min e-mail-API?
  10. Tjek serverlogfilerne for specifikke fejlmeddelelser, og sørg for, at alle afhængigheder og konfigurationer er korrekt opsat.
  11. Hvad er de bedste sikkerhedsmetoder for at sende e-mails?
  12. Brug miljøvariabler til følsomme oplysninger, sikre forbindelser (SSL/TLS), og godkend din e-mailserver korrekt.
  13. Har jeg brug for en anden opsætning til lokale og produktionsmiljøer?
  14. Selvom opsætningen kan være ens, skal du sikre dig, at miljøspecifikke konfigurationer anvendes korrekt i produktionen.
  15. Er der et alternativ til Nodemailer til at sende e-mails?
  16. Ja, andre muligheder inkluderer SendGrid, Mailgun og AWS SES, som tilbyder robuste API'er til afsendelse af e-mails.
  17. Hvorfor bliver min e-mail markeret som spam?
  18. Sørg for, at dit e-mailindhold er velformateret, indeholder korrekte overskrifter, og at dit afsendende domæne har korrekte SPF/DKIM-registreringer.
  19. Kan jeg bruge Gmail med Nodemailer i produktionen?
  20. Ja, du kan bruge Gmail, men du skal konfigurere den med en app-adgangskode og aktivere mindre sikre apps eller bruge OAuth2 for bedre sikkerhed.

Som konklusion involverer løsningen af ​​problemet med, at Nodemailer arbejder lokalt, men ikke på Vercel, nogle få vigtige trin. Sørg for, at dine miljøvariabler er korrekt konfigureret i Vercels indstillinger. Bekræft, at dine SMTP-serveroplysninger, herunder værts-, port- og godkendelsesoplysninger, er nøjagtige. Disse foranstaltninger bør adressere den 500-fejl, du støder på i produktionsbuilden. Med korrekt opsætning og omhyggelig opmærksomhed på detaljer bør din kontaktformular fungere problemfrit i både lokale og produktionsmiljøer, hvilket giver pålidelige kommunikationsmuligheder til din applikation.