나의 투자조합은 My Portfolio이다.하루하루 누군가가 연락처를 통해 나에게 메시지를 보냈다.
처음에 저는 이메일 JS를 사용하여 gmail에 메일을 보내는 일을 처리하여 마음의 평온을 얻었습니다.그러나 이들의 무료 등급은 매우 낮아 매달 200개의 요청만 허용된다.그래서 저는 제 서버를 만들고 gmail에 메일을 보내기로 했습니다. 이렇게 하면 제가 그것을 더욱 유연하게 제어할 수 있습니다.
이것도nodemailer를 사용하여 gmail에 메일을 보내는 지침입니다.NoEmailer를 사용하여 gmail과 함께 사용하기 전에 많은 문제를 해결해야 합니다.나는 이 지침이 너를 도울 수 있기를 바란다. (만약 내가 장래에 필요하다면 나 자신도 도울 수 있을 것이다.)😉 ).

1/ 패키지 설치 및basic express 응용 프로그램 설정

먼저 npm init을 만들고 기본 설정을 해야 합니다
서버가 올바르게 작동하려면 몇 개의 소프트웨어 패키지가 필요합니다.

npm install express nodemailer nodemailer-smtp-transport dotenv cors

및

npm install --save-dev nodemon

너의 소포.제이슨은 지금 이렇게 해야 한다.

{
  "name": "my-portfolio-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon ./index.js",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "nodemailer": "^6.7.2",
    "nodemailer-smtp-transport": "^2.7.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

나는 왜 우리가 그것들을 필요로 하는지 설명할 것이다.

cors: 귀하가 사이트에서 이 서버에 요청을 보낼 때 cors

dotenv: 서버

에서 환경 변수 사용

express: 퀵 어플리케이션 설정

nodemailer와 nodemailer smtp 전송: gmail

으로 메일 보내기

nodemon: 로컬 서버 어플리케이션 라이브 테스트

2/로컬 구성 설정:

현재 .env 파일과 .gitignore 파일을 만들어야 합니다.
우리 먼저 git으로 가자.너는 git init을 만들고 현재의 프로젝트를 기존의 지점으로 미루어야 할지도 모른다. (내 예는 Github이다.) 그러면 나중에 너는 그것을 Heroku에 배치할 수 있다. (나는 Heroku를 사용했지만, 만약 네가 배치 절차를 뛰어넘고 싶지 않다면 스스로 해라.).env 파일에서 다음을 확인합니다.

MY_GMAIL={Your Gmail here}
MY_GMAIL_PASSWORD={Your Gmail Password}

그리고 .gitignore에서는 다음과 같이 표시되는지 확인합니다.

.env
node_modules/

자격 증명을 Github에 전송하여 공개하고 싶지 않습니다.그래서 이것이 바로 우리가 .gitignore을 필요로 하는 이유입니다. 우리도 나중에 그것을 사용하여nodemailer로 메일을 보낼 수 있도록 당신의 gmail 증빙서류가 필요합니다.

3/nodemailer가 정상적으로 작동하도록 gmail 계정을 설정합니다.

Gmail 계정에 로그인하고 이것을 클릭하세요

귀하는 gmail 계정 https://accounts.google.com/b/0/DisplayUnlockCaptcha에 less secure app access과 display unlock captcha을 활성화해야 합니다
그리고 너는 반드시 https://support.google.com/accounts/answer/185833?hl=en에서 이 6단계에 따라 비밀번호를 얻어야 한다. 너는 그것을 .env 파일에 넣을 수 있다. 그렇지 않으면 이것은 작용하지 않을 것이다
나는 이것이 긴 과정이라는 것을 안다.그러나 나를 믿어라. 나는 반드시 나의 문제와 답안을 자세히 연구하고 그것을 너에게 남겨야만 네가 마음을 가라앉힐 수 있다.NodeEmailer는 Gmail과 잘 어울리지 않지만, 일단 설정하면 평생 사용할 수 있다.
현재 gmail 설정과 로컬 설정을 설정했습니다.우리는 서버를 쓰기 시작할 수 있다.

4 / 서버 구축

나는 단지 그것들을 여기에 버리고 싶을 뿐이다. 왜냐하면 그것들은 단지 하나의 파일과 하나의 단점만 있기 때문이다.

const express = require('express')
const nodemailer = require('nodemailer');
const smtpTransport = require('nodemailer-smtp-transport');
const cors = require('cors');

// This makes .env file work
require('dotenv').config();

// Env Variables
// You may not see 'PORT' mentioned in .env file above because this is used for HEROKU deployment only
const PORT = process.env.PORT;
const MY_GMAIL = process.env.MY_GMAIL;
const MY_GMAIL_PASSWORD = process.env.MY_GMAIL_PASSWORD;

const app = express()
const port =  PORT || 5000;

// You need this so when you send a request from frontend with a different url like https://tranminhtri.com it won't throw CORS errors
app.use(cors());

// You can choose different endpoint like /email, /mail or anything
app.post('/sendMessage', (req, res) => {
    // I used `name`, `email`, `message` for my Form so I extract them here, feel free to expand them as you need
    const { name, email, message } = req.query;

    const transporter = nodemailer.createTransport(smtpTransport({
        service: 'gmail',
        host: 'smtp.gmail.com',
        auth: {
          user: MY_GMAIL,
          pass: MY_GMAIL_PASSWORD
        }
    }));

    const mailOptions = {
        from: email,
        to: MY_GMAIL,
        subject: `A Message from ${email} (My Portfolio)`,
        text: `
        Email: ${email}

        Name: ${name}

        Message: ${message}
        `
    };
      transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
          console.log(error);
        } else {
          console.log('Email sent: ' + info.response);
        }
      });

    res.status(200).send('Send email successfully');
});

