NodeEmailer 및 Netlify 기능을 사용하여 서버 없는 ReactJS 연락처 양식 구축 및 배포

ReactJS는 클라이언트 JavaScript 프레임워크입니다.따라서 대량의 고객을 대상으로 하는 기능으로 미관적인 연락처 폼을 구축할 수 있지만, 전자메일을 보내거나 데이터베이스에 항목을 추가하는 등 백엔드 기능이 필요한 다른 곳을 찾아야 합니다.이것은 제가 본고에서 제기한 도전입니다. - ReactJS 연락처 폼을 어떻게 구축하고 배치하는지, 제출할 때 이메일을 보냅니다.
우리의 도구 상자는 다음과 같습니다.

ReactJS(분명)

Axios(발표 데이터)

NodeEmailer(SMTP를 통한 이메일 발송용 Node.js 패키지)

Netlify(배포용)

우리는 전단 폼에서 데이터를 포착하여 백엔드 URL에 발표할 것이다.우리는 우리의 백엔드로서 우리가 발표한 폼 데이터를 사용하고 Nodemailer 데이터를 전자메일로 수신자에게 보내는 Netlify 기능을 구축할 것이다.
이것은 듣기에 매우 간단하다.

우리 시작합시다...

프런트 엔드

우선 ReactJS를 사용하여 프런트엔드를 구축합니다.설정을 위해 터미널 창에서 실행됩니다 npx create-react-app contact-form.이것은 우리가 수정할 표준 ReactJS 응용 프로그램을 제공합니다.그리고 우리는 기다린다...
...react 프로그램을 설치한 후, 우리는 npm start 브라우저에서 이 프로그램을 실행합니다.우리는 src/App.js 태그 사이의 모든 내용을 열고 삭제합니다. 따라서 우리의 파일은 다음과 같습니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

네가 이렇게 할 때 벗어난다<header>.아, 지금 우리는 공백 화포가 하나 생겼다😌.
현재 import logo from './logo.svg' 디렉터리에 새 파일을 만듭니다.이것은 우리의 연락처 모듈이 될 것이다.나는 나를 불러줄 것이다src, 너는 네가 원하는 모든 것을 불러도 된다.React 모듈의 기본 구조는 다음과 같습니다.

import React from 'react'

export default function FunctionName() {
    return (
        ...
    )
}

그래서 우리는 연락 형식의 구조를 구축하는 것부터 시작할 수 있다.나는 material-us를 사용하지만, 마찬가지로 당신이 선택한 CSS 프레임워크를 사용할 수 있습니다.중요한 것은 네가 표를 가지고 있다는 것이다.

import React from 'react'
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button"
import FormControl from "@material-ui/core/FormControl"

export default function Form() {

    return (
        <>

            <FormControl fullWidth={true}>
                <TextField required label="Full name" variant="filled" id="full-name" name="name" className="form-field" />
            </FormControl>
            <FormControl fullWidth={true}>
                <TextField required label="Email" id="email" name="email" variant="filled" className="form-field" onChange />
            </FormControl>
            <FormControl fullWidth={true}>
                <TextField required label="Message" variant="filled" name="message" multiline={true} rows="10" />
            </FormControl>
            <FormControl>
                <div style={{padding: 20}}>
                    <Grid container spacing={2}>
                            <div className="form-submit">
                                <Button variant="contained" color="primary">Submit</Button>
                            </div>
                        </Grid>
                    </Grid>
                </div>
            </FormControl>
    )
}

현재 우리는 contact-form.js 에서 연락처 폼을 가져올 수 있다.다음과 같이 수정했습니다App.js.

import React from 'react';
import logo from './logo.svg';
import Form from './contactform'
import './App.css';

function App() {
  return (
    <div className="App">
      <Form />
    </div>
  );
}

export default App;

양식 데이터 캡처

