ポートフォリオ作成（デプロイ編）

はじめに

私はフロントエンドエンジニアとして7年ほど働いています。
前回の記事に引き続き、ポートフォリオを作成しています。

アプリケーションの概要

ストック管理アプリは、買い出しのときの「買い忘れ」と「買いすぎ」を防ぐ、在庫管理アプリです。
日用品などの在庫を登録しておくと、定期購入の周期を設定でき、買うべきタイミングでPush通知が届きます。PWAにも対応しています。

• GitHub

• 技術スタック
  • UI: React(TypeScript)、Inertia、Tailwind CSS 4、shadcn/ui
  • サーバー: PHP(Laravel)、PostgreSQL、Docker
  • インフラ: Fly.io、Cloudflare（DNS、メールの転送、プロキシ、WAF、Access、Turnstile）、Resend（メール送信）、Tigris（バックアップ）

今回実装・変更・工夫した点

Fly.ioへのデプロイ

GitHub Actionsでデプロイ自動化

• 設定ファイル: .github/workflows/deploy.yml
• トリガー: mainブランチにマージされたタイミング

ドメインとメール

Cloudflare

役割: ドメインとDNSの管理、受信メールの転送

ドメイン取得

• 9ドル程度で取得

レコード設定

• Aレコード: ドメイン名を IPv4 アドレスに紐づけ
• AAAAレコード: ドメイン名を IPv6 アドレスに紐づけ
• CNAMEレコード: ドメイン名に「別名」を設定
• MXレコード: 「このドメイン宛てのメールをどのサーバーで受け取るか」を指定
• TXTレコード: 任意の文字列を置く。SPF、DMARC、Fly.io のドメイン所有確認などに使用
• CAAレコード: このドメインの証明書を発行してよい認証局を指定

メール受信転送

• Web Pushの連絡先にメールアドレスを使用するため、公開用メールアドレスを用意した

Resend

役割: メール送信（メールアドレスの確認、パスワードリセット、退会の通知など）

レコード設定

• SPFレコード: このドメインから送信してよいサーバーを宣言
• DKIMレコード: メールに付ける電子署名を検証するための公開鍵を配置

実際のメール送信履歴

セキュリティ

Cloudflare

Cloudflare Access

• 許可したメールアドレスに届くワンタイムパスワードを入力後、管理画面に遷移
  

WAF

• カスタムルール
  • よく狙われるパスの遮断、日本以外からの遮断（既知のボットは除く）、ログインのレート制限
    • 

リクエストヘッダー変換ルール

• Fly.io への直接のアクセス禁止
  • Fly.io のURLに直接アクセスされると、Cloudflare の WAF や Access を素通りするため
• 対応内容
  • リクエストヘッダにX-Origin-Authを付与
    • 
  • X-Origin-Authの検証をLaravel側で実施

制作したプロダクトのスクリーンショット画像

今後の計画

ポートフォリオの改善

• 夫婦共有で1つの在庫を管理するような仕組みを作りたい（DB設計の変更が必要）
• 死活監視は検討の余地あり