【澎湖親子遊記】觀音亭退潮抓螃蟹、水族館看大魟魚餵食秀！夏日菊島慢活行程分享

 炎炎夏日，最適合帶著孩子來澎湖放慢步調走走。這次的菊島之行，沒有塞滿緊湊的跳島趕場，而是選擇留在本島，讓小朋友用雙腳踩踏潮間帶、近距離接觸海洋生態。

📍 第一站：觀音亭濱海步道與潮間帶探索

來到馬公市區，觀音亭休憩園區絕對是老少咸宜的必訪景點。沿著步道走，遠處就是著名的彩虹橋，晴空萬里下的海景讓人心曠神怡。步道兩旁還設有色彩繽紛的裝置藝術，拍照打卡十分吸睛。

走下彩虹橋旁的沙灘，適逢退潮時間，露出了平坦的泥灘與小水窪。小朋友一看到水窪立刻蹲下身子，拿著小鏟子與觀察盒認真「尋寶」，玩得不亦樂乎。

沒多久，藍色水桶裡就迎來了今天的第一位小客人——一隻活力十足的小螃蟹！讓孩子親手觀察大自然的奧妙，比起課本更有趣、更有記憶點（觀察完記得讓小動物回歸大海喔）！

📍 第二站：澎湖水族館——精彩絕倫的大洋池餵食秀

避開正中午的烈日，水族館是極佳的室內吹冷氣兼育兒景點。澎湖水族館的大洋池餵食秀是這裡的重頭戲！

潛水員帶著餌料下水時，成群的大型魚類與魟魚紛紛圍繞上來。體型龐大的魟魚優雅地拍打雙翅貼著玻璃游過，像是在跟觀眾微笑打招呼一樣，模樣既震撼又可愛。現場不論大人小孩都看得目不轉睛，快門聲停不下來。

💡 澎湖慢遊小貼士

1. 潮汐時間要先查：想帶孩子去潮間帶抓蟹、踏浪，出發前務必確認當天退潮時間，抓準退潮前後 1～2 小時最安全好玩。

2. 防曬與補水不可少：澎湖的陽光非常熱情，遮陽帽、防曬乳與隨身水壺一定要備齊。

3. 室內景點穿插搭配：正午紫外線最強時，安排水族館等室內展館，大人舒服、小孩也不容易中暑。

看著孩子專注的背影與收穫滿滿的笑容，這就是全家旅行最美好的意義！

 

🚀 從零打造自己的 AWS 股票看盤網站：EC2 + Ubuntu + Docker + Nginx + Node.js + K 線

最近想自己做一個可以放在網路上使用的股票 Dashboard，所以乾脆從零開始架一台 AWS EC2，自己建立 Linux Server，再把 Docker、Nginx、Node.js 和股票 API 串起來。

最後做出來的東西包含：

• 🇹🇼 台股即時股價
• 🇺🇸 美股即時股價
• 📈 股票 K 線
• 🔍 股票查詢
• ➕ 網頁新增股票
• 🗑️ 網頁刪除股票
• 📝 記事本
• 🧮 計算機
• 🔄 自動更新
• 🌐 使用瀏覽器直接開啟
• 🐳 Docker Container 化
• 🔀 Nginx Reverse Proxy

而且整套不是架在自己的電腦，而是放在 AWS EC2 上。

---

一、先了解最後的架構

最後整個系統大概長這樣：

                    Internet
                       │
                       ▼
              ┌─────────────────┐
              │    AWS EC2      │
              │     Ubuntu      │
              └────────┬────────┘
                       │
                       ▼
              ┌─────────────────┐
              │     Nginx       │
              │      :80        │
              └────────┬────────┘
                       │
                       ▼
              ┌─────────────────┐
              │    Node.js      │
              │      :3000      │
              └────────┬────────┘
                       │
             ┌─────────┴─────────┐
             ▼                   ▼
       Yahoo Finance          新聞 API
          API                    API
             │
             ▼
       股票 / K線資料

使用者其實不需要知道 Node.js 的 3000 Port。

瀏覽器只需要：

http://EC2_PUBLIC_IP

Nginx 收到請求之後，再把 /api/... 的請求轉給 Node.js。

---

二、建立 AWS EC2

首先在 AWS 建立 EC2。

我選擇：

OS：Ubuntu
架構：64-bit

建立完成後會取得：

Public IPv4 Address

例如：

http://xxx.xxx.xxx.xxx

這個就是之後從 Windows 瀏覽器連進去的地址。

---

三、Windows 登入 Ubuntu

Windows 可以直接使用 SSH。

例如：

ssh -i "你的金鑰.pem" ubuntu@你的EC2_IP

成功後會看到類似：

ubuntu@ip-172-31-29-108:~$

這代表已經進入 AWS EC2。

---

四、第一次遇到的 Linux 權限問題

一開始執行：

apt update

結果出現：

Could not open lock file
Permission denied

原因很簡單。

Ubuntu 一般使用者不能直接修改系統套件。

所以改成：

sudo apt update

以及：

sudo apt upgrade -y

