NestJS로 이메일 보내기

이 게시물은 nest-modules/mailer 백엔드에서 NestJS을 사용하여 이메일을 보내는 데 필요한 모든 정보를 제공합니다. 👇

📧 Nodemailer을 사용하여 이메일 보내기
🧩 handlebars으로 이메일 템플릿 만들기(대체: pug 또는 ejs)
⚙️ .env 파일을 통해 smtp 구성

종속성 설치

Nest 애플리케이션에 @nestjs-modules/mailer 및 피어 종속성nodemailer을 추가합니다. 이메일 템플릿 생성을 위해 지원되는 템플릿 엔진 중 하나를 선택합니다: handlebars , pug 또는 ejs .

npm install --save @nestjs-modules/mailer nodemailer

# pick one template adapter and install
npm install --save handlebars
# or
npm install --save pug
# or
npm install --save ejs

이 가이드에서는 핸들바를 사용하여 이메일 템플릿을 만듭니다.

npm install --save @nestjs-modules/mailer nodemailer handlebars

메일 모듈

Nest CLI를 통해 mail 모듈 및 서비스를 생성한 다음 templates 폴더를 생성해 보겠습니다.

nest g module mail
nest g service mail

mkdir src/mail/templates

MailerModule를 MailModule로 가져오고 smtp를 통해 메일 서버 전송을 구성합니다. 지원서 전체에서 동일한 메일을 일관되게 사용하려면 기본from 이메일 주소를 제공하세요. 걱정하지 마세요. 필요할 때마다 항상 기본값을 재정의할 수 있습니다. 마지막 단계에서는 이 경우 템플릿 폴더와 어댑터를 구성합니다HandlebarsAdapter. Mailer documentation에서 다른 템플릿 어댑터에 대해 자세히 알아보십시오.

import { MailerModule } from '@nestjs-modules/mailer';
import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter';
import { Module } from '@nestjs/common';
import { MailService } from './mail.service';
import { join } from 'path';

@Module({
  imports: [
    MailerModule.forRoot({
      // transport: 'smtps://[email protected]:[email protected]',
      // or
      transport: {
        host: 'smtp.example.com',
        secure: false,
        auth: {
          user: '[email protected]',
          pass: 'topsecret',
        },
      },
      defaults: {
        from: '"No Reply" <[email protected]>',
      },
      template: {
        dir: join(__dirname, 'templates'),
        adapter: new HandlebarsAdapter(), // or new PugAdapter() or new EjsAdapter()
        options: {
          strict: true,
        },
      },
    }),
  ],
  providers: [MailService],
  exports: [MailService], // 👈 export for DI
})
export class MailModule {}

MailService를 내보내 컨트롤러, 리졸버 및 서비스에 DI(종속성 주입)를 통해 제공합니다.

핸들바 이메일 템플릿

confirmation.hbs 폴더에 첫 번째 이메일 템플릿src/mail/templates을 만듭니다. 사용자 확인을 위해 다음과 같은 간단한 템플릿을 추가합니다.

<p>Hey {{ name }},</p>
<p>Please click below to confirm your email</p>
<p>
    <a href="{{ url }}">Confirm</a>
</p>

<p>If you did not request this email you can safely ignore it.</p>

중괄호는 handlebars expressions이며 나중에 이메일을 보낼 때 context를 제공합니다.

Nest 애플리케이션을 빌드할 때 빌드 출력에 템플릿 파일이 누락되었음을 알 수 있습니다( dist/mail/templates ).