우리는 약간의 보충을 해야 한다.우선, 우리는 표 데이터를 포착해야 한다.react hooks를 사용하는 것보다 더 좋은 방법은 무엇입니까? 구체적으로 말하자면, 우리는 App.js 실시간으로 데이터를 추적하고 업데이트하는'상태'를 사용할 것입니다.useState 연결을 포함하여 contactform.js 의 첫 번째 행을 수정합니다.

import React, { useState } from 'react'

다음은 우리 실례화 useState 변수입니다.변수는 두 가지useState입니다. 첫 번째 항목은 추적 중인 상태이고, 두 번째 항목은 이 상태를 업데이트하는 함수입니다.

export default function Form() {
    const [data, setData] = useState()

    return (
        ...
    )
}

양식에서 여러 필드를 캡처해야 하므로 array 를 data 로 설정합니다.

export default function Form() {
    const [data, setData] = useState({name: '', email: '', message: '', sent: false, buttonText: 'Submit', err: ''})

    return (
        ...
    )
}

보시다시피 object notation 에서useState의 초기 값을 설정하기만 하면 됩니다.요청의 상태를 추적하고 사용자에게 피드백을 제공하는 실용 프로그램 항목도 설정했습니다. 즉, object, sent, buttonText 입니다.나중에 더 많은 정보를 소개할 것입니다.
현재 우리는 err 대상을 업데이트하는 방법이 필요하다.Easy peasy - 양식 필드의 변경 사항을 추적하는 함수를 설정했습니다.

...

const [data, setData] = useState({name: '', email: '', message: '', sent: false, buttonText: 'Submit', err: ''})

const handleChange = (e) => {
    const {name, value} = e.target
        setData({
            ...data,
            [name]: value
    })
}

...

말 그대로 사용자가 폼 필드를 변경할 때마다 (즉 폼 필드를 작성) 이 함수를 호출합니다.이 함수는 대상 파괴를 사용하여 변경 중인 폼 필드의 data 및 name 속성을 가져오고 value 대상의 해당 값을 업데이트합니다.
사용자가 입력할 때 이 함수를 호출할 수 있도록 폼 필드의 data 및 onChange 속성을 업데이트하는 것이 가장 중요합니다.

<FormControl fullWidth={true}>
    <TextField required label="Full name" variant="filled" id="full-name" name="name" className="form-field" value={data.name} onChange={handleChange} />
</FormControl>
<FormControl fullWidth={true}>
     <TextField required label="Email" id="email" name="email" variant="filled" className="form-field" value={data.email} onChange={handleChange} />
</FormControl>
<FormControl fullWidth={true}>
     <TextField required label="Message" variant="filled" name="message" multiline={true} rows="10" value={data.message} onChange={handleChange} />
</FormControl>
<FormControl>
    <div className="form-submit">
        <Button variant="contained" color="primary">Submit</Button>
    </div>
</FormControl>

양식 제출 처리

우리는 폼 제출을 처리하기 위해 함수를 설정해야 한다. 우리는 그것을 호출할 것이다

const formSubmit = (e) => {
    e.preventDefault()
} 

우리는 양식이 사용자를 백엔드 URL로 다시 지정하는 것을 막기 위해 value 함수를 사용합니다. 이것은 기본 동작입니다.
옛날에 내가 백엔드 URL에 preventDefault 데이터가 필요하다고 말했던 거 기억나?이것이 바로 Axios의 용무지이다. 이것은 약속을 바탕으로 하는 http 클라이언트로 우리의 수요를 완벽하게 만족시킬 것이다.실행post을 통해 가져오면 설치 후 제출 기능을 완료할 수 있습니다.

