【译】设置一个简单的electron更新服务以及electron如何配置

如果您使用的是electron,则可能会发现自己需要对已部署的应用程序进行新的更改。为了实现这一目标,您需要设置一个服务器,其中包含更新工件,以便电子可以在发布新版本时收听并进行更新。

本教程将展示如何制作自己的简单更新服务器。该服务器由两部分组成:后端REST服务器,可以处理文件上载;以及静态文件服务器,可以显示这些文件。本示例在Ubuntu 18.04 EC2实例(t2.micro,30 GB EBS存储)上运行。

首先,请确保安装依赖项

  • 节点-最好是节点10+,通过nvm安装
  • Docker-这将用于启动一个Apache服务器,该服务器将充当我们的静态文件服务器并公开更新工件

创建REST服务器

为该应用程序创建一个新文件夹并设置项目。使用 yarn 或npm。打开终端并运行。

npm i -g yarn
mkdir simple-update-server
cd simple-update-server
yarn init  # Make the necessary configuration or leave as default

添加以下包作为依赖

yarn add express express-fileupload morgan

在package.json文件中,添加脚本以启动服务器

"scripts": {
  "start": "node index.js",
  "prestart": "mkdir -p files/ && chown -R ubuntu:ubuntu files/"
},

prestart hook在您的项目中创建一个 files/ 目录,并使当前用户成为该文件夹的所有者。将ubuntu更改为当前用户。

创建一个名为config.js的文件。这使我们可以创建自定义身份验证密钥,以作为标头传递给REST服务器。这是完全可选的

module.exports = {
  AUTH_TOKEN: '<Set an auth token here>',
}

最后,为服务器的主要逻辑创建index.js文件。

const path = require('path');
const express = require('express');
const fileUpload = require('express-fileupload');
const morgan = require('morgan');

const { AUTH_TOKEN } = require('./config');

const app = express();

const PORT = 3030;
const FILES_STORE = path.join(__dirname, 'files/');

app.use(fileUpload());
app.use(morgan('dev'));

app.get('/ping', (req, res) => {
  const authToken = req.get('Authorization');
  if (!authToken || authToken !== AUTH_TOKEN) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  return res.status(200).json({ message: 'Server is up!' });
});

app.post('/upload', (req, res) => {
  const authToken = req.get('Authorization');
  if (!authToken || authToken !== AUTH_TOKEN) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).json({ message: 'No files were uploaded.' });
  }

  const files = req.files.File;

  if (Array.isArray(files)) {
    for (let index = 0; index < files.length; index += 1) {
      const file = files[index];
      const path = `${FILES_STORE}${file.name}`;
      file.mv(path, (err) => {
        if (err) {
          console.log(err);
          return res.status(500).json({ message: 'An error occured during upload, please try again' });
        }
      });
    }
  } else {
    const path = `${FILES_STORE}${files.name}`;
    files.mv(path, (err) => {
      if (err) {
        console.log(err);
        return res.status(500).json({ message: 'An error occured during upload, please try again' });
      }
    });
  }

  return res.status(200).json({ message: 'Files were uploaded' });
});

app.listen(PORT, () => {
  console.log(`Express server listening on port ${PORT}`);
});

yarn start运行服务器。您应该看到自动创建的文件/目录。

服务器公开2个端点。/ping检查服务器是否已启动并正在运行,并且/upload接收文件并将它们移至files /目录。

测试API:可以使用Postman(带有表单数据)或运行cURL命令,如下所示。您可以添加任意数量的文件,只需添加更多-F标志。如果成功,您应该看到将文件上传到 files/ 目录。

curl -X POST -H 'Authorization: <Your Auth Token>' -F 'File=@<path/to/file1>' -F 'File=@<path/to/file2> http://<Your server IP>:3030/upload

创建静态文件服务器

我们可以使用docker创建一个Apache容器,并从更早的位置将files /目录作为绑定挂载。在终端中运行以下命令。

docker run -dit --name simple-update-file-server -p 5080:80 -v ~/simple-update-server/files:/usr/local/apache2/htdocs/:ro httpd:2.4

-v标志安装目录source:destination。之后的:ro使其成为只读装载。确保将源目录更改为项目所在的位置。原始端口号和容器名称可以设置为您的首选项。

去<您的IP>:5080,并确保您的文件在那里。如果看到它们,则服务器已完成!

配置 Electron

现在已经设置了服务器,我们需要在Electron客户端中进行一些更改以侦听该服务器以进行更新。此示例将使用electron-builder 和 electron-updater。
我们需要为electron-builder设置通用服务器选项,以便electron可以在此处监听更新。在您应用的package.json中,在build属性中设置以下内容。

"publish": [
  {
    "provider": "generic",
    "url": "http://<Your server IP>:5080/"
  }
],

在您的electronic.js文件中,添加以下内容以处理更新下载事件。您也可以处理此处定义的其他事件。

const {
  dialog,
} = require('electron');
const { autoUpdater } = require('electron-updater');

autoUpdater.on('update-downloaded', (info) => {
  const dialogOpts = {
    type: 'info',
    buttons: ['Restart', 'Update'],
    title: 'Application Update',
    detail: 'A new version has been downloaded. Restart the application to apply the updates.'
  };

  dialog.showMessageBox(dialogOpts, (response) => {
    if (response === 0) { 
      autoUpdater.quitAndInstall();
    }
  });
});

在你的 app.on('ready'... 函数事件中, 确保你调用了 autoUpdater.checkForUpdates()

app.on('ready', function() {
    autoUpdater.checkForUpdates();
});

全部步骤

  1. 发布应用使用 electron-builder
  2. dist/ 文件夹中上传工件
    (除*-unpacked文件夹和builder-effective-config.yaml文件之外*)
  3. 通过文件服务器下载应用程序
  4. 运行应用程序
  5. 更新客户端应用程序的package.json,然后再次重复1-2。
  6. 运行该应用程序,您现在应该看到更新提示。

如果成功看到更新提示,则更新服务器已完成!

原文地址

可以参考官方文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WMSmile

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值