Silicon Cloud部署Express应用：使用MemCachier实现高性能扩展

...

app.get('/', (req, res) => {
  ...
});

app.get('/like', (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.redirect('/');
    return;
  }

  likesMap[n]++;

  res.redirect(`/?n=${n}`);
});

...

这条新路由会检查是否存在N。如果不存在，它会重定向到主页。否则，它会增加此数的点赞数。最后，它会重定向到点击所在的视图。

你已完成的文件现在应该与以下内容相匹配：

const express = require('express');
const findPrime = require('./utils/findPrime');

const app = express();

app.set('view engine', 'ejs');

/**
 * 键是 `n`
 * 值是 `n` 的点赞数
 */
const likesMap = {};

app.get('/', (req, res) => {
  const n = req.query.n;
  
  if (!n) {
    res.render('index');
    return;
  }
  
  const prime = findPrime(n);

  // 必要时初始化此数字的点赞数
  if (!likesMap[n]) likesMap[n] = 0;

  const locals = { n, prime, likes: likesMap[n] };
  res.render('index', locals);
});

app.get('/like', (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.redirect('/');
    return;
  }

  likesMap[n]++;

  res.redirect(`/?n=${n}`);
});

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`示例应用正在监听端口 ${port}。`)
);

保存文件。

重新启动应用并再次测试点赞按钮。每次点击，点赞数都会增加。

你的应用现在具备全功能特性，可以准备将其部署到应用平台。在下一步中，你将用 git 提交应用的代码，并将该代码推送到 GitHub。

第三步 – 创建您的代码存储库

在这一步中，您将创建一个代码仓库来存放所有部署所需的文件。首先，您将把代码提交到 Git，然后将其推送到 GitHub 仓库。您将使用此仓库来使用应用平台进行部署。

将你的代码提交到Git上

在这一部分中，你将把你的代码提交到git，以便准备好推送到GitHub。

首先，初始化一个git仓库。

git init

接下来，告诉 Git 排除您的应用程序依赖项。创建一个名为 .gitignore 的新文件，然后添加以下内容：

node_modules

# macOS文件
.DS_Store

保存并关闭文件。

现在，将所有文件添加到git中。

git add .

最后，使用以下命令提交这些更改：

git commit -m "初始提交"

-m选项用于指定提交的消息，您可以使用任何您想要的消息来更新。

提交代码后，您将收到以下这样的输出。

[main (root-commit) deab84e] 初始提交
 6 files changed, 1259 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 server.js
 create mode 100644 utils/findPrime.js
 create mode 100644 views/index.ejs

你已经把你的代码提交到了 git 上。接下来，你要把它推送到 GitHub 上。

将你的代码推送到GitHub存储库

现在你的应用程序代码已经提交到了git，你可以准备将其推送到GitHub。然后，你可以将代码与Silicon Cloud应用平台连接并部署。

首先，在您的浏览器中登录到GitHub，创建一个名为express-memcache的新存储库。创建一个没有README、.gitignore或许可证文件的空存储库。您可以将存储库设置为私有或公开。您还可以查看GitHub关于创建新存储库的文档。

在您的终端中，将新建的存储库添加为远程 origin，并更新您的用户名。

git remote add origin https://github.com/你的用户名/express-memcache.git

这个命令告诉Git把你的代码推送到哪里。

接下来，将默认分支 main 重命名为：

git branch -M main

最后，将代码推送到你的代码库中。

git push -u origin main

如果出现提示，请输入您的凭据。

您将收到类似于以下的输出：

枚举对象: 10, 完成.
计数对象: 100% (10/10), 完成.
使用最多8个线程进行增量压缩
压缩对象: 100% (7/7), 完成.
写入对象: 100% (10/10), 9.50 KiB | 9.50 MiB/s, 完成.
总计 10 (增量 0), 重用 0 (增量 0), 包重用 0
到 https://github.com/你的用户名/express-memcache.git
 * [新分支]      main -> main
分支 'main' 设置为跟踪来自 'origin' 的远程分支 'main'.

你的应用代码现在已经在GitHub上，可以准备通过应用平台进行部署。

第四步 — 在应用平台上部署

在这个步骤中，您将把您的Express应用部署到Silicon Cloud应用平台上。您将创建一个应用平台应用，允许其访问您的GitHub存储库，然后进行部署。

您将首先更新环境设置，以便您的配置可以从PORT环境标签中读取。

更新您的应用程序的环境设置

在这个部分，你将扩展你的 Express 服务器，使得该应用的端口配置能够从环境变量中读取。由于在部署之间配置很可能会改变，这次更新将使你的应用能够从其 App 平台环境中读取端口。

在您的编辑器中打开文件 server.js。然后，在文件底部，更新突出显示的代码以替换现有的 app.listen 行，并添加一个新的 const port 行：