const formSubmit = (e) => {
        e.preventDefault();

        setData({
            ...data,
            buttonText: 'Sending...'
        })

        axios.post('/api/sendmail', data)
        .then(res => {
            if(res.data.result !=='success') {
                setData({
                    ...data,
                    buttonText: 'Failed to send',
                    sent: false,
                    err: 'fail'
                })
                setTimeout(() => {
                    resetForm()
                }, 6000)
            } else {
                setData({
                    ...data,
                    sent: true,
                    buttonText: 'Sent',
                    err: 'success'
                })
                setTimeout(() => {
                    resetForm();
                }, 6000)
            }
        }).catch( (err) => {
            //console.log(err.response.status)
            setData({
                ...data,
                buttonText: 'Failed to send',
                err: 'fail'
            })
        })
    }

우리 이 함수의 작용을 좀 봅시다.폼의 기본 동작을 막으면 폼은 npm i axios 대상의 buttonText 항목을'발송...'으로 설정합니다.제출 단추의 텍스트를 변경하고 사용자에게 피드백을 주기 위해 사용할 것입니다.
다음은 함수performs와 data 요청 URLaxios.post, 이 URL을 구축할 때 URL은 Netlify 함수를 호출합니다.응답이'성공'이 아니라면 단추 텍스트가'발송 실패'로 바뀌고, 저희 유틸리티 항목 api/sendmail 은 나중에 사용할 수 있도록'실패'로 설정됩니다.그런 다음 테이블은 6초 후에 err 기능을 사용하여 재설정됩니다.
응답이 성공이면 버튼 텍스트가 전송됨으로 변경되고 setTimeout 항목이 성공으로 변경됩니다.그리고 우리는 err 자문에서 요청과 관련된 모든 오류를 같은 방식으로 처리한다.
우리가 catch 함수를 인용했다는 것을 알 수 있습니다.이것은 다음과 같습니다.

    const resetForm = () => {
        setData({
            name: '',
            email: '',
            message: '',
            sent: false,
            buttonText: 'Submit',
            err: ''
        });
    }

이 함수는 resetForm 객체를 원래 상태로 되돌리는 데 사용됩니다.
그리고 우리는 단추의 data 와 값 속성을 바꾸어 onClick 함수를 호출하고 단추 텍스트를 업데이트하기만 하면 된다.

<Button variant="contained" color="primary" onClick={formSubmit}>{data.buttonText}</Button>

Netlify 함수

Netlify functions API를 작성하여 애플리케이션에 서버 측 기능을 제공할 수 있습니다.우리의 예에서, 우리는 함수를 작성하여 우리의 handleSubmit 대상을 data 요청으로 하고, post 을 사용하여 수신자에게 이메일을 보낼 것이다.
첫 번째 권장 사항은 Netlify CLI를 설치하기 위해 실행nodemailer을 수행하는 것입니다.이것은 우리가 우리의 상태를 테스트하는 데 도움을 줄 것이다.그리고 프로젝트 루트 디렉터리에 npm install netlify-cli -g 라는 디렉터리를 만듭니다. (함수라고 할 필요는 없습니다.)functions 폴더에 functions 라는 파일을 만듭니다.뭘 알아차렸어요?우리의 sendmail.js 요청은 axios.post에 발표되었습니다. - 이것은 매우 중요합니다. 발표 위치와 함수 파일 이름은 반드시 같아야 합니다.
이로써 Netlify CLI는 이미 설치되어 있어야 하기 때문에 NodeEmailer의 사본을 얻었습니다. 이것은 무료 노드입니다.그들의 말로는 js 모듈이 전자메일을 쉽게 보낼 수 있도록 허용한다.모든 사람은 케이크를 좋아한다.실행api/sendmail.
설치 과정에서 우리는 npm install nodemailer 파일에 들어가서 다음 코드를 추가합니다.

const nodemailer = require('nodemailer');

