正文

Vue项目轻松部署到DigitalOcean，只需5步，小白也能快速上手！

/0 浏览量
1030

在当今快速发展的互联网时代，掌握如何将Vue项目部署到服务器上是一项非常重要的技能。DigitalOcean作为一家提供简单、快速、安全的服务器托管平台，非常适合新手尝试。下面，就让我带你一步步完成Vue项目的部署吧！

第1步：注册DigitalOcean账户并购买VPS

  1. 访问DigitalOcean官网（https://www.digitalocean.com/）。
  2. 点击“Sign Up”按钮，使用邮箱注册一个新账户。
  3. 注册成功后，进入账户，点击“Create”按钮，选择“Droplets”。
  4. 在“Create a new Droplet”页面，选择适合你的服务器配置。对于新手来说，推荐选择1GB内存、1核心CPU、20GB SSD硬盘的配置。
  5. 选择服务器位置（数据中心），然后填写服务器名称、选择操作系统（推荐Ubuntu 20.04）。
  6. 点击“Add a firewall”并添加SSH访问权限。
  7. 点击“Create”按钮，等待服务器创建完成。

第2步：配置SSH密钥登录

  1. 在服务器创建完成后，会显示服务器的公网IP地址。
  2. 打开终端，使用SSH工具连接到服务器。例如，使用ssh -i /path/to/your/private/key.pem your_username@your_server_ip命令连接。
  3. 首次登录时，服务器会要求你设置密码。输入一个强密码，并确认。
  4. 连接成功后，你可以使用sudo命令执行管理员操作。

第3步：安装Nginx和Node.js

  1. 使用以下命令安装Nginx和Node.js：
sudo apt update
sudo apt install nginx nodejs
  1. 安装完成后，使用以下命令检查Nginx和Node.js版本：
nginx -v
node -v

第4步：配置Nginx反向代理

  1. 创建一个名为vue-frontend的目录，用于存放你的Vue项目：
sudo mkdir /var/www/vue-frontend
  1. 使用cd命令进入该目录：
cd /var/www/vue-frontend
  1. 将你的Vue项目复制到该目录下。
  2. 使用以下命令创建Nginx配置文件：
sudo nano /etc/nginx/sites-available/vue-frontend
  1. 在配置文件中，添加以下内容（根据你的项目结构调整路径）：
server {
    listen 80;
    server_name your_server_ip;
    root /var/www/vue-frontend/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
  1. 重载Nginx配置文件：
sudo ln -s /etc/nginx/sites-available/vue-frontend /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

第5步：访问你的Vue项目

  1. 打开浏览器，输入你的服务器公网IP地址，即可访问你的Vue项目。

至此，你已经成功将Vue项目部署到了DigitalOcean服务器上！整个过程只需5步，相信你已经掌握了这个技能。接下来，你可以根据自己的需求，继续优化和调整你的项目配置。祝你部署顺利！

-- 展开阅读全文 --