這是一個很常見的 Linux 初學者問題。

---

五、安裝 Docker

接下來安裝 Docker。

安裝完成後確認：

docker --version

以及：

docker compose version

如果兩個都有版本號，就可以開始建立網站。

---

六、建立網站目錄

我把整個專案放在：

~/mywebsite

結構如下：

mywebsite/
│
├── compose.yaml
│
├── nginx.conf
│
├── html/
│   └── index.html
│
└── server/
    ├── Dockerfile
    ├── package.json
    └── server.js

這樣前端和後端可以分開管理。

---

七、建立 Node.js API

Node.js 負責：

取得股票資料
↓
處理 Yahoo Finance API
↓
提供自己的 API
↓
讓前端呼叫

例如：

/api/quote
/api/markets
/api/chart
/api/health

---

八、Dockerfile

Node.js 使用 Docker 包起來。

FROM node:22-alpine

WORKDIR /app

COPY package.json .

RUN npm install --omit=dev

COPY server.js .

EXPOSE 3000

CMD ["node", "server.js"]

這樣 Node.js 就不需要直接安裝在 Ubuntu 主機上。

---

九、package.json

使用 Express：

{
  "name": "market-api",
  "version": "1.0.0",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^5.1.0"
  }
}

---

十、第一次遇到 Docker 問題

一開始執行：

docker compose up -d --build

結果：

failed to read dockerfile:
open Dockerfile:
no such file or directory

這個錯誤其實非常直接。

Docker Compose 找不到：

server/Dockerfile

後來確認專案結構：

server/
├── Dockerfile
├── package.json
└── server.js

問題就解決了。

這也提醒了一件事情：

Docker 出錯時，不要只看最後一行，先確認檔案結構。

---

十一、股票 API

後端使用 Yahoo Finance Chart API 取得資料。

例如：

AAPL
NVDA
MSFT
TSLA

台股則可以使用：

2330.TW
2317.TW
2454.TW

台灣加權指數：

^TWII

美國主要指數：

^GSPC
^IXIC

---

十二、即時股價 API

自己建立：

/api/quote

例如：

curl "http://localhost/api/quote?symbol=AAPL"

API 回傳：

{
  "success": true,
  "symbol": "AAPL",
  "price": 309.35,
  "previousClose": 311.3,
  "change": -1.95,
  "changePercent": -0.626,
  "currency": "USD"
}

這樣前端就不用直接碰 Yahoo。

架構變成：

Browser
   ↓
Nginx
   ↓
Node.js
   ↓
Yahoo Finance

---

十三、最重要的 K 線 API

一開始網站可以看到股價，但是：

K 線完全沒有。

後來發現前端呼叫：

/api/chart

但是 Node.js 根本沒有這個 API。

所以瀏覽器得到：

Cannot GET /api/chart

這就是非常典型的：

前端已經寫好了，但後端沒有對應 API。

後來在 Node.js 加入：

/api/chart

讓它支援：

1d
5d
1mo
6mo
1y
5y

例如：

curl "http://localhost/api/chart?symbol=AAPL&range=1y"

成功之後會得到：

{
  "success": true,
  "symbol": "AAPL",
  "range": "1y",
  "interval": "1d",
  "data": [
    {
      "time": "...",
      "open": 300,
      "high": 305,
      "low": 298,
      "close": 303,
      "volume": 123456
    }
  ]
}

前端再把這些資料畫成 K 線。

---

十四、又遇到一個很有趣的 Docker 問題

有一次：

curl "http://localhost:3000/api/chart?symbol=AAPL&range=1y"

結果：

curl: (7)
Failed to connect to localhost port 3000

但是：

docker compose ps

卻顯示：

market-api   ...   3000/tcp

注意這兩個不是同一件事情。

3000/tcp

代表：

Container 裡面有 3000 Port

不代表：

EC2:3000

已經開放。

---

十五、直接從 Container 裡測試

於是改成：

docker compose exec market-api \
wget -qO- \
"http://127.0.0.1:3000/api/health"

結果：

{
  "status": "ok",
  "service": "market-api"
}

這就證明：

Node.js 本身是正常的。

而且：

Market API listening on 0.0.0.0:3000

也確認 Node.js 正在監聽：

0.0.0.0:3000

---

十六、為什麼最後不用開 AWS 3000 Port？

因為我們使用 Nginx。

外部：

Browser
   ↓
EC2 :80

Nginx：

:80

再轉：

market-api:3000

所以 AWS Security Group 只需要讓網站使用：

80

Node.js 的：

3000

不需要直接暴露給 Internet。

這樣反而比較安全。

---

十七、Nginx 的角色

Nginx 在這個專案裡做兩件事。

第一：

提供 HTML

第二：

Reverse Proxy

例如：

/api/chart

會被轉給：

market-api:3000

而：

/

則直接提供：

html/index.html

---

十八、最後做出 Dashboard

前端最後整合：

