Nuxt SSR 部署到 AWS EC2(Oracle Linux / CentOS / Ubuntu 相容)

Nuxt SSR 部署到 AWS EC2(Oracle Linux / CentOS / Ubuntu 相容)
Jul 15, 2025

min read

  • 已複製網址

Nuxt SSR 部署到 AWS EC2(Oracle Linux / CentOS / Ubuntu 相容)

前言#

多數的情況下,會由我們幫客戶建立好主機並完成 Nuxt 專案的部署後交付。但也有些客戶擁有內部 IT 團隊,他們會事先建立好主機,然後將主機提供給我們遠端部署。

因此,在開始部署之前,務必要先搞清楚客戶提供的主機環境,包含:

  • 主機作業系統為何(CentOS?Ubuntu?Amazon Linux?)
  • 是否已開好對外連線的 port(80 / 443 / 自訂 port)
  • 有無既有服務或佔用 port 的應用
  • 是否能以 root 或 sudo 權限操作

這將有助於後續部署時避免錯誤與環境衝突。

確認主機系統版本#

第一步先確認 OS 類型與版本,以避免誤用套件指令(特別是 yum / apt 差異)。

查詢系統版本:#


_10
cat /etc/os-release

下面列出一些常見的系統版本,不同版本間多少會有一些差異,但萬變不離其宗

OS 類型ID備註
CentOScentos相容 RHEL,使用 yum
Oracle Linuxoloracle相容 RHEL,使用 yum
Amazon LinuxamznAWS 內建系統,部分套件特殊
Ubuntuubuntu使用 apt,設定方式略不同
AlmaLinux / Rockyalmalinux / rocky與 CentOS 完全相容

部署流程#

1. 上傳專案到 EC2#

上傳的方式蠻多種的,可以依照自己習慣的方式來進行上傳,真的不行就使用萬用的 wget


_10
scp -i your-key.pem -r ./nuxt_app ec2-user@<EC2-IP>:/home/ec2-user/

2. 安裝 Node.js#

通常情況下,選擇LTS版本。


_10
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
_10
sudo yum install -y nodejs

若是 Ubuntu 系統,請改用:


_10
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
_10
sudo apt install -y nodejs

3. 安裝 PM2(Node 應用管理工具)#


_10
sudo npm install -g pm2

4. 編譯 Nuxt 專案#


_10
# cd 到你的專案資料夾
_10
cd ~/nuxt_app
_10
npm install
_10
npm run build

5. 使用 PM2 啟動 SSR 應用#


_10
PORT=3000 pm2 start .output/server/index.mjs --name nuxt-app --interpreter node
_10
pm2 save
_10
pm2 startup

6. 安裝 Nginx 並設定反向代理#


_10
sudo yum install nginx -y
_10
# 若是 Ubuntu:
_10
# sudo apt install nginx -y

建立設定檔 /etc/nginx/conf.d/nuxt.conf: 建議不要直接修改nginx的設定檔案,所以這邊直接在 /conf.d 資料夾下建立一支獨立的設定檔案


_16
server {
_16
listen 80 default_server;
_16
server_name _;
_16
_16
location / {
_16
proxy_pass http://127.0.0.1:3000;
_16
proxy_http_version 1.1;
_16
proxy_set_header Upgrade $http_upgrade;
_16
proxy_set_header Connection 'upgrade';
_16
proxy_set_header Host $host;
_16
proxy_cache_bypass $http_upgrade;
_16
}
_16
_16
access_log /var/log/nginx/nuxt_access.log;
_16
error_log /var/log/nginx/nuxt_error.log;
_16
}

重新啟動 Nginx:


_10
sudo nginx -t
_10
sudo systemctl reload nginx


常見問題#

❌ 你看到的網站不是你剛部署的專案?#

🔍 排查方向:#

  1. PM2 是否真的在跑你要的 Nuxt 專案?

_10
pm2 list

  1. pm2 info 看你實際跑的是哪個檔案?

_10
pm2 info nuxt-app

  1. 檢查實際監聽的 port 是否是你預期的?

_10
sudo lsof -i -P -n | grep LISTEN | grep node

  1. 你真的停掉了舊的應用嗎?

_10
pm2 stop all
_10
pm2 delete all

  1. 確保 Nginx proxy_pass 指到正確的 port

  2. 還有其他 node 程式跑在 background?


_10
ps aux | grep node


pm2 執行後網站完全打不開?#

  • 沒有執行 npm run build
  • .output/server/index.mjs 不存在
  • PORT 被佔用 → 查看 logs:

_10
pm2 logs nuxt-app


PORT 3000 被佔用#


_10
sudo lsof -i :3000
_10
sudo netstat -tulnp | grep :3000

改用其他 port:


_10
PORT=4000 pm2 start .output/server/index.mjs --name nuxt-app --interpreter node


快速指令備忘#


_15
# 查系統版本
_15
cat /etc/os-release
_15
_15
# 檢查 port 使用狀態
_15
sudo lsof -i -P -n | grep LISTEN
_15
_15
# 查 Node 相關處理程序
_15
ps aux | grep node
_15
_15
# 測試 Nuxt SSR 是否跑起來
_15
curl http://127.0.0.1:3000
_15
_15
# 檢查 nginx 設定是否生效
_15
sudo nginx -t
_15
sudo systemctl reload nginx