기본적으로 Nest는 빌드 단계 중에 TypeScript 컴파일 파일( .js 및 .d.ts )만 배포합니다. .hbs 파일을 배포하려면 nest-cli.json를 열고 templates 디렉토리를 전역compilerOptions의 assets 속성에 추가합니다.

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": ["mail/templates/**/*"] // 👈 or "**/*.hbs" all files ending with .hbs
    "watchAssets": true // 🤖 copy assets in watch mode
  }
}

Nest 애플리케이션을 다시 빌드하면 템플릿 파일이 빌드 출력에 포함됩니다.

메일 보내기

자신의 MailerService에 MailService를 추가하고 여기에서 메일링 로직을 구현하십시오. 템플릿confirmation.hbs을 사용하여 사용자 확인 이메일을 보내겠습니다. {{ name }} 키 아래에 {{ url }} 및 context를 제공해야 합니다. Handlebars documentation과 같은 자세한 배경 정보는 Nested input objects을 참조하십시오.

import { MailerService } from '@nestjs-modules/mailer';
import { Injectable } from '@nestjs/common';
import { User } from './../user/user.entity';

@Injectable()
export class MailService {
  constructor(private mailerService: MailerService) {}

  async sendUserConfirmation(user: User, token: string) {
    const url = `example.com/auth/confirm?token=${token}`;

    await this.mailerService.sendMail({
      to: user.email,
      // from: '"Support Team" <[email protected]>', // override default from
      subject: 'Welcome to Nice App! Confirm your Email',
      template: 'confirmation', // `.hbs` extension is appended automatically
      context: { // ✏️ filling curly brackets with content
        name: user.name,
        url,
      },
    });
  }
}

// ./../user/user.entity
export interface User {
  email: string;
  name: string;
}

메일 서비스 이용

MailModule를 사용해야 하는 모듈의 imports 목록에 MailService를 추가합니다.

import { Module } from '@nestjs/common';
import { AuthController } from './auth.controller';
import { AuthService } from './auth.service';
import { MailModule } from './mail/mail.module';

@Module({
  imports: [MailModule], // 📧
  controllers: [AuthController],
  providers: [AuthService],
})
export class AuthModule {}

이제 컨트롤러, 해석기 및 서비스의 생성자에 MailService를 추가할 수 있습니다.

import { Injectable } from '@nestjs/common';
import { MailService } from './../mail/mail.service';
import { User } from './../user/user.entity';

@Injectable()
export class AuthService {
  constructor(private mailService: MailService) {}

  async signUp(user: User) {
    const token = Math.floor(1000 + Math.random() * 9000).toString();
    // create user in db
    // ...
    // send confirmation mail
    await this.mailService.sendUserConfirmation(user, token);
  }
}

구성을 dotenv 파일로 이동

현재 메일 서버 구성은 MailModule에 하드코딩되어 있습니다. Nest는 .env 파일에서 구성 및 자격 증명을 로드할 수 있는 configuration module을 제공합니다.
@nestjs/config 종속성을 설치합니다.

# config 
npm i --save @nestjs/config

ConfigModule 의 imports 목록에 AppModule 를 추가하십시오.

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { AuthModule } from './auth/auth.module';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true, // no need to import into other modules
    }),
    AuthModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

루트 디렉토리에 .env 파일을 만들고 .gitingore 파일에 추가하는 것을 잊지 마십시오.

# mail
MAIL_HOST=smtp.example.com
[email protected]
MAIL_PASSWORD=topsecret
[email protected]

# optional
MAIL_TRANSPORT=smtp://${MAIL_USER}:${MAIL_PASSWORD}@${MAIL_HOST}

MailModule를 다시 열고 MailerModule.forRoot를 MailerModule.forRootAsync로 변경하면 ConfigService를 주입하고 사용할 수 있습니다.

import { MailerModule } from '@nestjs-modules/mailer';
import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter';
import { Module } from '@nestjs/common';
import { MailService } from './mail.service';
import { join } from 'path';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    MailerModule.forRootAsync({
      // imports: [ConfigModule], // import module if not enabled globally
      useFactory: async (config: ConfigService) => ({
        // transport: config.get("MAIL_TRANSPORT"),
        // or
        transport: {
          host: config.get('MAIL_HOST'),
          secure: false,
          auth: {
            user: config.get('MAIL_USER'),
            pass: config.get('MAIL_PASSWORD'),
          },
        },
        defaults: {
          from: `"No Reply" <${config.get('MAIL_USER')}>`,
        },
        template: {
          dir: join(__dirname, 'templates'),
          adapter: new HandlebarsAdapter(),
          options: {
            strict: true,
          },
        },
      }),
      inject: [ConfigService],
    }),
  ],
  providers: [MailService],
  exports: [MailService],
})
export class MailModule {}

나만의 메일 서버 구성을 추가하고 Nest를 시작하고 사용자에게 첫 번째 메일 📧을 보낼 시간입니다.