Amazon S3 정적 웹사이트에 문의 폼 추가하기

S3 웹사이트 엔드포인트는 폼 POST에 405 MethodNotAllowed로 응답하므로, 대신 폼의 action을 Ikiform 엔드포인트로 지정하세요. 엔드포인트가 일반 http:이므로 그곳으로 돌아가는 _redirect는 따르지 않습니다. 폼 설정에서 Redirect after submit을 설정하거나, https:를 위해 앞단에 CloudFront를 두세요. 버킷의 REST 엔드포인트 앞에 CloudFront를 두는 경우, 기본 루트 객체는 루트에만 적용되므로 thanks.html 같은 전체 파일 이름으로 리디렉션하세요.

S3에서 다른 점

정적 웹사이트 호스팅으로 구성한 버킷에는 http://www.example.com.s3-website-us-east-1.amazonaws.com 같은 자체 웹사이트 엔드포인트가 생깁니다. AWS 문서에 따르면 객체에 대한 GET과 HEAD 요청만 지원합니다. 폼 POST는 HTML 오류 페이지를 받습니다.

<html>
<head><title>405 Method Not Allowed</title></head>
<body>
<h1>405 Method Not Allowed</h1>
<ul>
<li>Code: MethodNotAllowed</li>
<li>Message: The specified method is not allowed against this resource.</li>
<li>Method: POST</li>
<li>ResourceType: OBJECT</li>

S3의 특성 세 가지가 더 문의 폼에 영향을 줍니다.

https: 사이트라면 AWS는 CloudFront 위에서 실행되는 Amplify Hosting이나, 버킷 앞에 CloudFront를 두는 방식을 권합니다. 폼은 어느 쪽이든 작동합니다. 달라지는 것은 방문자가 전송 후 도착하는 곳입니다.

어떤 CloudFront 오리진을 쓸까

CloudFront는 두 가지 방식으로 버킷을 읽을 수 있으며, 무엇을 고르느냐에 따라 감사 URL의 형태가 정해집니다.

전체 파일 이름은 두 방식 모두에서 작동하므로 예제에서는 이를 씁니다. CloudFront를 직접 운영하고 싶지 않다면 Amplify Hosting이 https:와 관리형 CDN으로 버킷에서 배포할 수 있으며, 이 경우에도 폼은 바꿀 필요가 없습니다.

폼

S3 사이트는 회사 사이트인 경우가 많으므로, 이 폼은 업무용 이메일과 회사 이름을 묻습니다. thanks.html 옆에 contact.html로 업로드하세요.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" />

  <label for="message">How can we help?</label>
  <textarea id="message" name="message" rows="6" minlength="10" required></textarea>

  <input type="hidden" name="_redirect" value="https://www.example.com/thanks.html" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send</button>
</form>

• _redirect는 파일 이름과 함께 CloudFront 도메인을 가리킵니다. www.example.com 또는 example.com이 Allowed domains에 있을 때만 따릅니다.
• 맨 http: 엔드포인트에서는 _redirect 입력을 지우고 대신 Redirect after submit을 감사 페이지로 설정하세요. 이 설정은 여러분의 팀만 바꿀 수 있으므로 http: URL도 받습니다.
• 필드 이름은 email로 유지하세요. 알림 이메일이 이를 회신 주소로 사용합니다.

회사 사이트에서는 보통 여러 사람이 문의 받은편지함을 읽습니다. 폼에 확인된 알림 수신자를 최대 10명까지 추가하세요. 각자 메시지를 받고, Reply를 누른 사람이 보낸 사람에게 바로 답합니다. 메시지가 공유 채널이나 티켓 대기열에도 가야 한다면 서명된 웹훅을 추가하고 Zapier나 여러분의 코드로 라우팅하세요. company 필드는 일반 텍스트로 도착하므로 어느 곳에서든 바로 필터링할 수 있습니다.

업로드하기 전에 Allowed domains에 localhost를 넣고 로컬 서버에서 페이지를 테스트하세요. localhost에서 보낸 POST는 테스트로 집계되므로, 버킷이 폼을 제공하기 전에 폼을 완성할 수 있습니다.

폴더를 버킷에 동기화하고, 새 폼이 바로 제공되도록 CloudFront에서 페이지를 무효화하세요.

aws s3 sync ./site s3://www.example.com --delete

aws cloudfront create-invalidation --distribution-id E1EXAMPLE --paths "/contact.html" "/thanks.html"

AWS 호스트의 허용 도메인

amazonaws.com, 리전별 s3-website 접미사, cloudfront.net만 단독으로 추가하지 마세요. 전 세계의 모든 버킷이나 배포가 일치하게 됩니다. AWS가 S3 웹사이트 엔드포인트 도메인을 Public Suffix List에 등록한 것도 같은 이유입니다. 버킷 하나하나가 별개의 사이트입니다.

CloudFront를 통한 헤더

S3 객체 메타데이터로는 Content-Security-Policy를 설정할 수 없으므로, CloudFront 응답 헤더 정책에서 설정하고 배포의 기본 캐시 동작에 연결하세요. 헤더 값은 1,783자로 제한됩니다.

{
  "Name": "site-csp",
  "SecurityHeadersConfig": {
    "ContentSecurityPolicy": {
      "Override": true,
      "ContentSecurityPolicy": "default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
    }
  }
}

aws cloudfront create-response-headers-policy --response-headers-policy-config file://csp-policy.json

작동 확인하기

1. 위 표의 도메인을 추가하고, 테스트하는 동안에는 localhost도 추가하세요.
2. CloudFront 도메인에서 제출하세요. 여러분의 도메인에 있는 thanks.html에 도착해야 합니다.
3. 맨 웹사이트 엔드포인트도 공개해 둔다면, 거기서도 제출해 Redirect after submit에 설정한 페이지로 가는지 확인하세요.
4. 대시보드에서 Submissions를 여세요. 보낸 모든 필드가 담긴 새 제출이 있습니다.
5. 알림 수신자마다 받은편지함을 확인하세요. 각자 필드가 담긴 이메일을 받고, 폼에 email 필드가 있으면 Reply가 제출한 사람에게 갑니다.
6. 아무것도 오지 않았나요? 대시보드의 상태 필터를 Spam으로 바꿔 보세요. 스팸은 실제 제출과 같은 성공 응답을 받습니다.

주의할 점

질문