这是一篇学习记录文档，主要是记录使用 Flutter Web + Springboot 搭建的前后端分离系统时的部署过程。在部署前，我们假设你已经：

1. 准备好了一台 Linux 服务器（我使用的是 Ubuntu 22.04.1 LTS）；
2. 在这台服务器上，安装 好了 Nginx；
3. Flutter 应用已经打包成 Web 代码；
4. Springboot 已经打包成 Jar 包。

部署 Springboot

需要开启 跨域请求。

一个简单的请求

以一个简单的请求 User 为例：

@RestController
@CrossOrigin(origins = "*") // 开启局部跨域
public class MyController {
    public static final String[] NAMES = {"Zhang San", "Wang Wu", "Zhao liu", "Cai Qi"};
    public static final int[] AGES = {23, 24, 25, 26, 27};

    @GetMapping("/user")
    public User user() {
        int index = ((int) (Math.random() * 10)) % 4;
        return new User(NAMES[index], AGES[index]);
    }
}

User 数据类的定义：

public class User {
    public String name;
    public int age;

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

开始部署

运行 Springboot 项目，若是调试阶段：

java -jar <your_project_name>.jar

若是开发阶段：

nohup java -jar <your_project_name>.jar > catalina.out 2>&1 &

若端口占用，可以先查询谁占用了端口 lsof -i:8080，然后通过 kill -9 <进程号> 的方式杀掉进程。

我的端口号默认的是 8080，然后输入服务器的 IP 地址：192.168.222.134:8080/user，然后正确输出 user 数据，即表明测试项目启动成功。

部署 Flutter Web

一个简单 Web

通过 flutter create hi-flutter 命令创建了一个简单的 Flutter Web 应用，然后修改了一处代码，修改后如下：

class _MyHomePageState extends State<MyHomePage> {
    List users = [];
    Future<void> _incrementCounter() async {
    Response response = await Dio().get("http://192.168.222.128:8080/user");
    print(response.data);
    var data = response.data["name"];
    users.add(data);
    setState(() {
      users = users;
    });
  }
  // 省略若干行代码...
}

开始部署

通过 flutter build web 打包 Flutter 应用后，可以看到在 build 文件夹下多了一个 web 目录，然后把整个目录拷贝到 Nginx 的 web 路径下（默认路径应该在 /var/www/html）。

记得让 Nginx 的文件指向到项目中的 index.html 路径上。

最后，输入地址，即可看到访问成功。