Nestjs EjsAdaptor email template 만들기

회사에서 인증 로직을 구현하던 중, 회원가입 이메일 confirm 확인 메일과 비밀번호 변경 확인 메일 등 여러가지 메일들을 보내야 해서 EjsAdapter + nestjs mailer module 을 써서 템플릿을 만들어 놓고 mail service 함수를 재사용하였다.

기존 코드

import { MailerModule } from '@nestjs-modules/mailer';
import { EjsAdapter } from '@nestjs-modules/mailer/dist/adapters/ejs.adapter';
import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    MailerModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: (configService: ConfigService) => ({
        transport: {
          host: 'smtp.gmail.com',
          port: 587,
          secure: false,
          auth: {
            user: configService.get<string>('SMTP_AUTH_USER'),
            pass: configService.get<string>('SMTP_AUTH_PW'),
          },
        },
        defaults: {
          from: process.env.SUPPORT_EMAIL,
        },
        template: {
          dir: `${path.resolve(__dirname, '../../templates')}`,
          adapter: new EjsAdapter(),
          options: {
            strict: true,
          },
        },
      }),
    }),
  ],
})
export class MailModule {}

리팩토링 전)

이렇게 mail Module 을 만들어놓고, 이메일을 보내야 하는 서비스 함수에서 아래처럼 mailerService.sendMail 을 호출했었다. (mailerService 는 nestjs mailer 모듈에서 제공)

await this.mailerService
      .sendMail({
        to: email,
        from: this.configService.get<string>('SMTP_AUTH_USER'),
        subject: 'Sign Up',
        text: 'welcome',
        html: `
        <div style="text-align: center; padding: 20px">
          <h3>Email Verification</h3>
          <p>
          Please click the button below to confirm your email 
          and finish setting up your account. 
          This link is valid for <span style="color: red; font-weight: bold">24 hours</span></p>

          <a role="button"
            style="
            border: 1px solid;
            border-radius: 17px;
            padding: 10px;
            color: black;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 15px;
            "  
            href="${signUpLink}"
          >
            Confirm
          </a>
          </div>
          `,
      })

이후에 비밀번호 재설정 컨펌 이메일 작업을 하려다보니 중복 코드가 발생할 것 같아

리팩토링해서 sendMail 함수로 바꿔서 앞으로 메일들이 추가되어도 재사용할 수 있도록 했다.

최종 코드

const signUplogic = async (signUpRequestDto: SignUpRequestDto): Promise<void> => {
    // do business logic...

    await this.mailerService
      .sendMail({
        to: email,
        from: this.configService.get<string>('SMTP_AUTH_USER'),
        subject: 'Sign Up',
        template: 'sign-up-confirm'
      })
}

const resetPassword = async (resetPasswordDto: ResetPasswordDto): Promise<void> => {
    // do business logic..

    await this.mailerService
        .sendMail({
        to: email,
        from: this.configService.get<string>('SMTP_AUTH_USER'),
        subject: 'Reset your password',
        template: 'reset-password-confirm'
      })
}

// create root/templates/sign-up-confirm.ejs
// create root/templates/reset-password-confirm.ejs

설정 뜯어보기

// mailModule
template: {
          dir: `${path.resolve(__dirname, '../../templates')}`,
          adapter: new EjsAdapter(),
          options: {
            strict: true,
          },
        },

nest-cli.json 에는 compiler option 을 줄 수 있다.

  "compilerOptions": {
    "assets": ["**/*.ejs"],
    "watchAssets": true
  },

nest-cli.json 에 위 코드를 추가하고, 로컬 서버를 한 번 껐다가 다시 시작하면 dist 폴더에 templates 폴더가 잘 생성됨을 확인할 수 있다.

잘 생성된 dist

Q. yarn start:local 을 했는데 __dirname 이 dist/src/mail/templates 로 되어 있어 못 찾고 있다. 메일 템플릿들은 dist/templates 에 위치한다. 어떻게 바꿀 수 있을까?

위 코드에서는

// MailModule
template: {
          dir: `${path.resolve(__dirname, '../../templates')}`,
          adapter: new EjsAdapter(),
          options: {
            strict: true,
          },
        },

이렇게 되어 있지만 원래는 dir: ${__dirname}/templates 로 되어 있었다.

이렇게 했을 때 __dirname 이 dist/src/mail/templates 로 되는 문제가 있어서 path module 의 resolve 메소드를 써서 해결하였다.

Q. ejs 파일에 변수를 어떻게 넘기나? mailer module 의 context 옵션 을 사용하면 된다. template options 에 strict 모드를 꺼주거나, 켜야 한다면 변수 앞에 locals 를 붙여준다.

template: {
          dir: `${__dirname}/templates`,
          adapter: new EjsAdapter(),
          options: {
            strict: true,
          },
        },

href="<%=locals.signUpLink}"%>

nestjs request dto and response dto

nestjs env variable troubleshooting

TypeORM soft delete on cascade

tyepORM entity에서 비밀번호 hash 하기