Vue部署項目到阿里云云服務(wù)器的實現(xiàn)步驟

更新時間：2025年12月30日 08:21:56 作者：天吶草莓

本文主要介紹了部署 Vue 項目到阿里云云服務(wù)器,將文件上傳到服務(wù)器,使用Nginx作為Web服務(wù)器提供服務(wù),配置Nginx以支持前端路由,感興趣的可以了解一下

部署 Vue 項目到阿里云云服務(wù)器 (CentOS/Ubuntu 為例)

核心步驟： 在本地構(gòu)建 Vue 項目生成靜態(tài)文件，然后將這些文件上傳到服務(wù)器，并使用 Nginx 作為 Web 服務(wù)器提供服務(wù)。

前提條件：

一臺運行 Linux (如 CentOS 或 Ubuntu) 的阿里云 ECS 實例。
本地開發(fā)環(huán)境已安裝 Node.js 和 npm/yarn。
本地已安裝 SSH 客戶端 (如 OpenSSH)。
服務(wù)器已安裝 Nginx。
擁有服務(wù)器的 SSH 登錄權(quán)限 (用戶名和密碼或密鑰對)。

詳細步驟：

1. 本地構(gòu)建 Vue 項目

打開終端，進入你的 Vue 項目根目錄。
運行構(gòu)建命令生成靜態(tài)文件：
```
npm run build
# 或者使用 yarn
yarn build
```
構(gòu)建完成后，項目目錄下會生成一個 dist 文件夾。這個文件夾里包含了所有優(yōu)化壓縮后的 HTML、CSS、JavaScript 和靜態(tài)資源文件。這就是你需要上傳到服務(wù)器的內(nèi)容。

2. 服務(wù)器環(huán)境準(zhǔn)備

登錄服務(wù)器： 使用 SSH 登錄你的阿里云服務(wù)器。

ssh username@your_server_ip
# 如果使用密鑰，可能需要指定密鑰路徑
ssh -i /path/to/your-key.pem username@your_server_ip

安裝 Nginx (如果未安裝)：

Ubuntu:
```
sudo apt update
sudo apt install nginx
```
CentOS:
```
sudo yum update
sudo yum install nginx
```

啟動并設(shè)置 Nginx 開機自啟：

sudo systemctl start nginx
sudo systemctl enable nginx

配置防火墻 (如果啟用)： 確保防火墻允許 HTTP (端口 80) 和 HTTPS (端口 443) 的流量。阿里云安全組也需要在控制臺開放這些端口。
- Ubuntu (ufw):
```
sudo ufw allow 'Nginx Full' # 允許 HTTP(80) 和 HTTPS(443)
```
- CentOS (firewalld):
```
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload
```

3. 上傳構(gòu)建文件到服務(wù)器

在本地終端 (不是在服務(wù)器上)，使用 scp 命令將 dist 文件夾上傳到服務(wù)器的一個目錄。選擇一個合適的目錄，例如 /var/www/your_project_name 或用戶家目錄下的某個位置。
```
scp -r /path/to/your/local/vue-project/dist username@your_server_ip:/path/to/target/directory/on/server
# 示例： scp -r ./dist user@123.123.123.123:/var/www/my-vue-app
```
- -r: 遞歸復(fù)制整個目錄。
- 替換 /path/to/your/local/vue-project/dist 為你的本地 dist 文件夾的實際路徑。
- 替換 username 為你的服務(wù)器用戶名。
- 替換 your_server_ip 為你的服務(wù)器公網(wǎng) IP 地址。
- 替換 /path/to/target/directory/on/server 為你想存放 dist 文件夾內(nèi)容的服務(wù)器目標(biāo)路徑。確保該目錄存在，或者先登錄服務(wù)器創(chuàng)建它 (mkdir -p /path/to/target/directory)。

4. 配置 Nginx

登錄服務(wù)器。
創(chuàng)建一個新的 Nginx 服務(wù)器塊 (Server Block) 配置文件。通常放在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ (Ubuntu) 并在 sites-enabled/ 創(chuàng)建符號鏈接。這里以 /etc/nginx/conf.d/ 為例：
```
sudo nano /etc/nginx/conf.d/your_project_name.conf
```

在打開的編輯器中，輸入類似下面的配置：

server {
    listen 80;
    server_name your_domain.com www.your_domain.com; # 替換為你的域名，或者用服務(wù)器IP時寫 _ (下劃線)
    # server_name _; # 如果沒有域名，使用 IP 訪問，可以用這個

    root /path/to/your/dist/folder/on/server; # 替換為 dist 文件夾在服務(wù)器上的實際路徑
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 對于 Vue Router 的 history 模式非常重要
    }

    # 可選：配置錯誤頁面
    error_page 404 /index.html;
}

關(guān)鍵點：
- root: 必須指向你上傳的 dist 文件夾的路徑。
- try_files $uri $uri/ /index.html;: 這是處理前端路由 (如 Vue Router 的 history 模式) 的關(guān)鍵。它告訴 Nginx 在找不到文件時嘗試加載 index.html，由 Vue 應(yīng)用處理路由。
- server_name: 如果你有域名，填域名。如果只用 IP 訪問，可以寫 server_name _;。

保存并退出編輯器 (在 nano 中按 Ctrl + O 保存，Ctrl + X 退出)。
測試 Nginx 配置： 運行以下命令檢查配置文件語法是否正確：
```
sudo nginx -t
```
如果輸出顯示 syntax is ok 和 test is successful，則配置正確。
重新加載 Nginx: 讓新的配置生效：
```
sudo systemctl reload nginx
```

5. 訪問你的應(yīng)用

打開瀏覽器。
訪問你的服務(wù)器公網(wǎng) IP 地址 (例如 http://123.123.123.123) 或者你配置的域名 (例如 http://your_domain.com)。
如果一切配置正確，你應(yīng)該能看到部署好的 Vue 應(yīng)用了。

補充說明：

HTTPS (SSL/TLS): 強烈建議在生產(chǎn)環(huán)境中使用 HTTPS。你需要獲取 SSL 證書 (可以從阿里云 SSL 證書服務(wù)購買或使用 Let’s Encrypt 免費證書)，并在 Nginx 配置中添加監(jiān)聽 443 端口的 server 塊，配置 ssl_certificate 和 ssl_certificate_key 路徑。配置完成后也需要 sudo nginx -t 和 sudo systemctl reload nginx。
域名綁定： 如果你使用域名，需要在你的域名注冊商處將域名解析 (A 記錄) 指向你的阿里云服務(wù)器的公網(wǎng) IP 地址。阿里云域名解析在阿里云 DNS 控制臺操作。
權(quán)限問題： 確保 Nginx 進程 (通常是 www-data 或 nginx 用戶) 對你上傳的 dist 文件夾及其內(nèi)容有讀取權(quán)限。如果遇到 403 Forbidden 錯誤，檢查權(quán)限 (ls -l /path/to/dist) 并可能需要修改 (sudo chmod -R 755 /path/to/dist, sudo chown -R nginx:nginx /path/to/dist - 根據(jù)你的 Nginx 用戶調(diào)整)。
路由刷新問題： 如果使用 Vue Router 的 history 模式，并且刷新頁面時出現(xiàn) 404，一定是 Nginx 配置中缺少或錯誤配置了 try_files $uri $uri/ /index.html; 這行。仔細檢查。