今回このテーマにした理由
AmazonQ Developperを使ったのですが、テトリス風ゲームやウェブサイトをプロンプトだけで一瞬で作成でき、感動したので、これを業務で実用化しやすくするため、EC2内でHTTPSのサイトとして再度簡単に作ってみたいと思ったからです。
今回はサイトの案や画像もAmazonのAIを使用して作っていこうと思います。
主に使用したAIサービスは以下になります。
Amazon Q Developer：生成AIを活用してプログラマーやITプロフェッショナルをサポートするツールです。Visual Studio Codeでのコード提案やバグ修正、AWS環境・CLIとの連携で、開発効率を高めてくれます。
Amazon Bedrock：AWSや外部のAIモデルを単一のAPIで利用できるプラットフォームです。モデルの評価やカスタマイズ、データ統合も可能で、生成AIをアプリに組み込みたい方におすすめです。
Amazon Nova：Amazon Novaは、Bedrock上で提供される高性能なAIモデル群で、MicroからPremierまで多彩なラインナップです。コスト効率と高精度を両立したい方に最適です。今回は手軽に使えるMicroを使いました。
手順１ ~EC2とBedRock、AmazonQでHTMLとイラストを作ろう
まずはVSCode上にAmazonQをインストールします。
今回は筆者の部屋の観葉植物のガジュマルをキャラクターに見立て、「がじゅろう」というキャラクターのホームページを作っていきたいと思います。
まずはがじゅろうくんのイメージをAmazonNova(画像生成AI)で作成。可愛いのが四匹できたので黄色いやつをがじゅろうにしていこうと思います。
がじゅろうについての設定はBedRockのチャット機能でCloud3 Sonnetを使って作成してもらいました。
上記二つの画像と中身の情報をAmazonQ Developperに読み込ませて画像のようなプロンプトを入れてHTMLを作成してもらいました。
すると、上記の図のような可愛らしいウェブサイトが一瞬にして作成できました。しっかりプルダウンができ、
上記の図のようなプルダウンを押すと見たい情報を詳しく見たりエピソードを見たりできます。
手順2~作ったウェブページをAWS上で証明書付きウェブページにしよう~
さて、Webページができたので、上記に「www.kakutjun.com」というドメインとhttps機能をつけていこうと思います。
まずはEC2を作成し、Apacheをインストールし、index.htmlの中に先ほど作ったhtmlをコピペしました。
ドメイン取得方法としては「Route53」を今回は使いました
Route53を使って作成すると、ドメインの移管作業が要らず楽に作成できるので筆者は好んで使っています。
上記の図のように、ホストゾーンを作った後、レコードを作成してあげると（値はEC2のパブリックアドレスにしている）Aレコードが作成できます。
証明書の作成手順としては、ACMを仕様する方法、Let’s Encryptを使用する方法、さまざまありますが、今回は後者を使いました。
EC2内にインストールしたApacheにmod_sslとcertbotをインストールしssl証明書を発行します。その後、発行されたpemの情報をssl.confファイルの中に追記します。(下記画像)
その後、Apacheを再起動し、今回作成した「https://www.kakutjun.com 」 を検索エンジンにかけます。
すると
上記画像のようにhttpsでウェブを作成できました。
この後、index.htmlと同じ階層にimageとしてがじゅろうくんのイラストを載せてあげればウェブサイトは完成します。
#最後に
今回、とても簡単にhtmlのウェブサイトを作れたので、実際の業務でも使っていけたらいいなと思いました。また、次はDifyを使って作ったウェブサイトにQ&Aコーナーを作っていきたいです！
ここまで読んでくださりありがとうございました！