静的サイトホスティングサービスが増えていますが、その中でも最近人気なのがVercelです。多種多様なフロントエンドフレームワークと連携する仕組みが用意されています。NetlifyやFirebase Hostingと比較している方も多いでしょう。しかし、Webサイトは静的な情報だけでは物足りないものです。たとえばお問い合わせフォームなど、動的な要素も組み込みたくなるでしょう。
VercelにはFunctionsというサーバサイドでコードを実行できる機能が用意されています。今回はその機能を使ってお問い合わせフォームを作ってみました。
Hosting側の設定
まずVercelにて、HTMLでお問い合わせフォームを作ります。
次にフォームを送信した際の処理として、APIを呼び出します。/api/ に入れるのが規定となっています。今回はJavaScript(Node.js)ですが、RubyやPythonなども使えます。
const d = document.querySelector;
await fetch('/api/contact.js', {
method: 'post',
body: JSON.stringify({
email: d('#email').value,
name: d('#name').value,
body: d('#body').value。
}),
headers: {
'Content-Type': 'application/json'
}
});
alert('お問い合わせありがとうございます');
Functionsの設定
プロジェクトのルートで、ライブラリを追加します。package.jsonも作成しておいてください。
npm i customersmailcloud -S
次に環境変数を設定します。これはVercelの管理画面で作成します。
| 名称 | 変数名 |
|---|---|
| APIユーザ | API_USER |
| APIキー | API_KEY |
| From（メールアドレス） | FROM_ADDRESS |
api/contact.jsを作成してコードを編集します。まずライブラリを読み込みます。
const { CustomersMailCloud } = require('customersmailcloud');
そして関数を定義します。
module.exports = async (req, res) => {
}
以下は関数の中の実装です。まず環境変数を使ってCustomers Mail Cloudを初期化します。
const client = new CustomersMailCloud(process.env.API_USER, process.env.API_KEY)
次にAPIのエンドポイントを選択します。 trial / standard / pro から選択します。
client.trial();
そしてメールを作成します。名前や本文はお問い合わせフォームから送られてきた情報を利用します。
const {email, name, body} = request.body;
client
.setFrom('Admin', process.env.FROM_ADDRESS)
.addTo(name, email)
.setSubject('お問い合わせがありました')
.setText(`お問い合わせ内容\n${body}`)
最後にメールを送信します。
try {
const res = await client.send()
response.send(res);
} catch (e) {
response.send(e);
}
試す
実装がうまくいっていれば、お問い合わせフォームからメール送信が行えるはずです。
まとめ
Vercelを使えばGitリポジトリと連携して静的サイトを手軽にデプロイできます。また、Functionsを使うことで動的な機能も簡単に実装できます。同一ドメイン内であれば、CORSも気にすることはありません。VercelとCustomers Mail Cloudを組み合わせる際に参考にしてください。
