はじめに

前回、Amazon Linux 2023で構築したApacheのWebサーバーではデフォルトのページが表示されていましたが、新たに作成したindex.htmlファイルに差し替えてみることにしました。

この記事では、基本的な内容に触れつつ、特にフロントエンド部分の装飾に力を入れています。

最後には、実際にブラウザからアクセスして確認してみたいと思います！

書こうと思ったきっかけ

この記事を投稿しようと思ったきっかけは、私が受講しているITスクールの仲間たちが利用している「もくもく部屋」という学習スペースです。

年末年始の間も、自分に負けず勉強を続けている仲間たちの姿にとても刺激を受けました。その姿を見て、私も何かメッセージを送りたいと思い、この記事を作成することにしました（笑）。

また、最近HTMLやCSSのキャッチアップが十分にできていなかったこともあり、この機会に復習を兼ねて取り組みました。

前提準備

この記事では、AWS上に構築済みの基本的なネットワーク構成（VPCやサブネット）があることを前提としています。

また、前回の記事で構築したAmazon Linux 2023を使用したApacheのWebサーバーも利用しています。

VPCの作成やEC2でのApacheのWebサーバー構築については、以下の記事をご参照ください。

今回配置するHTMLファイル

今回使用するHTMLファイルは、HTMLとCSSを活用して、「2025年明けましておめでとうございます。今年もよろしくお願いします」という新年のメッセージを表示する内容です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年のメッセージ</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            background: linear-gradient(120deg, #ff9a9e, #fad0c4);
            margin: 0;
            padding: 20px;
            overflow: hidden;
        }
        .message {
            background-color: rgba(255, 255, 255, 0.8);
            border: 3px solid #ff6600;
            border-radius: 15px;
            padding: 30px;
            display: inline-block;
            margin-top: 50px;
            animation: float 3s infinite ease-in-out;
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
        }
        .message h1 {
            color: #ff6600;
            font-size: 2.5em;
            margin: 0;
            text-shadow: 2px 2px #ffa500;
        }
        .message p {
            color: #333;
            font-size: 1.5em;
            margin: 10px 0;
        }
        .message .goal {
            color: #007bff;
            font-size: 1.2em;
            margin-top: 20px;
        }
        .fireworks {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, #ff0, #ff6600, transparent);
            border-radius: 50%;
            animation: fireworks 2s infinite ease-in-out;
        }
        @keyframes fireworks {
            0% {
                transform: scale(1) translate(-50%, -50%);
                opacity: 1;
            }
            100% {
                transform: scale(5) translate(-50%, -50%);
                opacity: 0;
            }
        }
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body>
    <div class="fireworks" style="top: 30%; left: 40%; animation-delay: 0.1s;"></div>
    <div class="fireworks" style="top: 60%; left: 70%; animation-delay: 0.3s;"></div>
    <div class="fireworks" style="top: 20%; left: 80%; animation-delay: 0.5s;"></div>
    <div class="fireworks" style="top: 50%; left: 20%; animation-delay: 0.7s;"></div>
    <div class="fireworks" style="top: 40%; left: 50%; animation-delay: 0.9s;"></div>
    <div class="message">
        <h1>🎉 2025年 明けましておめでとうございます 🎉</h1>
        <p>スクールの皆様、本年もよろしくお願いします！</p>
        <p class="goal">今年の目標：もくもく部屋を使い倒すこと！笑</p>
    </div>
</body>
</html>

シンプルながらも、花火のアニメーションやカラフルなデザインを追加した新年らしい内容となっています！！

EC2のWebサーバーに配置してみた

作成したHTMLファイルを、EC2のWebサーバー上に配置していきます。以下のコマンドを実行して、HTMLファイルを編集します。

vi /var/www/html/index.html

私の環境では、Apacheの初期設定では/var/www/htmlディレクトリ内にHTMLファイルが存在していなかったため、手動で新しいファイルを作成しました。

上記で作成したindex.htmlのコードをコピーして、エディタ内に貼り付け、保存します。これで配置作業は完了です。

実際にブラウザでアクセスしてみた

ブラウザを開き、インスタンスのパブリックIPアドレスにアクセスします。

http://<インスタンスのパブリックIP>

事前に作成しておいたHTMLファイルの内容が、ブラウザで想定通りに表示されていることを確認しました。技術検証としては大成功です！

今では、このような技術も簡単に試し、デプロイできるようになりました。

これもITスクールで一生懸命学び、積み重ねてきた努力の成果だと思っています！！

まとめ

最後まで読んでいただき、ありがとうございました！

私自身、このITスクールではインフラ以外にもフロントエンド部分なども積極的に学んでいきたいと考えています。

こうして志を同じくする仲間たちと一緒に学べる環境があることは、とても恵まれていると感じています。

残り1年間の受講期間を最大限に活用し、後悔のないように最後まで勉強を続けていきたいと思っています！

おまけ：年末年始の過ごし方

今年の年末年始は、実家に帰省せず、自宅で技術の勉強に集中する予定です。

お正月ということもあり、少し気持ちが緩みそうになることもありますが、「もくもく部屋」に入って、自分と向き合いながら黙々と学習を進めています。

ちなみに、この仮想空間には「もくもく部屋」や「もくもくサイレント」、「インフラ部屋」など、さまざまな部屋があり、とても面白いと感じています（笑）。

参考記事