如何将Next.js+TypeScript+Golang+PostgreSQL Web应用转为桌面应用

整体思路 #

核心是把前端静态资源、编译后的后端可执行文件、本地嵌入式数据库打包到桌面应用壳（Electron/Tauri）中，启动时自动拉起后端服务，加载前端页面，最终生成可离线使用的exe和Windows安装包。

步骤1：处理后端（Golang Echo） #

1.1 编译为Windows可执行文件 #

在Golang项目根目录执行交叉编译命令，生成Windows平台的后端exe：

GOOS=windows GOARCH=amd64 go build -o backend.exe main.go

1.2 适配离线数据库 #

因为要离线使用，不能依赖远程PostgreSQL，二选一：

• 方案A：迁移到SQLite（推荐轻量）
  改用Golang的github.com/mattn/go-sqlite3驱动，修改后端数据库连接代码，把PostgreSQL的SQL语法适配为SQLite（比如去掉SERIAL改用INTEGER PRIMARY KEY AUTOINCREMENT），最终生成单个database.db文件，方便打包。
• 方案B：嵌入式PostgreSQL
  下载Windows版PostgreSQL的二进制压缩包（比如pgsql文件夹），和后端exe放在一起。后端启动时先检查本地Postgres服务是否运行，未运行则调用pgsql/bin/pg_ctl.exe start启动服务，再连接本地数据库。

步骤2：处理前端（Next.js+TypeScript） #

把Next.js项目编译为纯静态资源，无需Node.js环境即可运行：

next build && next export

执行后会生成out文件夹，里面是所有前端静态文件（HTML/CSS/JS）。

步骤3：用Electron打包成桌面应用 #

Electron是成熟的Web转桌面方案，兼容性好：

3.1 初始化Electron环境 #

在项目根目录新建electron文件夹，初始化并安装依赖：

cd electron
npm init -y
npm install electron --save-dev
npm install electron-packager --save-dev

3.2 编写Electron主进程代码（main.js） #

实现启动后端、加载前端的逻辑：

const { app, BrowserWindow } = require('electron');
const { spawn } = require('child_process');
const path = require('path');

let backendProcess;
let mainWindow;

function createWindow() {
  // 创建应用窗口
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true
    }
  });

  // 启动后端服务
  const backendPath = path.join(__dirname, '../backend.exe');
  backendProcess = spawn(backendPath);

  // 监听后端日志（调试用）
  backendProcess.stdout.on('data', (data) => console.log(`Backend: ${data}`));
  backendProcess.stderr.on('data', (data) => console.error(`Backend Error: ${data}`));

  // 加载前端静态页面
  mainWindow.loadFile(path.join(__dirname, '../out/index.html'));

  // 关闭窗口时终止后端进程
  mainWindow.on('closed', () => {
    mainWindow = null;
    backendProcess?.kill();
  });
}

// Electron生命周期处理
app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
    backendProcess?.kill();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

3.3 配置打包脚本 #

修改electron/package.json的scripts：

"scripts": {
  "start": "electron .",
  "package": "electron-packager . MyApp --platform=win32 --arch=x64 --out=dist --overwrite"
}

3.4 打包生成桌面exe #

执行命令：

npm run package

打包完成后，electron/dist/MyApp-win32-x64文件夹里的MyApp.exe就是可直接运行的桌面应用。

步骤4：制作Windows安装程序 #

用Inno Setup生成标准Windows安装包（支持创建快捷方式、选择安装路径、卸载功能）：

1. 下载安装Inno Setup，新建脚本文件（比如installer.iss）
2. 编写打包脚本示例：

[Setup]
AppName=我的Web应用
AppVersion=1.0
DefaultDirName={autopf}\我的Web应用
DefaultGroupName=我的Web应用
OutputDir=../installer
OutputBaseFilename=MyAppInstaller

[Files]
; 打包Electron生成的应用文件
Source: "electron/dist/MyApp-win32-x64/*"; DestDir: "{app}"; Flags: recursesubdirs createallsubdirs
; 打包后端exe
Source: "backend.exe"; DestDir: "{app}"
; 打包数据库文件（SQLite的db或嵌入式Postgres文件夹）
Source: "database.db"; DestDir: "{app}"
; Source: "pgsql/*"; DestDir: "{app}\pgsql"; Flags: recursesubdirs createallsubdirs

[Icons]
; 创建开始菜单快捷方式
Name: "{group}\我的Web应用"; Filename: "{app}\MyApp.exe"
; 创建桌面快捷方式
Name: "{commondesktop}\我的Web应用"; Filename: "{app}\MyApp.exe"

[Run]
; 安装完成后自动启动应用
Filename: "{app}\MyApp.exe"; Description: "启动我的Web应用"; Flags: nowait postinstall skipifsilent

3. 运行Inno Setup编译脚本，即可得到带安装向导的Windows exe安装程序。

可选：用Tauri替代Electron #

Tauri更轻量（打包后体积更小），步骤类似：

1. 初始化Tauri项目：npm create tauri-app
2. 在tauri.conf.json中配置distDir为Next.js的out文件夹路径
3. 在src-tauri/src/main.rs中添加启动后端进程的代码（用std::process::Command）
4. 执行npm run tauri build，自动生成Windows安装包（位于src-tauri/target/release/bundle/nsis）

关键注意事项 #

• 数据库初始化：后端第一次启动时，自动执行迁移脚本创建表和初始数据
• 端口冲突：后端可使用随机端口，前端通过Electron的IPC获取后端地址，避免固定端口被占用
• 资源本地化：确保前端所有请求都指向本地后端，无远程资源依赖

内容的提问来源于stack exchange，提问作者fauzancodes