将 gRPC 与 Electron 14 一起使用

Posted 2023-03-22

【中文标题】将 gRPC 与 Electron 14 一起使用

【英文标题】：Using gRPC with Electron 14

【发布时间】：2021-11-13 23:21:57

【问题描述】：

我继承了一个 Web 应用程序，它的后端是用 Go 语言编写的，并使用 gRPC 和协议缓冲区与 Angular 8 前端进行通信。老开发者正在使用Wails将Go方法绑定到前端并根据需要构建一个exe。

根据客户需求，我们决定停止使用 Wails 并改用 Electron (14.0.0)。

我想知道是否有一种方法可以将 gRPC 与 Electron 一起使用。我找到的所有教程 涉及旧版本的 Electron。

谢谢！

【参考方案1】：

我之前用过Wails V2，虽然它做得很好。但它有点有限。我切换到 Electron。

我有类似的设置。 Go 中的后端服务器和 Svelte 中的前端。我使用 HTTP 服务器而不是 gRPC。芽过程是一样的。

因此，在将您的应用程序捆绑到电子中时。您需要将后端的二进制文件添加到其他资源中。

然后，从前端启动并连接到 grpc 后端服务器。使用https://github.com/grpc/grpc-node。像这样

const spawn = require('child_process').execFile;

let binaryPath = process.resourcesPath + "/app.asar.unpacked/bin/macos/myapp"

// run server
function startBackend() 
    child = spawn(binaryPath, ['serve', "-p", port, "-s", userDataPath]);

在我的例子中，我使用电子生成器 (https://www.electron.build/) 来构建我的应用程序。

您可以使用extraResources 指令将您的后端二进制文件添加到电子应用程序。

https://www.electron.build/configuration/contents.html#extraresources

或

binaries: ["bin/windows/app.exe"]

asarUnpack: ["bin/windows/app.exe"]

我的应用适用于 MacOS，electron-builder.yaml 看起来像这样。

productName: MyApp
appId: com.electron.$name
remoteBuild: false

compression: normal
npmRebuild: true

asar:
  smartUnpack: true

directories:
  output: out
  buildResources: build

mac:
  category: public.app-category.developer-tools
  icon: ./icons/512x512.png
  darkModeSupport: false
  target:
    - target: dmg
    # - target: zip


  fileAssociations:
    - ext: svg
      role: Viewer
  # extraResources:
  #   - from: "bin/macos/myapp"
  #     to: "bin/macos/myapp"
  #     filter:
  #       - "**/*"

  binaries: ["bin/macos/myapp"]
  asarUnpack: ["bin/macos/myapp"]
    
  hardenedRuntime: false
  gatekeeperAssess: false
  entitlements: "build/macos/entitlements.mac.plist"
  entitlementsInherit: "build/macos/entitlements.mac.plist"
  publish: null
  
dmg:
  sign: true

电子生成器配置示例：https://github.com/twiny/svelte-electron-tailwind/blob/main/electron-builder.yml

【讨论】：

嘿，我尝试将 grpc 模块添加到我的应用程序中，但是，当我尝试构建应用程序时，我得到一个错误堆栈，例如： ./node_modules/@grpc/grpc-js/ 中的错误build/src/resolver-dns.js 未找到模块：错误：无法解析 dns、fs、http、http2。网络、操作系统、tls、zlib

尝试使用npm install @grpc/grpc-js 安装，看看：npmjs.com/package/@grpc/grpc-js