...

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`Example app is listening on port ${port}.`)
);

如果存在PORT环境变量，则代码会使用该变量，否则默认使用端口3000。

你的应用程序现在将能够从应用平台环境中读取端口，以便你能够将其部署。

在应用平台上创建和部署您的应用程序

你现在可以使用应用平台来设置你的应用程序。

首先，登录您的Silicon Cloud账户。从应用程序仪表板中，点击创建，然后选择应用程序。您也可以按照我们的产品文档中关于如何在应用平台上创建应用程序的指南操作。

在”从源代码创建资源”界面上，选择GitHub作为服务提供商。然后，允许Silicon Cloud访问您的存储库。最佳实践是只选择要部署的存储库。如果您还没有这样做，系统将提示您安装Silicon Cloud GitHub应用程序。从列表中选择您的存储库，然后点击下一步。

在”资源”屏幕上，点击”编辑计划”选择您的计划大小。本教程将使用最小规模的网页服务（512MB内存 | 1虚拟CPU）的基本计划作为express-memcache资源。基本计划和最小规模的网页服务为这个样例Express应用程序提供足够的资源。设置完计划后，点击”返回”。

接下来，点击左侧导航栏的”信息”选项卡并记录你的应用程序所在的地区。在下一步添加MemCachier的Silicon Cloud Marketplace插件时，你将需要这个信息。

最后，点击”审查”选项卡，然后点击”创建资源”按钮来构建和部署您的应用程序。建立过程可能需要一点时间。当完成后，您将收到一个带有您已部署应用程序链接的成功消息。

到目前为止，你已经创建了一个能找到质数并拥有”赞”按钮的 Express 应用程序。你将应用程序的代码提交到了 Git 并推送到了 GitHub，并在应用平台上部署了该应用程序。

为了使你的 Express 应用程序更快速和可扩展，你将实施三种对象缓存策略。你需要一个缓存，在下一步中将创建它。

第五步-使用MemCachier配置对象缓存

在这一步中，您将创建和配置一个对象缓存。任何与Memcached兼容的缓存都适用于本教程。您将通过Silicon Cloud Marketplace的MemCachier附加组件来提供一个。MemCachier缓存是一个内存中的键值存储。

首先，您需要从Silicon Cloud Marketplace中添加MemCachier附加组件。访问MemCachier附加组件页面，然后点击”添加MemCachier”。在下一个页面上，选择您之前注意到的应用平台应用所在的地区。您的应用和缓存应该位于相同的地区，以尽量降低延迟。如果您需要再次查找地区，可以查看您的应用平台应用的设置。您可以选择一个计划，然后点击”添加MemCachier”来部署您的缓存。

接下来，您将配置 Express 应用程序使用缓存。访问附加组件仪表板，然后点击您的 MemCachier 附加组件的名称以打开其仪表板。在 MemCachier 附加组件仪表板上，点击配置变量的显示按钮，以加载显示 MEMCACHIER_USERNAME、MEMCACHIER_PASSWORD 和 MEMCACHIER_SERVERS 的值。请记下这些值，因为您接下来会需要它们。

现在，您需要将MemCachier的配置变量保存为应用的环境变量。返回到您的应用平台应用的仪表板，点击设置。然后，在组件下，点击express-memc…。滚动到环境变量部分，点击编辑，然后使用从MemCachier仪表板中获取的三个键（MEMCACHIER_USERNAME、MEMCACHIER_PASSWORD和MEMCACHIER_SERVERS）及其对应的值添加您的MemCachier配置变量。对于MEMCACHIER_PASSWORD，选中加密，因为它是一个密码值。点击保存以更新应用程序。

现在，您将会在您的Express应用程序中配置一个memcache客户端，使用刚刚保存的环境变量，以便应用程序可以与您的缓存进行通信。

在你的终端中，安装memjs库。

npm install memjs

接下来，创建一个服务目录。然后，在编辑器中创建services/memcache.js文件并打开它。在文件顶部，导入memjs并配置一个缓存客户端。

const { Client } = require('memjs');

module.exports = Client.create(process.env.MEMCACHIER_SERVERS, {
  failover: true,
  timeout: 1,
  keepAlive: true,
});

保存文件。

此代码创建了一个MemCachier缓存客户端。至于选项，失败转移（failover）设置为true以使用MemCachier的高可用集群。如果服务器出现故障，存储在该服务器上的所有密钥的命令将自动发送到下一个可用的服务器。相比默认的0.5秒，1秒的超时（timeout）对于已部署应用来说更好。keepAlive设置为true即使处于闲置状态也保持与缓存的连接打开，这是可取的，因为建立连接是缓慢的，而缓存必须是高效的。

