美文网首页
【译】设置一个简单的electron更新服务以及electron

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

作者: WMSmile | 来源:发表于2021-02-20 10:53 被阅读0次

    如果您使用的是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. 运行该应用程序,您现在应该看到更新提示。

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

    原文地址
    官方文档

    相关文章

      网友评论

          本文标题:【译】设置一个简单的electron更新服务以及electron

          本文链接:https://www.haomeiwen.com/subject/qjytfltx.html