나는 도쿄에서 6년 동안 자유 개발자로 일했다.다른 한편, 나는 줄곧 Inkdrop라는 제품을 개발하고 있다.이것은 다중 플랫폼의 가격 인하 편집기 응용 프로그램이다.나는 줄곧 사용자 인터페이스를 설계하여 백엔드와 프론트를 구축하고 있다.
최근에 나는 나의 정적 사이트를 위해 전자 우편 양식을 만들어야 한다.AWS Lambda를 사용하기로 결정했습니다.본문에서 나는 너에게 내가 어떻게 그것을 구축했는지 알려줄 것이다.본문을 읽지 않고 사용해 보고 싶으면 my repository on GitHub 를 보십시오.

정적 사이트에 서버 측 논리를 추가하는 문제

만약 당신이 Git를 알고 있다면, 위탁 관리 서비스에서 정적 사이트를 무료로 발표할 수 있습니다. 예를 들어 GitHub Pages와Netlify.이 서비스들은 매우 유용하다.
'정적'이란 사이트는 HTML, CSS, 자바스크립트만 사용한다는 뜻이다.PHP와 같은 서버 측 논리가 없습니다.
저는 Netlify에서 제 personal website과product website를 진행했습니다. Netlify는 속도가 빠르고 안정적입니다. 저는 정말 좋아합니다.

그림. Netlify에 배치된 Inkdrop의 내 제품 웹 페이지
정적 사이트는 동적 내용을 생성할 수 없습니다.그들은 이메일을 보내는 등 권한이 필요한 일을 할 수 없다.하지만 때로는 그렇게 하고 싶을 때가 있다.예를 들어, 홈 페이지에 연락처 양식을 추가합니다.
문제는 이 때문에 서버를 배치하는 것은 너무 심하다는 것이다.방문객이 언제 연락을 시도할지 알 수 없을 때, 서버를 계속 실행하는 것은 무의미하다.
정적 사이트에 서버 측 논리를 추가하려면 서버 구조가 없습니다.필요한 경우에만 서버 측 스크립트를 실행할 수 있습니다.
예를 들어 AWS Lambda 함수의 요청 수와 코드 실행 시간에만 비용을 청구합니다.따라서 방문객이 당신에게 연락하기를 기다릴 때 비용을 지불할 필요가 없습니다.

그림A contact form on my homepage(테스트 목적으로 메일을 보내지 마세요)
나는 AWS Lambda를 사용하여 내 홈페이지에 a simple contact form 을 구축했다. (테스트 목적으로 나에게 이메일을 보내지 마십시오.)GitHub에서 시작합니다an example project.이를 사용하여 동일한 API를 구축할 수 있습니다.이것은 AWS Lambda를 사용하기에 좋은 강좌가 될 것이다.

Lambda 기반 이메일 발송 API 구축

그림 API 아키텍처
API를 호출할 때 호출된 함수는 Lambda에서 실행되는 스크립트입니다.노드를 지원합니다.기본적으로 js, C#, Java 및 Python입니다.이 기능은 (단순 전자 메일 서비스) 를 사용하여 전자 메일을 보냅니다.기본적으로 Lambda 함수는 인터넷에서 액세스할 수 없으므로 API 게이트웨이를 사용하여 각 HTTP 노드를 설정해야 합니다.
위의 그림과 같이 웹 사이트에서 API를 호출할 수 있습니다.

아마존 SES Apex를 사용하여 Lambda 함수 관리

AWS에서 Lambda 함수를 관리하는 것은 좀 어렵습니다. 업무 흐름을 간소화함으로써 이 문제를 해결했다.AWS Lambda 기능을 손쉽게 구축, 배포 및 관리할 수 있습니다.
Apex 설치하기

curl https://raw.githubusercontent.com/apex/apex/master/install.sh | sh

Apex는 AWS 인증서가 필요합니다.다음 환경 변수를 통해 지정해야 합니다.

AWS_ACCESS_KEY_ID AWS 계정 액세스 키

AWS_SECRET_ACCESS_KEY AWS 계정 키

AWS_REGION AWS 지역

Apex 구성에 대한 자세한 내용은 Apex 을 참조하십시오.
이제 이 강좌의 저장소를 복제하여 새 Apex 프로젝트를 만듭니다.

git clone [[email protected]](mailto:[email protected]):craftzdog/send-email-lambda.git
cd send-email-lambda
apex init
> Project name: send-email

프로젝트의 이름을 지정합니다send-email.그런 다음 Apex는 프로젝트 이름에 따라 IAM 역할을 설정합니다.프로젝트의 루트 디렉터리project.json를 얻을 수 있습니다.다음과 같이 편집합니다.

{
  "name": "send-email",
  "description": "Simple email transmitter",
  "memory": 128,
  "timeout": 5,
  "environment": {},
  "runtime": "nodejs6.10",
  "role": "<YOUR_IAM_ROLE>"
}

이제 Lambda를 사용할 수 있습니다!

여기 있다 Lambda 함수에서 전자 메일 보내기

Lambda 함수로 전자 메일을 보내려면 AWS SE를 설정해야 합니다.너는 위에 너의 전자 우편 주소를 등록해야 한다.
이 전자 메일 주소 확인 버튼을 눌러 SES에서 확인합니다.

그림 SES에 이메일 주소 등록
AWS에서 확인 이메일을 보내드립니다.링크를 열면 SES와 Lambda를 통해 이메일을 보낼 수 있습니다.

SES를 사용하도록 Lambda 함수 구성

functions/submit/function.json에 파일이 있습니다. "submit"이라는 함수의 설정입니다.이 파일은 다음과 같이 편집됩니다.

