はじめに
私はJリーグチーム 北海道コンサドーレ札幌を応援するサポーター兼市民ランナーです。そんなサポーター兼ランナー同士で活動しているコミュニティのホームページを作成する過程について紹介したいと思います。
サイト作成
昨今のAI全盛ブームに乗っかり、ホームページ作成もAIでチャチャっとできないか…と探していたところ、AIサイト生成サービス「Genspark」を使用することにしました。
試しに使ってみたところものの数分でデザインに心得が無くても、それっぽいサイトが作成されるので、これを使わない手は無いと思います。
プロンプトと写真、そして参照となるXアカウントを参照させて対話しながら作成していきましたが、これはコンセプトやどう作りたいかのイメージがいかにはっきりしているかによって、作るスピード感が変わってくると思います。
ちなみに私はフロント部分はほぼ1日で作成し、あとは文言や写真の差し替えを実施したくらいでした。
ホスティングについて
Gensparkで簡単にポータルサイトが作成できるのですが、次は作成したサイトを「自分のドメイン」で「安く」「セキュア」に公開しようと考えるといくつかの選択肢が考えられます。今回候補として考えられるのは以下のパターン。
① Gensparkでのホスティング
② AWS (S3 + CloudFront + ACM)
③ 外部のレンタルサーバー（エックスサーバー、ConoHa WING等）
④ Cloudflare Page
①や④はめっちゃ簡単、③は静的なサイトにはオーバースペック、②がちょっと手間がかかる感じですね。今回は、「ドメイン維持費以外のランニングコストを低くする」ことと「なるべく手を動かしてホスティングを学ぶ」目標に、②のAWSとCloudflareを組み合わせた構成で構築しました。
インフラ構成図
今回の構成のキモは、「DNS管理をCloudflareに任せることで、AWS Route 53の固定費を削る」点にあります。
構築手順の詳細
1. Cloudflareでドメイン取得とSSL設定
ドメインの確保は以下の手順で。
- ドメイン取得: Cloudflareの「ドメイン登録」から購入。原価販売なので更新料が他社より安く済みます。
- SSL/TLS設定: モードを 「フル (厳格)」 に設定します。ここが「フレキシブル」だとAWS側と通信が合わずリダイレクトループが発生します。
2. AWS S3へのコンテンツ配置
Gensparkから書き出した静的ファイルを配置します。
- バケット作成: 「パブリックアクセスをすべてブロック」のまま作成します。
-
アップロード:
index.htmlが直下に来るようにアップロードします。
3. AWS ACMでSSL証明書を発送
CloudFrontでHTTPS配信するために、ACMで証明書を作ります。
- 重要: リージョンを 「米国東部 (バージニア北部) us-east-1」 に切り替えてからリクエストします。これ以外のリージョンだとCloudFrontで選択できません。
- DNS検証: CloudflareのDNSに、AWSから指定されたCNAMEレコードを登録します。この際、Cloudflareのプロキシ（オレンジの雲）を一時的に OFF にするのがコツです。
4. CloudFrontの設定（OACの利用）
S3を直接公開せず、CloudFront経由でのみアクセスを許可します。ここがキモです。
- オリジン: S3を選択し、Origin Access Control (OAC) を使用。
- バケットポリシー: CloudFront作成後に表示されるポリシーをコピーして、S3の「バケットポリシー」に貼り付けます。
- 代替ドメイン名 (CNAME): 自分の独自ドメイン（例：XXXXXXXXXX.com）を入力し、ACMで作成した証明書を選択します。
5. Cloudflare DNSの紐付け
最後にCloudflareの管理画面で、CloudFrontのURL（xxxx.cloudfront.net）をCNAMEレコードとして登録します。
- 設定値:
- タイプ:
CNAME - 名前:
@(ルートドメイン) - ターゲット: CloudFrontのドメイン名
- プロキシステータス: ON (オレンジの雲)
ハマりポイントと解決策
- 証明書が保留中のまま: 数分から数10分経過しても証明書が保留中となってしまいました。ここはCloudflare側で検証用レコードのプロキシをOFFにしたら解決しました。
-
S3のファイルを更新しても変わらない: CloudFrontに「キャッシュ」が残ると画面が変わらないので「Invalidations（キャッシュ削除）」から
/*を実行してクリアして解決させます。
今回作成したサイト
今回作成したサイトは以下。活動内容も含めて一度ご覧いただけたら幸いです。
まとめと所感。
この構成により、月々の支払いはAWSのS3保管料（数円〜数十円程度）のみとなります。
GensparkのようなAIツールで素早くコンテンツを作り、AWS+Cloudflareで堅牢にホスティングする組み合わせは、個人開発においてはひとつの選択肢だと思います。
静的なホームページとは言え、このようなスピード感でフロントからバックエンドまで用意してサイト公開まで出来ることに、これまで経験からすごさよりも怖さを感じてしまいました。これ個人でやっているWebデザイナーさんやエンジニアさんの仕事領域、いくつか食っちゃいますよね…と。
デザインや構築「だけ」で勝負するのではなく、企画や何をしたいか？を考え、それをいかに実現できるか？を考えることがこれからのエンジニアとしての必須スキルなのかもしれない、と思った次第です。
ここまでご覧頂き、ありがとうございました！