走啊走
加油

阿里云用轻量应用服务器部署vue项目？

2026-03-31 01:30:18 分类：阿里云ECS
服务器价格表

使用阿里云轻量应用服务器（Simple Application Server）部署 Vue 项目是一个非常主流且高性价比的方案。由于 Vue 是前端框架，通常只需要一个静态文件托管服务即可，但为了配合后端接口或实现更复杂的构建流程，我们通常会采用 Nginx 反向X_X + Node.js 环境 的方式。

以下是完整的部署流程和关键注意事项：

1. 前期准备

在开始之前，请确保你拥有：

  • 一台已购买的阿里云轻量应用服务器（推荐 Ubuntu 20.04/22.04 或 CentOS 7/8）。
  • 本地开发好的 Vue 项目代码（包含 package.json）。
  • 基础的网络知识（SSH 连接、Git 等）。

2. 服务器环境安装

登录到服务器后，首先需要安装运行环境。推荐使用 Nginx 作为 Web 服务器，并安装 Node.js 用于执行打包命令（如果不想在服务器上装 Node，也可以直接在本地打包好 dist 文件夹上传）。

A. 更新系统并安装 Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx -y

# CentOS/RHEL
sudo yum update
sudo yum install nginx -y

B. 安装 Node.js (可选)

如果你打算在服务器上直接运行 npm run build，则需要安装 Node.js。推荐使用 nvm 管理版本：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v
npm -v

注：如果选择本地打包，此步可跳过。

3. 代码部署方式

有两种主要策略，取决于你的工作流：

方案一：本地打包，上传 dist 目录（推荐，稳定简单）

这种方式将构建过程放在本地电脑完成，服务器只负责托管静态资源，性能最稳，不易出错。

  1. 本地构建：
    在本地终端运行：

    npm run build

    这会生成一个 dist 文件夹。

  2. 上传文件：
    使用 scp 命令或 FTP 工具（如 FileZilla）将 dist 文件夹内容上传到服务器的某个目录，例如 /var/www/my-vue-app。

    scp -r ./dist/* root@<服务器IP>:/var/www/my-vue-app/

方案二：Git 拉取，服务器构建

适合需要频繁更新且希望自动化程度高的场景。

  1. 在服务器上安装 Git。
  2. 克隆你的代码仓库。
  3. 安装依赖并构建： 
    cd /path/to/project
npm install
npm run build

4. 配置 Nginx

Vue 项目通常使用了 HTML5 History 模式（路由不带 .html），因此必须配置 Nginx 将所有非静态文件请求重定向到 index.html，否则刷新页面会报 404。

编辑 Nginx 配置文件（Ubuntu 通常在 /etc/nginx/sites-available/default，CentOS 在 /etc/nginx/conf.d/default.conf）：

server {
    listen 80;
    server_name your_domain_or_ip; # 替换为你的域名或服务器 IP

    # 根目录指向你上传 dist 的文件夹
    root /var/www/my-vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;

        # 解决跨域问题（如果需要）
        add_header Access-Control-Allow-Origin *;
    }

    # 处理静态资源缓存
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        log_not_found off;
    }
}

生效配置：

sudo nginx -t       # 测试配置语法
sudo systemctl restart nginx

5. 配置安全组与防火墙

这是新手最容易忽略的一步。如果访问不了，通常是端口被拦截了。

  1. 阿里云控制台设置：

    • 进入【云服务器 ECS】->【实例】->【安全组】。
    • 添加规则：放行 TCP 80 端口（HTTP）。
    • 如果有 HTTPS 需求，还需放行 TCP 443。

  2. 服务器内部防火墙（如果开启了）：

    # Ubuntu (UFW)
sudo ufw allow 80/tcp
sudo ufw reload

# CentOS (firewalld)
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload

6. 常见问题与优化建议

Q: 访问时刷新页面出现 404？

A: 这是典型的 History 模式问题。请检查 Nginx 配置中的 try_files $uri $uri/ /index.html; 是否正确，并确保没有拼写错误。

Q: 生产环境如何获取 API 数据？

Vue 项目中通常有 api 请求。

  • 开发环境：使用 vue.config.js 中的 devServer.proxy。
  • 生产环境：不要硬编码 localhost。建议在 Nginx 层做反向X_X，或者在后端接口地址中使用环境变量。
    Nginx 反向X_X示例：

    location /api/ {
  proxy_pass http://localhost:3000; # 假设你的后端跑在 3000 端口
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

Q: 如何自动更新代码？

可以使用简单的 Shell 脚本配合 crontab 定时任务，或者使用 CI/CD 工具（如 GitHub Actions + SSH 插件）在推送代码后自动触发 git pull && npm run build。

总结

对于轻量应用服务器，“本地构建 -> 上传 dist -> Nginx 托管” 是最稳健的方案。它避免了服务器内存不足导致构建失败的风险，同时利用 Nginx 的高效性处理静态资源分发。只需注意配置好 try_files 以支持前端路由，并开放 80 端口即可上线。

相关推荐