Vue 前端与 Java 后端在 Linux 服务器上的部署教程及 Nginx 配置

Vue 前端与 Java 后端在 Linux 服务器上的部署教程及 Nginx 配置

本文将详细介绍如何在 Linux 服务器上部署 Vue 前端和 Java 后端应用，并配置 Nginx 作为反向代理服务器。整个过程包括以下几个步骤：

1. 准备工作
2. 部署 Vue 前端应用
3. 部署 Java 后端应用
4. 安装和配置 Nginx
5. 测试与维护

1. 准备工作

1.1 准备服务器

确保你有一个运行 Linux 操作系统的服务器，并拥有该服务器的 SSH 访问权限。常见的 Linux 发行版有 Ubuntu、CentOS 等。以下示例假设使用的是 Ubuntu。

1.2 安装必要的软件

首先，更新系统软件包并安装所需的基础工具：

sudo apt update && sudo apt upgrade -y
sudo apt install -y curl git build-essential

1.3 安装 Node.js 和 npm

Vue 前端应用的构建依赖于 Node.js 和 npm。我们使用 NodeSource 的安装脚本来安装 Node.js。

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

1.4 安装 Java 和 Maven

Java 后端应用通常是用 Spring Boot 等框架构建的，因此需要安装 Java 运行环境和 Maven。

sudo apt install -y openjdk-11-jdk maven

2. 部署 Vue 前端应用

2.1 获取 Vue 项目代码

将 Vue 项目的源代码克隆到服务器上：

git clone <your-vue-repo-url> /path/to/vue-app
cd /path/to/vue-app

2.2 构建 Vue 项目

安装项目依赖并构建项目：

npm install
npm run build

构建完成后，Vue 项目会在 dist 目录中生成静态文件。

3. 部署 Java 后端应用

3.1 获取 Java 项目代码

将 Java 项目的源代码克隆到服务器上：

git clone <your-java-repo-url> /path/to/java-app
cd /path/to/java-app

3.2 构建 Java 项目

使用 Maven 构建项目：

mvn clean package

构建完成后，在 target 目录中会生成一个 .jar 文件，例如 java-app-0.0.1-SNAPSHOT.jar。

3.3 运行 Java 应用

使用以下命令启动 Java 应用：

java -jar /path/to/java-app/target/java-app-0.0.1-SNAPSHOT.jar

为了确保应用在后台运行，可以使用 nohup 或 screen 等工具：

nohup java -jar /path/to/java-app/target/java-app-0.0.1-SNAPSHOT.jar > /dev/null 2>&1 &

4. 安装和配置 Nginx

4.1 安装 Nginx

sudo apt install -y nginx

4.2 配置 Nginx

编辑 Nginx 配置文件，通常位于 /etc/nginx/sites-available/default。你可以创建一个新的配置文件，例如 /etc/nginx/sites-available/my-app，然后创建一个软链接到 sites-enabled 目录。

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

添加以下内容：

server {
    listen 80;
    server_name your_domain_or_ip;

    # Vue 前端
    location / {
        root /path/to/vue-app/dist;
        try_files $uri $uri/ /index.html;
    }

    # Java 后端
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

将 your_domain_or_ip 替换为你的服务器域名或 IP 地址，/path/to/vue-app/dist 替换为 Vue 项目构建后的静态文件目录路径，http://localhost:8080/ 是 Java 后端应用的本地地址。

启用配置：

sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/

4.3 测试并重启 Nginx

测试 Nginx 配置是否正确：

sudo nginx -t

如果没有错误，重启 Nginx 使配置生效：

sudo systemctl restart nginx

5. 测试与维护

5.1 测试部署

通过浏览器访问你的域名或 IP 地址，确保 Vue 前端页面能够正常加载。访问 /api/ 路径，检查是否能够正确代理到 Java 后端服务。

5.2 维护

• 日志监控：查看 Nginx、Java 应用的日志，确保系统正常运行。
• SSL 安全：建议为网站配置 SSL 证书，可以使用免费的 Let’s Encrypt。
• 更新与备份：定期更新服务器和应用程序，并进行数据备份。

通过以上步骤，你已经成功地在 Linux 服务器上部署了 Vue 前端和 Java 后端应用，并使用 Nginx 进行了反向代理配置。这是一个基础的部署流程，根据实际需要，你可以进一步优化和扩展。