SvelteKit + Dockerでお問い合わせフォームを実装する！Gmailのアプリパスワードと環境変数の設定ガイド

SvelteKitで作ったサイトに、バックエンド（Node.js）からメールを送信する機能を実装する方法を解説します。Docker環境での環境変数の扱い方や、Gmailのアプリパスワードの設定などをまとめました。

1. Gmail側の準備：アプリパスワードの取得

Gmailをプログラムから利用する場合、通常のログインパスワードは使えません。専用の「アプリパスワード」を発行します。

1. Googleアカウントの「2段階認証」を有効にする。
2. アプリパスワード設定画面にアクセスする 。
3. アプリ名（例：後藤Sys問い合わせフォーム）を入力して「作成」をクリック 。
4. 表示された 16桁の生成コード をメモします。

2. Docker環境の設定（環境変数）

取得したパスワードを安全にコンテナへ渡すため、docker-compose.yml を編集します。

YAML

services:
  frontend:
    # ...略...
    environment:
      - NODE_ENV=production
      - ORIGIN=https://gotohsys.com
      - EMAIL_PASSWORD=xxxx xxxx xxxx xxxx  # メモした16桁のコード

3. nodemailerのインストール

プロジェクトのルート（またはfrontendディレクトリ）でライブラリをインストールします。

Bash

npm install nodemailer

4. バックエンドの実装（+page.server.js）

SvelteKitの Form Actions を使い、サーバーサイドでメール送信処理を行います。

src/routes/contact/+page.server.js

JavaScript

import { fail } from '@sveltejs/kit';
import { EMAIL_PASSWORD } from '$env/static/private'; // 環境変数から読み込み 
import nodemailer from 'nodemailer';

export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const name = data.get('name');
        const email = data.get('email');
        const message = data.get('message');

        // バリデーション 
        if (!name || !email || !message) {
            return fail(400, { error: 'すべての項目を入力してください。' });
        }

        // 送信機の設定 
        const transporter = nodemailer.createTransport({
            service: 'gmail',
            auth: {
                user: '[email protected]', // 自分のアドレス
                pass: EMAIL_PASSWORD // アプリパスワード
            }
        });

        const mailOptions = {
            from: email,
            to: '[email protected]',
            subject: `【お問い合わせ】${name}様より`,
            text: `お名前: ${name}\nメールアドレス: ${email}\n\n内容:\n${message}`
        };

        try {
            await transporter.sendMail(mailOptions);
            return { success: true };
        } catch (error) {
            console.error('Email sending error:', error);
            return fail(500, { error: 'メール送信に失敗しました。' });
        }
    }
};

5. フロントエンドの実装（+page.svelte）

Svelte 5 の $props() と use:enhance を使って、画面遷移なしで送信結果を表示します 。

src/routes/contact/+page.svelte

Svelte

<script>
    import { enhance } from '$app/forms'; // ページリロードを防ぐ 
    let { form } = $props(); // サーバーからのレスポンスを受け取る 
</script>

<form method="POST" use:enhance>
    <label>お名前<input type="text" name="name" required /></label>
    <label>メール<input type="email" name="email" required /></label>
    <label>内容<textarea name="message" required></textarea></label>

    {#if form?.success}
        <p class="success">送信が完了しました！</p>
    {:else if form?.error}
        <p class="error">{form.error}</p>
    {/if}

    <button type="submit">送信する</button>
</form>

6. トラブルシューティング：502 Bad Gateway が出たら

Docker環境で設定を変更した際、サイトが「不良ゲートウェイ」になることがあります。これは環境変数の変更によりコンテナの整合性が崩れるためです 。

以下のコマンドで、古いイメージとネットワークを完全にリセットして再起動するのが最も確実な解決策です。

Bash

docker compose down
docker compose up -d --build

完成した問い合わせフォームは最終的に、こんな感じになってます。

---

この記事が役に立ったら、ぜひシェアしてください！

後藤Sys

後藤Sys-真心システム開発をモットーに

gotohsys.com