在这一步中，您使用Silicon Cloud Marketplace上的MemCachier附加组件配置了一个缓存。然后您将缓存的配置设置添加为App Platform环境变量，从而使您能够使用memjs配置客户端，以便您的Express应用程序可以与缓存进行通信。

一切准备就绪，接下来你将开始在Express中实施缓存。

第六步 – 使用MemCachier在Express中实现缓存

在您部署了Express应用程序并配置了MemCachier附加组件之后，您现在可以使用对象缓存。在这一步中，您将实现三种对象缓存技术。首先，您将缓存资源密集的计算以提高使用速度和效率。然后，您将实现在用户输入后缓存渲染视图的技术，以改善请求处理，并缓存短期会话，为超越本教程的应用程序扩展做好准备。

缓存高资源计算

在这个部分中，你将缓存资源密集的计算以加快应用程序的速度，从而实现更高效的CPU使用。当提交一个足够大的数字时，findPrime函数就是一个资源密集型的计算。你将缓存它的结果，并在有缓存值可用时提供该值，而不是重复进行计算。

首先，打开server.js文件以添加memcache客户端。

const express = require('express');
const findPrime = require('./utils/findPrime');
const memcache = require('./services/memcache');

...

然后，将计算得到的质数存储在缓存中。

...

  const prime = findPrime(n);

  const key = 'prime_' + n;

  memcache.set(key, prime.toString(), { expires: 0 }, (err) => {
    if (err) console.log(err);
  });

...

保存文件。

set方法接受一个键作为第一个参数，一个字符串值作为第二个参数，因此将质数转换为字符串。第三个选项参数确保存储的项目永不过期。第四个且最后一个参数是一个可选的回调函数，如果存在错误，则会抛出错误。

接下来，将您的更改提交到版本控制系统中。

  
    

      
git add . && git commit -m "添加memjs客户端并缓存质数"
    
  

然后，将这些更改推送到GitHub，应该会自动部署到App平台。

  
    

      
git push
    
  

您的应用平台仪表板将从”已部署”消息转换为显示正在构建的消息。当构建完成后，请在浏览器中打开应用程序并提交一个数字以找到其最大质数。

接下来，返回到”Add-Ons”仪表板，然后点击所命名的服务的”查看MemCachier”选项，以查看缓存的分析仪表板。

在这个仪表盘上，无论是在”所有时间统计”面板上的”设置命令”选项，还是在”存储”面板上的”物品统计”，都增加了1。每次提交一个数字，设置命令和物品都会增加。您需要按下刷新按钮来加载任何新的统计数据。

有了缓存中存储的项目，您可以利用它们。您现在将检查项目是否已缓存，如果是，则将从缓存中提供；否则，将像以前一样找到质数。

回到server.js，使用下面突出显示的代码更新你的文件。你需要修改现有的代码行并添加新的行以用于缓存。

...

app.get('/', (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.render('index');
    return;
  }

  let prime;

  const key = 'prime_' + n;

  memcache.get(key, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      // 使用缓存中的值
      // 在转换为数字之前先转换Buffer字符串
      prime = parseInt(val.toString());
    } else {
      // 没有可用的缓存值，进行计算
      prime = findPrime(n);

      memcache.set(key, prime.toString(), { expires: 0 }, (err) => {
        if (err) console.log(err);
      });
    }

    // 必要时初始化此数字的点赞数
    if (!likesMap[n]) likesMap[n] = 0;

    const locals = { n, prime, likes: likesMap[n] };
    res.render('index', locals);
  });
});

...

保存文件。

该代码使用let关键字将prime初始化为无值，因为它的值将被重新分配。然后，memcache.get尝试检索缓存的质数。现在，大部分控制器的代码都位于memcache.get回调函数中，因为需要其结果来确定如何处理请求。如果有可用的缓存值，则使用它。否则，进行计算以找到质数，并像以前一样将结果存储在缓存中。

在memcache.get回调中返回的值是Buffer，所以在将其转换回数字之前，需要将其转换为字符串。

提交您的更改并将其推送到GitHub以部署。

git add . && git commit -m "检查质数缓存" && git push

当您向您的应用程序提交一个尚未缓存的数字时，您的MemCachier仪表板上的Set命令、项和未命中统计数据将增加1。未命中是因为在设置之前尝试从缓存中获取该项。该项不在缓存中，导致未命中，然后将该项存储。当您提交一个已缓存的数字时，获取命中将增加。

你现在正在缓存资源密集型的计算。接下来，你将缓存你的应用程序的渲染视图。

缓存已呈现的视图

在这个部分中，你将使用中间件缓存Express应用程序渲染的视图。之前，你已经设置了ejs作为模板引擎，并创建了一个模板来渲染每个提交的数字N的视图。渲染视图可能需要消耗很多资源，因此缓存它们可以加快请求处理速度并节省资源。

