Vue部署项目到阿里云云服务器的实现步骤

部署 Vue 项目到阿里云云服务器 (CentOS/Ubuntu 为例)

核心步骤： 在本地构建 Vue 项目生成静态文件，然后将这些文件上传到服务器，并使用 Nginx 作为 Web 服务器提供服务。

前提条件：

1. 一台运行 Linux (如 CentOS 或 Ubuntu) 的阿里云 ECS 实例。
2. 本地开发环境已安装 Node.js 和 npm/yarn。
3. 本地已安装 SSH 客户端 (如 OpenSSH)。
4. 服务器已安装 Nginx。
5. 拥有服务器的 SSH 登录权限 (用户名和密码或密钥对)。

详细步骤：

1. 本地构建 Vue 项目

• 打开终端，进入你的 Vue 项目根目录。
• 运行构建命令生成静态文件：

  npm run build
  # 或者使用 yarn
  yarn build
  

• 构建完成后，项目目录下会生成一个 dist 文件夹。这个文件夹里包含了所有优化压缩后的 HTML、CSS、JavaScript 和静态资源文件。这就是你需要上传到服务器的内容。

2. 服务器环境准备

• 登录服务器： 使用 SSH 登录你的阿里云服务器。

  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
    

• 启动并设置 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. 上传构建文件到服务器

• 在本地终端 (不是在服务器上)，使用 scp 命令将 dist 文件夹上传到服务器的一个目录。选择一个合适的目录，例如 /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: 递归复制整个目录。
  • 替换 /path/to/your/local/vue-project/dist 为你的本地 dist 文件夹的实际路径。
  • 替换 username 为你的服务器用户名。
  • 替换 your_server_ip 为你的服务器公网 IP 地址。
  • 替换 /path/to/target/directory/on/server 为你想存放 dist 文件夹内容的服务器目标路径。确保该目录存在，或者先登录服务器创建它 (mkdir -p /path/to/target/directory)。

4. 配置 Nginx

• 登录服务器。
• 创建一个新的 Nginx 服务器块 (Server Block) 配置文件。通常放在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ (Ubuntu) 并在 sites-enabled/ 创建符号链接。这里以 /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; # 替换为你的域名，或者用服务器IP时写 _ (下划线)
      # server_name _; # 如果没有域名，使用 IP 访问，可以用这个
  
      root /path/to/your/dist/folder/on/server; # 替换为 dist 文件夹在服务器上的实际路径
      index index.html;
  
      location / {
          try_files $uri $uri/ /index.html; # 对于 Vue Router 的 history 模式非常重要
      }
  
      # 可选：配置错误页面
      error_page 404 /index.html;
  }
  

  • 关键点：
    • root: 必须指向你上传的 dist 文件夹的路径。
    • try_files $uri $uri/ /index.html;: 这是处理前端路由 (如 Vue Router 的 history 模式) 的关键。它告诉 Nginx 在找不到文件时尝试加载 index.html，由 Vue 应用处理路由。
    • 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. 访问你的应用

• 打开浏览器。
• 访问你的服务器公网 IP 地址 (例如 http://123.123.123.123) 或者你配置的域名 (例如 http://your_domain.com)。
• 如果一切配置正确，你应该能看到部署好的 Vue 应用了。

补充说明：

• HTTPS (SSL/TLS): 强烈建议在生产环境中使用 HTTPS。你需要获取 SSL 证书 (可以从阿里云 SSL 证书服务购买或使用 Let’s Encrypt 免费证书)，并在 Nginx 配置中添加监听 443 端口的 server 块，配置 ssl_certificate 和 ssl_certificate_key 路径。配置完成后也需要 sudo nginx -t 和 sudo systemctl reload nginx。
• 域名绑定： 如果你使用域名，需要在你的域名注册商处将域名解析 (A 记录) 指向你的阿里云服务器的公网 IP 地址。阿里云域名解析在阿里云 DNS 控制台操作。
• 权限问题： 确保 Nginx 进程 (通常是 www-data 或 nginx 用户) 对你上传的 dist 文件夹及其内容有读取权限。如果遇到 403 Forbidden 错误，检查权限 (ls -l /path/to/dist) 并可能需要修改 (sudo chmod -R 755 /path/to/dist, sudo chown -R nginx:nginx /path/to/dist - 根据你的 Nginx 用户调整)。
• 路由刷新问题： 如果使用 Vue Router 的 history 模式，并且刷新页面时出现 404，一定是 Nginx 配置中缺少或错误配置了 try_files $uri $uri/ /index.html; 这行。仔细检查。

按照以上步骤操作，你应该能够成功地将你的 Vue 项目部署到阿里云服务器上。

到此这篇关于Vue部署项目到阿里云云服务器的文章就介绍到这了,更多相关Vue部署项目到阿里云内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论