引言

在当前的前后端分离架构中，Vue项目作为前端框架被广泛使用，而Nginx则作为反向代理服务器，负责处理静态资源请求和转发动态请求。本文将深入探讨Vue项目与Nginx的完美转发之道，包括跨域配置、动静分离以及性能优化等方面。

环境准备

1. Jenkins搭建

首先，我们需要搭建一个Jenkins环境。可以参考之前的文章《Jenkins孟林洁的博客-CSDN博客》进行搭建。

2. NVM和Nodejs安装

接下来，安装NVM和Nodejs。首先，从GitHub下载最新的nvm：

# 下载nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 验证nvm
nvm version

# 安装nodejs
nvm install 20.10.0

# 使用nodejs
nvm use 20.10.0

# 验证node和npm
node -v
npm -v

3. Nginx安装

最后，下载并解压缩Nginx：

# 下载Nginx
wget http://nginx.org/download/nginx-1.21.6.tar.gz

# 解压缩
tar -zxvf nginx-1.21.6.tar.gz

Jenkins配置

2.1 相关插件安装

在Jenkins中，我们需要安装以下插件：

  • NodeJS
  • Git Parameter

2.2 全局工具安装

在Jenkins中配置Nodejs全局工具：

  1. 在Jenkins的“管理Jenkins”页面中，选择“全局工具配置”。
  2. 在“NodeJS”下，点击“添加NodeJS”。
  3. 输入Nodejs的路径，例如/usr/local/bin/node。

2.3 环境变量配置

配置环境变量，以便在构建过程中使用：

# 配置环境变量
export NODE_ENV=production
export APIHOST='/api/'

2.4 邮箱配置（构建后发送邮件）

在Jenkins的“系统管理”页面中，配置邮件通知。

2.5 任务配置

创建一个Jenkins任务，配置以下参数：

  • Git仓库地址
  • 构建环境（如Linux）
  • 构建工具（如Nodejs）
  • 构建命令（如npm install && npm run build）

Nginx配置

3.1 配置路由转发

编辑Nginx配置文件（通常是nginx.conf或单独的站点配置文件），添加以下配置：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/your/vue/app;
        tryfiles $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend-server-url;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

部署项目

4.1 构建项目

在Jenkins任务中，执行以下命令：

# 清理构建目录
rm -rf dist

# 构建项目
npm install && npm run build

4.2 启动Nginx

# 启动Nginx
nginx

4.3 访问项目

总结

通过以上配置，我们可以轻松实现Vue项目与Nginx的完美转发，包括跨域配置、动静分离以及性能优化等方面。在实际应用中，可以根据具体需求调整Nginx配置，以达到最佳性能。