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

2026-03-20 17:45:22 分类：云知识

使用阿里云轻量应用服务器（Lightweight Application Server，简称“轻量”）部署 Vue 项目是一个非常主流且性价比高的方案。轻量服务器通常预装了操作系统和基础环境，非常适合中小型项目或学习场景。

以下是完整的部署流程，分为 准备阶段、环境搭建、代码部署、Nginx 配置 和 域名解析 五个步骤。

第一步：购买与系统选择

  1. 登录阿里云控制台，购买一台轻量应用服务器。
  2. 镜像选择：建议选择 Ubuntu 20.04 或 Debian 11，或者国内用户常用的 CentOS 7/8。推荐 Ubuntu，因为社区教程多，软件安装方便。
  3. 安全组设置：在购买时或后续在控制台的安全组中，确保放行以下端口：
    • 80 (HTTP)
    • 443 (HTTPS，可选)
    • 22 (SSH)

第二步：连接服务器并安装基础环境

通过 SSH 工具（如 Terminal, Xshell, SecureCRT）或阿里云控制台的“远程连接”登录服务器。

1. 更新系统

# Ubuntu/Debian
sudo apt update && sudo apt upgrade -y

# CentOS
sudo yum update -y

2. 安装 Node.js 和 npm

推荐使用 nvm (Node Version Manager) 来管理版本，避免权限问题。

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载环境变量
source ~/.bashrc

# 安装最新稳定版 Node.js (例如 v18.x)
nvm install 18
nvm use 18
nvm alias default 18

# 验证安装
node -v
npm -v

3. 安装 Nginx

Nginx 用于托管编译后的静态文件并提供反向X_X。

# Ubuntu/Debian
sudo apt install nginx -y

# CentOS
sudo yum install nginx -y

# 启动并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

第三步：上传代码到服务器

你有两种主要方式将本地 Vue 项目传到服务器：

方法 A：使用 Git（推荐）

如果你的项目已经托管在 GitHub/Gitee/GitLab：

# 安装 git
sudo apt install git -y

# 克隆代码
git clone <你的仓库地址>
cd <项目文件夹>

方法 B：使用 SFTP/SCP

如果代码在本地未推送到远程仓库，可以使用 scp 命令：

# 在本地终端执行
scp -r ./dist/* root@<服务器IP>:/var/www/my-vue-project/
# 注意：dist 目录需要在本地先构建好，或者传源码后在服务器上构建

更推荐的做法是：将源代码（src 等）传到服务器，然后在服务器上运行 npm install 和 npm run build，这样能确保依赖包一致。

第四步：在服务器上构建项目

进入项目目录，安装依赖并打包生成静态文件。

# 进入项目目录
cd /path/to/your/project

# 安装依赖
npm install 
# 或者指定淘宝镜像提速
npm config set registry https://registry.npmmirror.com
npm install

# 构建生产环境
npm run build

构建完成后，你会得到一个 dist 目录，里面包含了 index.html, .js, .css 等静态资源。

第五步：配置 Nginx

这是最关键的一步，需要解决 Vue Router 的 History 模式刷新 404 问题。

  1. 创建站点配置文件：

    sudo nano /etc/nginx/sites-available/vue-app

  2. 写入以下内容（请根据实际情况修改 root 路径）：

    server {
   listen 80;
   server_name your_domain.com; # 如果是 IP 访问，可以留空或填 IP

   # 指向 dist 目录
   root /var/www/my-vue-project/dist;
   index index.html;

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

   # 如果需要配置后端 API 反向X_X，取消下面注释
   # location /api/ {
   #     proxy_pass http://127.0.0.1:3000;
   #     proxy_set_header Host $host;
   #     proxy_set_header X-Real-IP $remote_addr;
   # }
}

  3. 启用站点（Ubuntu 示例）：

    # 创建软链接
sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/

# 删除默认配置（防止冲突）
sudo rm /etc/nginx/sites-enabled/default

# 测试配置是否正确
sudo nginx -t

# 重载 Nginx
sudo systemctl reload nginx

第六步：域名解析与 HTTPS（可选但推荐）

  1. 域名解析：
    如果你有域名，在阿里云 DNS 控制台添加一条 A 记录，将域名指向轻量服务器的公网 IP。

  2. 申请 SSL 证书：
    轻量应用服务器控制台通常提供“一键申请免费 SSL 证书”的功能。

    • 进入控制台 -> 点击你的实例 -> 右侧“更多” -> “SSL 证书”。
    • 申请证书后，会自动配置到 Nginx 上，无需手动修改配置。

常见问题排查

  1. 刷新页面 404：
    检查 Nginx 配置中的 try_files $uri $uri/ /index.html; 是否生效。这是 History 模式的标配。

  2. 端口被占用：
    如果提示 bind() to 0.0.0.0:80 failed，可能是其他服务占用了 80 端口，或者防火墙拦截。

    • 查看端口占用：sudo netstat -tunlp | grep :80
    • 检查防火墙：sudo ufw status (Ubuntu) 或 firewall-cmd --list-all (CentOS)。

  3. Node 版本不兼容：
    如果本地用 Node 16 开发，服务器用 Node 18 报错，可以在项目中创建 .nvmrc 文件指定版本，或使用 nvm use <version> 切换。

通过以上步骤，你的 Vue 项目就可以通过 http://你的IP 或 http://你的域名 正常访问了。

未经允许不得转载：CLOUD云枢 » 阿里云用轻量应用服务器部署vue项目？

相关推荐