首先，创建一个中间件目录。然后，创建文件middleware/cacheView.js并在编辑器中打开它。在cacheView.js中，为中间件函数添加以下行：

const memcache = require('../services/memcache');

/**
 * 用于缓存视图并提供缓存视图的Express中间件
 */
module.exports = function (req, res, next) {
  const key = `view_${req.url}`;

  memcache.get(key, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      // 将Buffer字符串转换为响应主体发送
      res.send(val.toString());
      return;
    }
  });
};

...

module.exports = function (req, res, next) {
  const key = `view_${req.url}`;

  memcache.get(key, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      // 将Buffer转换为UTF-8字符串以作为响应体发送
      res.send(val.toString());
      return;
    }

    const originalSend = res.send;
    res.send = function (body) {
      memcache.set(key, body, { expires: 0 }, (err) => {
        if (err) console.log(err);
      });

      originalSend.call(this, body);
    };
  });
};

...

/**
 * 用于缓存视图并提供缓存视图的Express中间件
 */
module.exports = function (req, res, next) {
  const key = `view_${req.url}`;

  memcache.get(key, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      // 将Buffer转换为UTF-8字符串以作为响应体发送
      res.send(val.toString());
      return;
    }

    const originalSend = res.send;
    res.send = function (body) {
      memcache.set(key, body, { expires: 0 }, (err) => {
        if (err) console.log(err);
      });

      originalSend.call(this, body);
    };

    next();
  });
};

...

const express = require('express');
const findPrime = require('./utils/findPrime');
const memcache = require('./services/memcache');
const cacheView = require('./middleware/cacheView');

...

...

app.get('/', cacheView, (req, res) => {
  ...
});

...

  
git add . && git commit -m "添加视图缓存" && git push

...

app.get('/like', (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.redirect('/');
    return;
  }

  likesMap[n]++;

  // 被点赞的页面的URL
  const url = `/?n=${n}`;

  res.redirect(url);
});

...

...
  const url = `/?n=${n}`;

  // 此URL的视图已发生变化，因此缓存版本不再有效，将其从缓存中删除。
  const key = `view_${url}`;
  memcache.delete(key, (err) => {
    if (err) console.log(err);
  });

  res.redirect(url);
...

const express = require('express');
const findPrime = require('./utils/findPrime');
const memcache = require('./services/memcache');
const cacheView = require('./middleware/cacheView');

const app = express();

app.set('view engine', 'ejs');

/**
 * 键是 `n`
 * 值是 `n` 的"点赞"数量
 */
const likesMap = {};

app.get('/', cacheView, (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.render('index');
    return;
  }

  let prime;

  const key = 'prime_' + n;

  memcache.get(key, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      // 使用缓存中的值
      // 在转换为数字之前，先转换Buffer字符串
      prime = parseInt(val.toString());
    } else {
      // 没有可用的缓存值，查找它
      prime = findPrime(n);

      memcache.set(key, prime.toString(), { expires: 0 }, (err) => {
        if (err) console.log(err);
      });
    }

    // 必要时初始化此数字的点赞数
    if (!likesMap[n]) likesMap[n] = 0;

    const locals = { n, prime, likes: likesMap[n] };
    res.render('index', locals);
  });
});

app.get('/like', (req, res) => {
  const n = req.query.n;

  if (!n) {
    res.redirect('/');
    return;
  }

  likesMap[n]++;

  // 被"点赞"的页面的URL
  const url = `/?n=${n}`;

  // 此URL的视图已更改，因此缓存版本不再有效，将其从缓存中删除。
  const key = `view_${url}`;
  memcache.delete(key, (err) => {
    if (err) console.log(err);
  });

  res.redirect(url);
});

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`示例应用正在监听端口 ${port}。`)
);

git add . && git commit -m "删除无效的缓存视图" && git push

npm install express-session connect-memjs

const express = require('express');
const findPrime = require('./utils/findPrime');
const memcache = require('./services/memcache');
const cacheView = require('./middleware/cacheView');
const session = require('express-session');
const MemcacheStore = require('connect-memjs')(session);

...

...

app.set('view engine', 'ejs');

app.use(
  session({
    secret: 'your-session-secret',
    resave: false,
    saveUninitialized: true,
    store: new MemcacheStore({
      servers: [process.env.MEMCACHIER_SERVERS],
      prefix: 'session_',
    }),
  })
);

...

...

app.use(
  session({
    ...
  })
);

/**
 * 会话完整性检查中间件
 */
app.use(function (req, res, next) {
  console.log('会话ID：', req.session.id);

  // 从缓存中获取项目
  memcache.get(`session_${req.session.id}`, (err, val) => {
    if (err) console.log(err);

    if (val !== null) {
      console.log('来自缓存的会话：', val.toString());
    }
  });

  next();
});

...

git add . && git commit -m "添加会话缓存" && git push