{
  "environment": {
    "SES_REGION": "us-west-2",
    "FROM_NAME": "Your Contact Form",
    "FROM_EMAIL": "<YOUR_AUTOMATED_EMAIL_SENDER>",
    "TO_EMAIL": "<EMAIL_TO_RECEIVE>"
  }
}

SES_REGION: SE의 AWS 영역

FROM_NAME: 발송자 이름(예: "연락처 양식"

FROM_EMAIL: 귀하가 받을 이메일 주소입니다.예를 들어,

TO_EMAIL: 이메일을 수신한 이메일 주소입니다.

[email protected] IAM 역할에 권한 추가

Apex 프로젝트의 IAM 역할은 남용을 방지하기 위해 최소한의 권한을 가지고 있습니다.기본적으로 SE에 대한 액세스를 제한합니다.Lambda 함수를 사용할 수 있는 권한을 추가합니다.
IAM 대시보드로 이동하여 Apex에서 만든 IAM 역할을 찾습니다.다음 그림에서 역할의 이름은 contact-form_lambda_function 입니다.역할의 이름은 send-email_lambda_function 이어야 합니다.

역할 정책 만들기 버튼을 눌러 send-email_submit라는 역할 정책을 만듭니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1504526549000",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}

이 정책을 사용하면 Lambda 함수에서 SES를 사용할 수 있습니다.

e-메일 보내기 배포 및 테스트

이제 프로젝트가 전자 메일을 보낼 준비가 되었습니다.그것이 효과가 있는지 시험해 봅시다.다음 명령은lambda 함수를 배치합니다.프로젝트의 루트 디렉터리에서 실행합니다.

apex deploy

그리고 다음 명령을 사용하여 Lambda 함수를 수동으로 실행할 수 있습니다.

echo -n '{ "subject": "hello", "body": "world" }' | apex invoke submit

"안녕하세요"라는 제목과 "세계"라는 제목으로 설정 주소로 보내는 이메일을 받을 것입니다.축하
전자 메일을 받지 못한 경우 다음 명령을 사용하여 로그를 확인합니다.

apex logs -f

오류 메시지를 읽고 IAM 역할 및 AWS 영역이 올바른지 확인합니다.발송자 주소는 SES에 올바르게 등록해야 합니다.

HTTP 및 API 게이트웨이를 통한 호출 가능

지금 우리는 사이트에서 Lambda 함수를 호출하고 싶다. 함수에 대한 HTTP 끝점을 만들 수 있습니다.
Lambda 함수를 호출하는 /submit 방법으로 POST 에 대한 요청을 받아들이도록 설정합니다.

AWS API 게이트웨이 1. API 만들기

API 게이트웨이 콘솔로 이동하여 API 만들기 버튼을 누릅니다.그것을'내 최고의 이메일 보내기api'나 당신이 좋아하는 것으로 명명합시다.

2. 커밋할 끝점 만들기

작업 을 클릭합니다.➜ 자원 만들기 는 자원 부분에서 /submit 자원을 생성합니다.
그런 다음 API 게이트웨이 CORS 활성화 를 선택합니다.

3. POST 방법 만들기

새로운 방법을 정의하고 "작업"을 선택하여 단점 /submit 을 받아들이는 방법 POST➜ 작성 방법.

위에서 설명한 대로 Lambda 함수를 호출하도록 설정합니다.

그림 API 끝 개요

4. 배포 API

작업 을 클릭합니다.➜ API 배포를 위한 API 배포
API가 웹에 공개됩니다.

이제 웹 사이트에서 API를 호출할 수 있습니다.

그림 배포 결과
위와 같이 호출 URL은 API의 입구점입니다.
다음과 같이 curl 명령을 사용하여 명령을 호출할 수 있습니다.

curl --request POST \
  --url [https://******.execute-api.us-west-1.amazonaws.com/production/submit](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit) \
  --header 'content-type: application/json' \
  --data '{
 "subject": "Hello",
 "body": "Hoge"
}'

이메일 받았어요?얘가 일하고 있어!

옵션: 속도 제한

요청의 수를 제한하기 위해 API에 속도 제한을 구성하는 것이 좋습니다.
위 화면에서 [스로틀 사용] 확인란을 클릭하고 [속도] 에 대해 1 또는 2 개의 값을 지정합니다.

웹 사이트와 통합

이제 AJAX로 호출할 수 있는 API가 생겼습니다.
다음은 호출 방법의 예입니다.

export default function sendEmail (subject, body) {
  return fetch('[https://******.execute-api.us-west-1.amazonaws.com/production/submit'](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit'), {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ subject, body })
  })
}

현재 자바스크립트로 폼을 만들고 제출할 때 이 함수를 호출하는 것입니다.

API 가져오기 동적 내용을 추가할 서버가 항상 필요하지 않음

Lambda는 동적 접촉 형식을 쉽게 추가할 수 있습니다.이것은 회사와 상점을 위한 간단한 홈페이지를 구축하는 데 매우 유용하다.
서버 구조가 없으면 동적 내용을 생성하는 사이트를 구축할 수 있습니다.그리고 돈 많이 안 써도 돼요.예를 들어 S3와 Lambda를 사용하여 주석 양식을 구성할 수 있습니다.이건 너무 강해.
읽어주셔서 감사합니다.나는 에서 제품 개발과 자유직업에 종사한 경험을 공유하고 있다.마음에 드신다면 그 중의 핫한 이야기를 보십시오.

my blog

How to Price Yourself as a Freelance Developer

How I Built a Markdown Editor Earning \$1300/mo Profit — Inkdrop

연락을 유지하기 위해 따라라!
VSCode-like environment with vim + tmux