前言#
多數的情況下,會由我們幫客戶建立好主機並完成 Nuxt 專案的部署後交付。但也有些客戶擁有內部 IT 團隊,他們會事先建立好主機,然後將主機提供給我們遠端部署。
因此,在開始部署之前,務必要先搞清楚客戶提供的主機環境,包含:
- 主機作業系統為何(CentOS?Ubuntu?Amazon Linux?)
- 是否已開好對外連線的 port(80 / 443 / 自訂 port)
- 有無既有服務或佔用 port 的應用
- 是否能以 root 或 sudo 權限操作
這將有助於後續部署時避免錯誤與環境衝突。
確認主機系統版本#
第一步先確認 OS 類型與版本,以避免誤用套件指令(特別是 yum / apt 差異)。
查詢系統版本:#
_10cat /etc/os-release
下面列出一些常見的系統版本,不同版本間多少會有一些差異,但萬變不離其宗
OS 類型 | ID | 備註 |
---|---|---|
CentOS | centos | 相容 RHEL,使用 yum |
Oracle Linux | ol 或 oracle | 相容 RHEL,使用 yum |
Amazon Linux | amzn | AWS 內建系統,部分套件特殊 |
Ubuntu | ubuntu | 使用 apt ,設定方式略不同 |
AlmaLinux / Rocky | almalinux / rocky | 與 CentOS 完全相容 |
部署流程#
1. 上傳專案到 EC2#
上傳的方式蠻多種的,可以依照自己習慣的方式來進行上傳,真的不行就使用萬用的 wget
_10scp -i your-key.pem -r ./nuxt_app ec2-user@<EC2-IP>:/home/ec2-user/
2. 安裝 Node.js#
通常情況下,選擇LTS版本。
_10curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -_10sudo yum install -y nodejs
若是 Ubuntu 系統,請改用:
_10curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -_10sudo apt install -y nodejs
3. 安裝 PM2(Node 應用管理工具)#
_10sudo npm install -g pm2
4. 編譯 Nuxt 專案#
_10# cd 到你的專案資料夾_10cd ~/nuxt_app_10npm install_10npm run build
5. 使用 PM2 啟動 SSR 應用#
_10PORT=3000 pm2 start .output/server/index.mjs --name nuxt-app --interpreter node_10pm2 save_10pm2 startup
6. 安裝 Nginx 並設定反向代理#
_10sudo yum install nginx -y_10# 若是 Ubuntu:_10# sudo apt install nginx -y
建立設定檔 /etc/nginx/conf.d/nuxt.conf
:
建議不要直接修改nginx的設定檔案,所以這邊直接在 /conf.d
資料夾下建立一支獨立的設定檔案
_16server {_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:
_10sudo nginx -t_10sudo systemctl reload nginx
常見問題#
❌ 你看到的網站不是你剛部署的專案?#
🔍 排查方向:#
- PM2 是否真的在跑你要的 Nuxt 專案?
_10pm2 list
- 用
pm2 info
看你實際跑的是哪個檔案?
_10pm2 info nuxt-app
- 檢查實際監聽的 port 是否是你預期的?
_10sudo lsof -i -P -n | grep LISTEN | grep node
- 你真的停掉了舊的應用嗎?
_10pm2 stop all_10pm2 delete all
-
確保 Nginx proxy_pass 指到正確的 port
-
還有其他 node 程式跑在 background?
_10ps aux | grep node
❌ pm2
執行後網站完全打不開?#
- 沒有執行
npm run build
.output/server/index.mjs
不存在PORT
被佔用 → 查看 logs:
_10pm2 logs nuxt-app
❌ PORT 3000
被佔用#
_10sudo lsof -i :3000_10sudo netstat -tulnp | grep :3000
改用其他 port:
_10PORT=4000 pm2 start .output/server/index.mjs --name nuxt-app --interpreter node
快速指令備忘#
_15# 查系統版本_15cat /etc/os-release_15_15# 檢查 port 使用狀態_15sudo lsof -i -P -n | grep LISTEN_15_15# 查 Node 相關處理程序_15ps aux | grep node_15_15# 測試 Nuxt SSR 是否跑起來_15curl http://127.0.0.1:3000_15_15# 檢查 nginx 設定是否生效_15sudo nginx -t_15sudo systemctl reload nginx