Åtgärda Nodemailer SMTP-problem på Vercel

Åtgärda Nodemailer SMTP-problem på Vercel
Åtgärda Nodemailer SMTP-problem på Vercel
Isanes Francois
Lördag 1 juni 2024 22:54:04

Lösning av e-postproblem i produktionen

Står du inför problem med Nodemailer när din app distribueras på Vercel? Även om allt fungerar perfekt på din lokala miljö, kan övergången till produktion ibland leda till oväntade fel.

I den här artikeln kommer vi att utforska vanliga problem och deras lösningar, speciellt med fokus på varför din SMTP-e-postkonfiguration kan misslyckas på Vercel, även om den fungerar lokalt. Låt oss dyka in i felsökning och åtgärda dessa problem.

Kommando Beskrivning
NextRequest Representerar förfrågningsobjektet i Next.js API-rutter, vilket ger åtkomst till inkommande förfrågningsdata.
NextResponse Används för att skapa svarsobjekt i Next.js API-rutter, vilket möjliggör sändning av JSON-svar.
nodemailer.createTransport Initierar ett transportobjekt för att skicka e-post med SMTP med Nodemailer.
transport.sendMail Skickar ett e-postmeddelande med hjälp av transportobjektet skapat med nodemailer.createTransport.
await request.json() Extraherar JSON-data från den inkommande begäran i en asynkronfunktion.
fetch Utför HTTP-förfrågningar, som att skicka formulärdata till en API-slutpunkt.
useState Hanterar tillstånd inom en funktionell React-komponent, användbar för att hantera formulärinmatningar.

Förstå lösningen på Nodemailer-problem

Det medföljande backend-skriptet är utformat för att hantera e-postsändning via ett kontaktformulär med hjälp av Nodemailer i en Next.js API-rutt. När en POST-begäran görs till den här slutpunkten extraherar skriptet e-post, namn och meddelande från förfrågans text. Den konstruerar sedan ett HTML-e-postinnehåll med hjälp av dessa detaljer. Transportobjektet skapas med nodemailer.createTransport, som anger SMTP-serverns detaljer, inklusive värd, port och autentiseringsuppgifter.

När transporten är klar, transport.sendMail anropas med e-postalternativen för att skicka e-postmeddelandet. Om det lyckas returneras ett JSON-svar som indikerar framgång; annars skickas ett felmeddelande tillbaka. På fronten, den sendEmail funktionen skickar formulärdata till API-slutpunkten med hjälp av fetch kommando med en POST-begäran. Staten sköts med hjälp av useState för att fånga och uppdatera formulärinmatningsvärden. Vid inlämning av formuläret handleSubmit funktionen utlöser e-postsändningsprocessen, vilket säkerställer en smidig användarupplevelse.

Backend-kod: Hanterar Nodemailer-installationen i Next.js

JavaScript (Next.js API Route)

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-kod: Skicka e-post via kontaktformulär

JavaScript (Reagera)

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

Säkerställer korrekt miljövariabelkonfiguration

En avgörande aspekt som ofta förbises när man hanterar problem som den som beskrivs är den korrekta konfigurationen av miljövariabler i produktionsmiljön. Medan lokala utvecklingsmiljöer vanligtvis har enkel åtkomst till miljövariabler genom en .env-fil, kräver distribution till en tjänst som Vercel att dessa variabler är korrekt inställda i plattformens inställningar. Detta säkerställer att känslig information, såsom e-postuppgifter, hanteras säkert och är tillgänglig för din applikation under körning.

För att konfigurera miljövariabler på Vercel måste du gå till dina projektinställningar och lägga till de nödvändiga variablerna under avsnittet "Miljövariabler". Se till att namnen på miljövariablerna matchar exakt de som används i din kod. Detta steg är avgörande för att funktioner som t.ex. skicka e-post via SMTP-servrar med Nodemailer ska fungera smidigt.

Vanliga frågor om Nodemailer och SMTP på Vercel

  1. Varför fungerar min e-post lokalt men inte på Vercel?
  2. Se till att dina miljövariabler är korrekt inställda på Vercel. Kontrollera SMTP-konfigurationen och autentiseringsdetaljerna.
  3. Hur ställer jag in miljövariabler på Vercel?
  4. Gå till dina projektinställningar på Vercel, hitta avsnittet "Miljövariabler" och lägg till dina variabler där.
  5. Vilka är vanliga problem med Nodemailer i produktionen?
  6. Problem inkluderar ofta felaktiga miljövariabler, felkonfigurerade SMTP-inställningar eller nätverksbegränsningar.
  7. Kan jag använda vilken SMTP-server som helst med Nodemailer?
  8. Ja, så länge du har rätt konfigurationsdetaljer som värd-, port- och autentiseringsuppgifter.
  9. Hur kan jag felsöka ett 500-fel från mitt e-post-API?
  10. Kontrollera serverloggarna för specifika felmeddelanden och se till att alla beroenden och konfigurationer är korrekt inställda.
  11. Vilka är de bästa säkerhetsmetoderna för att skicka e-post?
  12. Använd miljövariabler för känslig information, säkra anslutningar (SSL/TLS) och autentisera din e-postserver ordentligt.
  13. Behöver jag en annan inställning för lokala och produktionsmiljöer?
  14. Även om inställningen kan vara liknande, se till att miljöspecifika konfigurationer tillämpas korrekt i produktionen.
  15. Finns det något alternativ till Nodemailer för att skicka e-post?
  16. Ja, andra alternativ inkluderar SendGrid, Mailgun och AWS SES, som erbjuder robusta API:er för att skicka e-post.
  17. Varför markeras min e-post som skräppost?
  18. Se till att ditt e-postinnehåll är välformaterat, innehåller korrekta rubriker och att din sändande domän har korrekta SPF/DKIM-poster.
  19. Kan jag använda Gmail med Nodemailer i produktion?
  20. Ja, du kan använda Gmail, men du måste konfigurera det med ett applösenord och aktivera mindre säkra appar eller använda OAuth2 för bättre säkerhet.

Sammanfattning av felsökningsguiden

Sammanfattningsvis, att lösa problemet med att Nodemailer fungerar lokalt men inte på Vercel innebär några viktiga steg. Se till att dina miljövariabler är korrekt konfigurerade i Vercels inställningar. Kontrollera att dina SMTP-serveruppgifter, inklusive värd-, port- och autentiseringsuppgifter, är korrekta. Dessa åtgärder bör ta itu med 500-felet du stöter på i produktionsbygget. Med korrekt installation och noggrann uppmärksamhet på detaljer bör ditt kontaktformulär fungera sömlöst i både lokala och produktionsmiljöer, vilket ger pålitliga kommunikationsmöjligheter för din applikation.