┌────────────────────────────────────────┐
│        📊 Market Dashboard             │
├────────────────────────────────────────┤
│                                        │
│ 🇹🇼 台股                                │
│                                        │
│ 台積電      2330.TW     +...%          │
│ 鴻海        2317.TW     +...%          │
│ 聯發科      2454.TW     -...%          │
│                                        │
├────────────────────────────────────────┤
│                                        │
│ 🇺🇸 美股                                │
│                                        │
│ AAPL        Apple       +...%           │
│ NVDA        NVIDIA      +...%           │
│ MSFT        Microsoft   +...%           │
│ TSLA        Tesla       -...%           │
│                                        │
├────────────────────────────────────────┤
│                                        │
│ 📈 AAPL                                 │
│                                        │
│ 1D  5D  1M  6M  1Y  5Y                  │
│                                        │
│        🕯️ K線圖                         │
│                                        │
└────────────────────────────────────────┘

---

十九、增加網頁直接管理股票

後來又增加：

＋ 新增股票

以及：

刪除

例如直接輸入：

NVDA
NVIDIA

就可以新增。

股票清單則存在：

localStorage

因此不需要每次修改 Server。

---

二十、記事本

又加入一個簡單的記事本：

📝 我的記事本

可以記錄：

今天觀察台積電
AAPL 等待回檔
NVDA 注意成交量

資料存在瀏覽器的：

localStorage

---

二十一、計算機

Dashboard 裡面也加入：

🧮 計算機

支援：

+
-
×
÷
%
()

所以看股票的時候可以直接計算：

100 × 1.08

或：

300000 × 0.05

---

二十二、目前完成的系統

到目前為止，這個小專案已經變成：

AWS EC2
│
└── Ubuntu
    │
    └── Docker
        │
        ├── Nginx
        │   │
        │   └── HTML Dashboard
        │
        └── Node.js
            │
            ├── /api/health
            ├── /api/quote
            ├── /api/markets
            └── /api/chart
                    │
                    └── Yahoo Finance

這已經不是單純的 HTML 網頁，而是一個真正的：

前端 + API Server + Reverse Proxy + Docker + Cloud Server

的小型 Web Application。

---

二十三、後來又準備加入即時新聞

下一步準備加入：

📰 即時新聞

架構會變成：

Browser
   ↓
Nginx
   ↓
Node.js
   ├── Yahoo Finance
   │
   └── News API

新聞 API Key 不直接放在 HTML，而是放在 Docker 的：

.env

例如：

GNEWS_API_KEY=xxxxxxxx

這樣比較不容易把 API Key 直接暴露在前端。

---

二十四、這次最大的收穫

這次最大的收穫其實不是做出一個股票網站。

而是第一次完整走過：

Cloud
↓
Linux
↓
Docker
↓
Nginx
↓
Node.js
↓
API
↓
Frontend
↓
External API

每一層都有可能出問題。

例如：

Linux 權限

Permission denied

解決：

sudo apt update

---

Docker 找不到 Dockerfile

open Dockerfile:
no such file or directory

解決：

確認專案目錄結構

---

Node API 不存在

Cannot GET /api/chart

解決：

增加 /api/chart

---

Container Port 問題

localhost:3000
Connection refused

解決：

docker compose exec

直接從 Container 裡確認 Node.js。

---

最後確認 API

docker compose exec market-api \
wget -qO- \
"http://127.0.0.1:3000/api/health"

看到：

{
  "status": "ok",
  "service": "market-api"
}

那一刻就代表：

我的 Node.js API 真的跑起來了。

---

二十五、下一步可以做到什麼？

目前這個架構還可以繼續往下發展。

例如：

☑ 台股
☑ 美股
☑ 即時報價
☑ K線
☑ Docker
☑ Nginx
☑ AWS EC2
☑ 股票新增/刪除
☑ 記事本
☑ 計算機

⬜ 即時新聞
⬜ HTTPS
⬜ 自訂網域
⬜ 使用者登入
⬜ 個人自選股
⬜ PostgreSQL / MySQL
⬜ Redis Cache
⬜ 股票價格警報
⬜ Telegram / LINE 通知
⬜ 財報資訊
⬜ 技術指標

到這裡，就可以開始把它從「自己玩的股票 Dashboard」，慢慢變成一個真正的個人投資資訊平台。

---

結語

這次最大的感覺是：

自己架 Server 沒有想像中難。

真正困難的是第一次遇到錯誤時，不知道問題到底在：

AWS？
Linux？
Docker？
Nginx？
Node.js？
API？
前端？

但只要一層一層拆開測試，其實就能慢慢找到問題。

例如：

docker compose ps

看 Container。

docker compose logs

看 Node.js。

curl

測 API。

docker compose exec

直接進 Container 測試。

這幾個指令，對之後維護 Docker Server 會非常常用。

最後從一台空白的 AWS Ubuntu：

AWS EC2
   ↓
Ubuntu
   ↓
Docker
   ↓
Nginx
   ↓
Node.js
   ↓
Yahoo Finance
   ↓
股票 Dashboard

一路做到可以直接用瀏覽器看台美股與 K 線。

這就是自己從零架一個 Web Application 最有趣的地方。 🚀