【译】设置一个简单的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. 运行该应用程序,您现在应该看到更新提示。

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

原文地址

原文地址:https://blog.csdn.net/wm9028/article/details/113877616

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要讲解了“electron打包中的坑如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“electron...
这篇文章主要介绍“electron打包的坑如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“electron打包的坑如何...
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟...
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内,和之前的vue-cli搭建项目流程没有任何区别 GIT地址:https://github.com/SimulatedGREG/electron-vue 搭建项目:1.全局安装脚手架:npminstall--globalvue-cli
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron,并测试。如下图
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
前言本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览器打开,还是有人会用别的浏览器打开,这种情况通常我们会去做适配(前端),最近公司有需求
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装,使用npm安装的有问题(没有尝试),先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
来源:https:/ewsn.net/say/electron-asar.html 在electron中,asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下,这些代码逻辑,是放置在resource/app目录下面的,明文可见,这样的话,也就有了代码加密(asar打包)的需求 asar如何解密加密?electron的asar的
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
在electron-vue中使用了字体图标,但是打包成.exe文件后图标不显示,路劲问题把字体图标放到static目录下就可以了,静态图片也一样我原来放在其它地方不行改到static目录就可以了
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法:单独设置electron为淘宝镜像,npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装,不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题(就
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG:<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
一.什么是Electron?它和NW.js的区别是什么?Electron是GitHub开发的桌面应用开发框架,它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是:1.整合Chromium和Node.js的方式不同。在NW.js中,Chromium是直接被打补丁打进去
1.打开父子模态创建,<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#