Day11 在 EC2 架設 Apache，部署一個動態網站

2025 iThome 鐵人賽

DAY 11

Build on AWS

從零到雲端：AWS 開發之路系列第 11 篇

17th鐵人賽

yangg_yun

2025-09-25 09:44:57

27 瀏覽

分享至

前幾天我們已經用S3 + CloudFront、Cloudflare Pages部署了靜態網站。今天的任務更進一步：在AWS EC2（雲端主機）上安裝Apache，並部署一個「動態網站」。這樣就能處理伺服器端邏輯，例如 PHP，甚至後面連線資料庫。
還記得我們在第三天建立了一台EC2嗎？今天我們要用這台主機來做動態網站，那為什麼要用EC2不用S3呢？原因在於：

S3 靜態網站：只能放 HTML、CSS、JS，不能跑後端程式。
EC2：相當於一台雲端的 Linux 電腦，可以安裝任何伺服器軟體，部署完整網站或 API。

登入EC2

由於在第三天我們已經先部署好EC2，所以這邊我們直接從終端機登入就可以啦！
登入的方式也是跟上次一樣利用SSH連線到EC2，your-key.pem要更換成當時自己下載的金鑰，EC2公有IP則可以在AWS中EC2的主控台頁面找到，成功登入後會看到類似「鳥在飛」的畫面

ssh -i your-key.pem ec2-user@<EC2公有IP>

安裝 Apache + PHP

sudo yum update -y
sudo yum install -y httpd php

啟動 Apache

sudo systemctl start httpd
sudo systemctl enable httpd

進入網站根目錄（Apache 預設目錄）：

cd /var/www/html

建立並編輯檔案：

sudo nano index.php

index.php程式碼

<?php
date_default_timezone_set("Asia/Taipei");

// 1️⃣ 處理表單送出的留言
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["message"])) {
    $msg = htmlspecialchars($_POST["message"]); // 避免 XSS
    file_put_contents("messages.txt", date("H:i:s") . " - " . $msg . "\n", FILE_APPEND);

    // 送出後自動刷新頁面
    header("Location: /");
    exit; // 送出後停止程式，避免 HTML 重複輸出
}

// 2️⃣ 讀取歷史留言
$messages = file_exists("messages.txt") ? file("messages.txt") : [];
?>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的小動態網站</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 30px; }
        h1 { color: #333; }
        form input { padding: 5px; width: 300px; }
        form button { padding: 5px 10px; }
        ul { list-style-type: none; padding-left: 0; }
        li { margin-bottom: 5px; padding: 5px; background: #f2f2f2; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>💬 小留言板</h1>

    <!-- 送出留言表單 -->
    <form method="POST">
        <input type="text" name="message" placeholder="輸入留言" required>
        <button type="submit">送出</button>
    </form>

    <!-- 顯示歷史留言 -->
    <h2>歷史留言</h2>
    <ul>
        <?php foreach ($messages as $m): ?>
            <li><?php echo htmlspecialchars($m); ?></li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

儲存後我們在瀏覽器輸入以下網址就看得到我們做的動態網站囉～