下面是“SpringBoot前端后端分离之Nginx服务器下载安装过程”的完整攻略：

SpringBoot前端后端分离之Nginx服务器下载安装过程

1. 下载Nginx

在Nginx的官方网站上（http://nginx.org），选择下载最新版本的Nginx压缩包，解压到指定目录，例如：/usr/local/src/nginx。

$ wget http://nginx.org/download/nginx-1.20.1.tar.gz
$ tar zxvf nginx-1.20.1.tar.gz
$ cd nginx-1.20.1

2. 安装Nginx

安装Nginx之前需要安装相关的依赖库，例如PCRE和zlib。请根据实际情况选择安装或者跳过。

执行configure命令检查依赖库，并指定安装目录为/usr/local/nginx：

$ ./configure --prefix=/usr/local/nginx

执行make命令编译Nginx：

$ make

执行make install命令将编译好的Nginx安装到指定目录：

$ make install

3. 配置Nginx

3.1 修改Nginx配置文件

Nginx的配置文件位于安装目录下的conf目录中，我们需要对其进行修改。

首先备份原始的nginx.conf文件：

$ cd /usr/local/nginx/conf
$ mv nginx.conf nginx.conf.bak

然后新建一个nginx.conf文件，并将以下内容复制到文件中：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;
    gzip  on;

    server {
        listen  80;
        server_name localhost;

        location / {
            root   /data/www;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://backend:8080/api;
        }
    }
}

这个配置文件中定义了一个名为http的块，其中定义了一个名为server的块。这个server块中，我们定义了Nginx监听80端口（可以根据实际情况修改），并设置了两个location。其中，第一个location定义了静态资源的路径和索引页面，第二个location则将应用程序的API请求转发给了后端的8080端口。

3.2 修改host文件

为了能够在前端页面中使用相对路径来访问API服务，需要在host文件中添加一条记录。假设我们的后端服务IP地址为192.168.1.10，请在host文件中添加以下记录：

192.168.1.10 backend

3.3 创建静态资源目录和索引文件

在配置文件中，我们将静态资源路径定义为/data/www，因此需要在该目录下新建静态资源和索引页面。这里以一个示例应用为例，创建一个名为index.html的文件：

$ mkdir -p /data/www
$ echo "Hello, World!" > /data/www/index.html

4. 启动Nginx

在完成配置之后，执行以下命令启动Nginx：

$ /usr/local/nginx/sbin/nginx

5. 验证启动

在浏览器中输入http://localhost/，应该能够看到Hello, World!。在浏览器的控制台中查看网络请求，应该能够看到API请求成功的响应。

示例说明

示例一

假设我们的后端服务提供一个名为hello的API，可以通过GET方法访问，返回一个字符串。我们可以在前端页面的JavaScript代码中使用jQuery来访问这个API服务：

$.ajax({
  url: "/api/hello",
  success: function(result) {
    console.log(result);
  }
});

示例二

假设我们的后端服务提供一个名为add的API，可以通过POST方法访问，接收两个数字参数a和b，并返回它们的和。我们可以在前端页面的JavaScript代码中使用fetch来访问这个API服务：

fetch('/api/add', {
  method: 'POST',
  body: JSON.stringify({a: 1, b: 2}),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));