app.listen(port, () => {
  console.log(`Example app listening at ${port}`)
})

이 파일은 가방에서 말한 바와 같이 나중에 배치할 수 있도록 index.js으로 명명해야 한다.제이슨도 nodemon ./index.js.
파일 구조는 다음과 같습니다.

이 배후의 생각은 간단하고 내장되며 단점입니다. 전방에서 온 모든 데이터를 받아들여nodemailer에 전달하여 gmail로 방향을 정할 수 있도록 합니다.transporter, mailOptions, transporter.sendMail의 전체 부분은 문법일 뿐입니다. 따라서 더 많은 것을 알고 싶으면 https://nodemailer.com/usage/과 https://nodemailer.com/message/을 방문하세요.
코드를 한 줄 한 줄 비교하려면 전체 서버의 원본 코드가 여기에 있습니다: https://github.com/Tris-909/My-Portfolio-Server

5 / 로컬 테스트:

너는 뛸 수 있다

npm start

너의 현지의 발전을 시작하다
다음 화면 캡처와 같은 post로 단점을 클릭하라고 요청하면 gmail 계정에 메일을 보내야 합니다.

지금은 현지의 모든 것이 정상이다.당신은 그것을 배치한 후에 그것을 당신의 사이트와 통합할 수 있습니다.

6/Heroku 배포(옵션):

플랫폼마다 응용 프로그램이나 서버를 배치하는 방식이 다르다.내가 Heroku를 사용하는 것은 빠르고 간단하며 무료이기 때문이다.하지만 만약 당신이 다른 플랫폼을 사용한다면 나는 정말 당신을 도울 수 없습니다. 당신은 반드시 스스로 해결해야 합니다.
이것은 몇 가지 절차가 필요하고 실수하기 쉬우므로 나는 네가 견지해 나갈 수 있기를 바란다. (배치는 항상 고통스럽다)🙂 )

단계 1:heroku 계정을 얻지 못하면 자신의 계정을 만드십시오

단계 2: node -v을 실행하여 현재 노드 환경의 버전을 가져오고 가방에 추가합니다.json:

  "engines": {
    "node": "16.13.0"
  }

제 것은 16.13.0입니다. 그래서 거기에 놓았습니다.

3단계: scripts 내부 포장 변경Heroku가 작업하는 json:

  "scripts": {
    "start": "node ./index.js",
    "dev": "nodemon ./index.js"
  },

Heroku는 화면 뒤에서 npm start을 실행하여 배치합니다. 따라서 개발 스크립트를 위와 같은 다른 위치로 이동해야 합니다.

단계 4: Heroku CLI를 설치하고 명령줄을 통해 응용 프로그램을 만듭니다. Heroku

에서 응용 프로그램을 만들기 전에 https://devcenter.heroku.com/articles/heroku-cli을 따라야 합니다.
지금 만약 네가 Heroku dashboard에 가면 너의 응용 프로그램이 이렇다는 것을 볼 수 있을 것이다. 나는 obscure-brook-87266이다

지금 항목을 클릭하고 Deploy 옵션에 들어가서 응용 프로그램을 Github 계정에 연결합니다. (이것이 바로 내가 시작할 때 제출하고 Github로 전송해야 하는 이유입니다.) 그리고 deploy을 누르고 Settings 옵션에 들어가고 Reveal Config Vars을 누르면 .env 파일과 같은 환경 변수를 추가해야 합니다.
이후 Deploy으로 이동해서 Manual Deploy을 클릭하여 응용 프로그램을 기다리세요.이렇게너 망했어.
POSTMAN을 사용하여 테스트를 다시 시도하지만, URL을 Heroku에서 제공하는 새 URL으로 바꿉니다.
만약 네가 모든 지침을 지금까지 따랐다면, 모든 것이 예상대로 진행되어야 한다.이것은 나에게 있어서 순조로운 과정이 아니다. 나는 반드시 대량의 Stack Overflow 문제와 답안을 읽어서 이 모든 것을 해결해야 하지만, 나는 이것이 어떤 방면에서 너를 도울 수 있기를 바란다.
안녕히 계세요.😙