exports.handler = function(event, context, callback) {

    let data = JSON.parse(event.body)

    let transporter = nodemailer.createTransport({
        host:[YOUR SMTP SERVER],
        port:[YOUR SMTP SERVER PORT],
        auth:{
         user:[YOUR SMTP SERVER USERNAME],
         pass: [YOUR SMTP SERVER PASSWORD]
    }
    });

    transporter.sendMail({
        from: [YOUR SMTP SERVER EMAIL ADDRESS],
        to: [RECIPIENT EMAIL ADDRESS],
        subject: `Sending with React, Nodemailer and Netlify`,
        html: `
            <h3>Email from ${data.name} ${data.email}<h3>
            <p>${data.message}<p>
            `
    }, function(error, info) {
        if (error) {
            callback(error);
        } else {
            callback(null, {
            statusCode: 200,
            body: JSON.stringify({
                   'result': 'success'
                })
        });
        }
    });
}

나는 네가 이 함수에게 무엇을 하라고 묻는 것을 들었다.Netlify 함수는 모두 같은 방식으로 설정됩니다 documented extensively.요컨대, 그들은 sendmail.js 방법을 내보내고 handler, event, context 파라미터를 얻는다.우리의 예에서 우리는 callback과event 파라미터를 사용하는데 그것들은 callback과request의 등가물이다.
우선 함수 해석 요청response 대상입니다.다음은 우리가 사용하고 있는 SMTP 전송과 관련된 데이터를 저장하는 변수data를 설명하고 설정합니다.NodeEmailer는 선택한 SMTP에서 전송하는 SMTP 서버, 포트 및 인증 정보가 필요합니다.나는 Zoho mail를 사용했다. 이것은 무료이지만, 너는 모든 공급자 (Hotmail, Outlook 등) 를 사용할 수 있다.당신은 Gmail을 사용할 수 있습니다. 이것은 유행하는 선택인 것 같지만 documented issues with using Gmail 이 있기 때문에 다른 공급업체를 사용하고 싶을 수도 있습니다.
더 많은 정보nodemailer SMTP transport here를 읽을 수 있습니다.목록이 있습니다well-known SMTP services that work with nodemailer here.
반환 함수.transporter 변수를 설정하면 transporter 메시지를 구성하고 전자 메일을 보냅니다.

리디렉션 설정

우리는 그것을 시작하고 운행하기 위해 마지막 몇 시를 해야 한다.우선, 프로젝트 루트 디렉터리에 transporter.sendMail(data[, callback]) 파일을 만들어야 합니다.이 파일을 통해 구축 설정이 무엇인지, 함수의 위치를 알 수 있습니다.netlify.toml 파일에는 다음과 같은 두 가지 주요 구성이 추가되었습니다.

[build]
    functions = "functions"
[[redirects]]
    from = "/api/*"
    to = "/.netlify/functions/:splat"
    status = 200

첫 번째는build 명령입니다. Netlify에 우리의 함수가 netlify.toml 디렉터리에 있음을 알려 줍니다.이해하기 쉽다
두 번째는 Netlify가 functions 디렉터리에 발표할 모든 내용을 /api/* 디렉터리로 다시 정할 수 있도록 하는 함수입니다./.netlify/functions/ 키워드는 Netlify가 별표(*) 뒤에 있는 모든 내용을 알려주기 때문에 :splat에 발표된 모든 내용은 /api/sendmail/로 바뀌고, 룩/.netlify/functions/sendmail은 바로 우리 함수 파일의 이름입니다.따라서 우리가 발표한 데이터는 예상대로 우리의 함수에서 끝날 것이다.You can read more about Netlify redirects here

테스트 배포

Netlify CLI가 설치되어 있으므로 터미널 실행sendmail을 통해 양식을 쉽게 테스트할 수 있습니다.이것은 우리 연락처의 로컬 복사본을 실행할 것입니다.

결론

나는 표에 기본적인 검증과 netlify dev을 추가했다.this repo 에서 모든 코드를 볼 수 있습니다.Netlify 함수에 대해 this repo 의 코드를 수정했습니다.여기에는 Netlify 함수 예시 코드 세그먼트도 많이 있습니다.
표지 사진 신용장: 사진 작가Brett Jordan우Unsplash