【译】设置一个简单的electron更新服务以及electron如何配置
如果您使用的是electron,则可能会发现自己需要对已部署的应用程序进行新的更改。为了实现这一目标,您需要设置一个服务器,其中包含更新工件,以便电子可以在发布新版本时收听并进行更新。本教程将展示如何制作自己的简单更新服务器。该服务器由两部分组成:后端REST服务器,可以处理文件上载;以及静态文件服务器,可以显示这些文件。本示例在Ubuntu 18.04 EC2实例(t2.micro,30 GB
如果您使用的是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();
});
全部步骤
- 发布应用使用 electron-builder
- 从 dist/ 文件夹中上传工件
(除*-unpacked文件夹和builder-effective-config.yaml文件之外*) - 通过文件服务器下载应用程序
- 运行应用程序
- 更新客户端应用程序的package.json,然后再次重复1-2。
- 运行该应用程序,您现在应该看到更新提示。
如果成功看到更新提示,则更新服务器已完成!
更多推荐
所有评论(0)