如何使用 node.js 构建安全服务器并使用 cloudinary 表达和上传图像

209 阅读 0 评论 0 点赞

在本教程中，我们将学习如何创建服务器。我们将从不使用开始 express ，然后使用来增强服务器 express 。之后，我们将了解如何从我们创建的应用程序将图像上传到 Cloudinary。

我假设您已经了解基础知识 Node.js , express ， nodemon 因此我们将直接进入实际部分。

安装 Node.js 和 NPM

如果您还没有这样做，您需要在您的机器上安装 Node 和 npm。

前往 Node.js 网站
点击推荐下载按钮

Screenshot-2021-12-13-at-18.52.57 — Nodejs home page

下载完成后，使用下载的 .exe 文件安装 Node（遵循正常安装流程）。

检查安装是否成功

转到您的终端/命令提示符 （如果可能，以管理员身份运行）
输入以下每个命令并按 Enter

node -v 
npm -v

您的输出应类似于下图：

termial-1 — Terminal showing the versions of node and npm

版本可能不同，但是没关系。

如何在没有 Express 的情况下创建 Node 服务器

在本教程的其余部分，我将使用 VS code 作为编辑器。你可以使用任何你选择的编辑器。

让我们从创建项目目录开始。打开终端并输入以下内容以创建目录并打开它：

mkdir server-tutorial cd server-tutorial

我为我的项目目录命名 server-tutorial ，但您可以随意命名您的目录。

在终端中输入 npm init 。点击 Enter 按钮以执行所有提示。完成后，您 package.json 的项目目录中应该有一个文件。

该 package.json 文件只是一个包含项目所有详细信息的文件。您不必打开它。

创建一个名为 index.js .

在文件中， HTTP 像这样需要模块：

const http = require('http');

调用该 createServer() 方法并将其分配给常量，如下所示：

const server = http.createServer();

调用 listen() 服务器常量上的方法：

server.listen();

给它一个要监听的端口。现在这可以是任何空闲端口，但我们将使用 3000 常规端口。所以我们有这个：

const http = require('http');

  const server = http.createServer();

  server.listen(3000);

基本上，这就是创建服务器所需要做的全部工作。

如何测试服务器

在您的终端（应该在项目目录中）中，输入 node index.js 并点击 Enter 按钮。

或任何网站 postman 上打开一个新标签 browser ，然后在地址栏中输入 http://localhost:3000/ ，然后点击 Enter 按钮。（我将使用 postman，因为它具有丰富的扩展功能。）

您会注意到您的浏览器或邮递员会无限期地加载，如下所示：

太棒了！太好了。我们的服务器已启动并运行。

但这已经很无聊了。我们需要让服务器与我们对话。

我们马上开始吧。

如何从服务器发回响应

返回代码，添加以下内容 const server = http.createServer(); ：

(request, response) => {
    response.end('Hey! This is your server response!');
 }

所以我们现在有：

const http = require('http');

  const server = http.createServer((request, response) => {
    response.end('Hey! This is your server response!');
  });

server.listen(3000);

简单来说， request 对象告诉 server 我们想要什么， response 对象告诉我们 server 对我们的有什么看法 request ， end() 方法终止与 server response .

希望这是有意义的！

现在，按照我们上面概述的步骤再次测试服务器，您的服务器应该可以与您通信。这是我的输出：

请随意更改字符串。

使用 Control/Command + C 终止服务器并运行 node index 重新启动服务器。

看起来很棒！对吧？一切都很好……

如何使用 Express 创建 Node 服务器

在本节中，我们希望通过使用 Express 和 Nodemon （node-mon 或 no-demon，按照您的意愿发音）使我们的生活变得更轻松。

在终端中，安装以下内容：

npm install express --save 
npm install nodemon --save-dev

创建一个新的文件，命名为 app.js 或任何适合你的名字

在文件中，

要求像这样表达：

const express = require('express');

2. 将 express 方法分配给常量，如下所示：

const app = express();

3. 导出应用程序常量以使其可供目录内的其他文件使用，如下所示：

module.exports = app;

因此我们有：

const express = require('express');

const app = express();



module.exports = app;

在 index.js 文件中，需要 app 我们刚才导出的内容：

const app = require('./app');

接下来，使用应用程序设置端口，如下所示：

app.set('port', 3000);

并将方法中的代码替换 http.createServer() 为如下 app 内容：

const server = http.createServer(app);

这会将所有 API 管理导向至 app.js 有助于分离关注点的文件。

所以我们的 index.js 文件现在看起来像这样：

const http = require('http');
const app = require('./app');

app.set('port', 3000);
const server = http.createServer(app);

server.listen(3000);

回到我们的 app.js 文件，由于我们已将所有 API 管理指向它，所以让我们创建一个端点来像以前一样与我们对话。

因此在之前 module.exports = app 添加以下代码：

app.use((request, response) => {
   response.json({ message: 'Hey! This is your server response!' }); 
});

我们现在有：

const express = require('express');

const app = express();

app.use((request, response) => {
   response.json({ message: 'Hey! This is your server response!' }); 
});

module.exports = app;

啊哈...现在是时候测试我们的应用程序了。

为了测试我们的应用，我们现在 nodemon index 在终端中输入并点击 Enter 按钮。这是我的终端：

您是否注意到，与 Node 不同，nodemon 在终端中向我们提供了执行的详细信息？这就是 nodemon 的美妙之处。

现在，您可以转到 postman 或任何位置 browser ，然后在地址栏中键入 http://localhost:3000/ 并点击 Enter 。查看我的输出：

Postman returning response from express app

哇！成功了。

现在有更多理由使用 nodemon。转到文件 app.js 并将字符串更改 message 为您选择的任何字符串，保存并观察 terminal .

哇...它会自动重启服务器。这在 Node 上是不可能的。我们必须自己重启服务器。

如何保护服务器并使其面向未来

在该 index.js 文件中，将所有代码替换为以下内容：

const http = require('http');
const app = require('./app');

const normalizePort = val => {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    return val;
  }
  if (port >= 0) {
    return port;
  }
  return false;
};
const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

const errorHandler = error => {
  if (error.syscall !== 'listen') {
    throw error;
  }
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port: ' + port;
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges.');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use.');
      process.exit(1);
      break;
    default:
      throw error;
  }
};

const server = http.createServer(app);

server.on('error', errorHandler);
server.on('listening', () => {
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port ' + port;
  console.log('Listening on ' + bind);
});

server.listen(port);

process.env.PORT 使应用程序动态化，以便将来在实时服务器上托管时可以运行分配给它的任何端口。

该 normalizePort 函数返回一个有效的端口，无论它是数字还是字符串。

该 errorHandler 函数检查各种错误并进行适当处理 - 然后将其注册到服务器。

一个 listening 事件监听器，将服务器正在运行的端口或命名管道记录到控制台。

唷！我们的服务器现在更安全、更强大了。请注意，nodemon 还显示了我们正在监听的端口。

你已经拥有了一个简单、安全且强大的 Node.js 服务器。

如何上传图像到 Cloudinary

现在我们已经有一个很酷的服务器在运行，让我们学习如何在 Cloudinary 上保存图像。这只是一个基本的介绍，所以应该很有趣。

Cloudinary 帮助世界各地的开发人员以最少的努力管理图像。

如何创建 Cloudinary 帐户

要创建帐户，请访问 Cloudinary 网站 .

点击 sign up top right .
填写显示的相应表格。
使用按钮提交表格 Create Account 。
检查你的电子邮件，完成验证

您应该能够访问如下所示的仪表板：

请注意 Account details 。您 不应向任何人透露此信息 。我在这里向您显示它是因为这是一个临时帐户，我仅将其用于本教程的目的。

检查一下 Media Library 标签。上传的图片将出现在这里。

如果您具备这些素质，那么让我们摇滚起来吧……

如何在我们的项目中安装 Cloudinary

打开您的终端并导航到项目目录。

执行以下命令进行安装 Cloudinary ：

npm install cloudinary --save

如何在我们的项目中设置 Cloudinary

在 app.js 文件中，需要 cloudinary 如下内容 const app = express(); ：

const cloudinary = require('cloudinary').v2

接下来，从仪表板上的帐户详细信息中添加配置详细信息，如下所示：

cloud_name: 'place your cloud_name here',
    api_key: 'place your api_key here',
    api_secret: 'place your api_secret here',

这就是我所拥有的：

// cloudinary configuration
  cloudinary.config({
    cloud_name: "dunksyqjj",
    api_key: "173989938887513",
    api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
  });

如何创建端点来上传图像

为了避免代码中出现错误，首先用以下代码替换现有的 API：

app.get("/", (request, response) => {
    response.json({ message: "Hey! This is your server response!" });
  });

它基本上是相同的，但是这一次，我们用 get 动词代替动词 use ，并且添加了一个根端点（ / ）。

接下来，就在该 module.exports = app; 行之前，我们将创建我们的 image-upload API。

让我们首先将这段代码放在那里：

// image upload API
app.post("/upload-image", (request, response) => {});

基本上，这就是我们设置 API 的方式。API 向发出通知， POST request 告知 server 应 server 以 request 一定程度的安全处理。它使用两个参数发出此请求： end-point (/upload-image) 和 callback function ((request, response) => {})。

让我们通过构建 callback function .

如何构建回调函数

安装 body-parser

此 npm 包使我们能够 req.body 根据情况 request.body 或 body-parser 使用以下代码进行安装：

npm install --save body-parser

为我们的项目配置 body-paser

在 app.js 中需要 body-parse 像这样：

const bodyParser = require('body-parser');

接下来，添加以下代码以将其 json 功能设置为我们应用程序的全局中间件，如下所示：

app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));

我们现在可以适当地处理我们的请求主体。

返回构建我们的函数

在函数中，添加以下代码以收集用户输入的任何数据（图像）：

// collected image from a user
    const data = {
        image: request.body.image,
    };

使用以下代码 cloudinary 将图像上传到

cloudinary.uploader.upload(data.image);

基本上，这就是我们上传图片所需的全部内容。因此，图片 app.js 看起来如下：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');

// body parser configuration
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// cloudinary configuration
cloudinary.config({
  cloud_name: "dunksyqjj",
  api_key: "173989938887513",
  api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
});

app.get("/", (request, response) => {
  response.json({ message: "Hey! This is your server response!" });
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image);
    
});

module.exports = app;

现在看起来不错，运行完美。您可以使用进行测试 postman 。但如果我们的应用在处理完请求后能给我们反馈，那就太棒了，对吧？

为了实现这一点，我们将向 then...catch... cloudinary 上传添加以下块，如下所示：

// upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });

所以我们的最终代码将是：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');

// body parser configuration
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// cloudinary configuration
cloudinary.config({
  cloud_name: "dunksyqjj",
  api_key: "173989938887513",
  api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
});

app.get("/", (request, response) => {
  response.json({ message: "Hey! This is your server response!" });
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });
    
});

module.exports = app;

如何测试我们的 API

在根目录中创建一个文件夹/目录并将其命名 images 如下：

mkdir images

将您选择的图像复制到此文件夹。（现在，相对于 app.js 文件的图像路径应如下所示： "images/<your-image.jpg"> 。）

现在让我们继续 postman .

在地址栏中输入： http://localhost:3000/image-upload
设置 Header 为， Content-Type 并将值设置为 application/json
将其设置 body 为 json 我们在代码中声明的数据，如下所示：

{
	   "image": "images/oskar-yildiz-gy08FXeM2L4-unsplash.jpg"
       }

点击 Send 按钮并等待上传完成并得到回应：

现在，这就是结果。图像现在具有 public_id 由 Cloudinary 随机生成的唯一值和 secure_url 全局可访问的值（您可以在浏览器中加载它来查看）。

最后，检查 Media Library Cloudinary 仪表板上的选项卡，您应该会看到一个 new 带有徽章的新图像。它将具有一个唯一的 ID，与 public_id 我们在上面的邮递员结果中看到的相匹配，如下图所示：

哇！我们毫无压力地保存着图像……感觉真好。

好吧，还有一件事——安全！

我们的 Cloudinary 配置详细信息已在 app.js 文件中公开。如果我们将项目推送到 GitHub，则任何有兴趣查看的人都可以查看它。如果它落入坏人之手，就会出现问题。

但不用担心，这里几乎所有问题都有解决方案。我们将使用 dotenv npm 包来隐藏我们的配置。

如何使用 `dotenv`

如果你还没有安装 dotenv ，你需要安装

npm install dotenv --save

然后像 dotenv 这样 app.js ：

require('dotenv').config()

在根目录下新建一个文件并命名 .env .

在文件中，输入您的 Cloudinary 配置详细信息，如下所示：

CLOUD_NAME=dunksyqjj
  API_KEY=173989938887513
  API_SECRET=ZPLqvCzRu55MaM1rt-wxJCmkxqU

通过 .env 如下属性 process.env 访问文件中的配置

// cloudinary configuration
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET
});

这是我 app.js 目前的代码：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');
require('dotenv').config()

// body parser configuration
app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));

// cloudinary configuration
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET
});

app.get("/", (request, response, next) => {
  response.json({ message: "Hey! This is your server response!" });
  next();
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });
});

module.exports = app;

让我们再次测试我们的应用程序，以确保没有任何问题。这是我的结果：

我现在有两张相同的图像，但 public_id s 不同。

就是这样！

太棒了！我们的应用程序比刚开始时更安全了。

结论

在本教程中，我们介绍了仅使用 Node.js 创建服务器所涉及的步骤。之后，我们使用 Express 和 nodemon 改进了我们的服务器。

最后，我们了解了如何通过 Express 应用程序将图像上传到 Cloudinary，以及如何使用该 dotenv 包保护我们的配置详细信息。

这只是一个介绍。如果你试用一下这个应用程序，你还可以做更多的事情。

在此处找到服务器创建代码 .

图片上传代码可在此处 .

感谢您的时间。

点赞(0) 打赏

本文分类：IT技术
本文标签：node.js Express 服务器网络安全
浏览次数：209 次浏览
发布日期：2024-08-04 06:39:09
本文链接：http://yelongauto.com/index.php/ITjishu/2312.html

上一篇 > 什么是 devsecops？如何保护网站或应用程序
下一篇 > React Router 第 6 版教程 – 如何设置路由器并路由到其他组件

如何使用 node.js 构建安全服务器并使用 cloudinary 表达和上传图像

安装 Node.js 和 NPM

检查安装是否成功

如何在没有 Express 的情况下创建 Node 服务器

如何测试服务器

如何从服务器发回响应

如何使用 Express 创建 Node 服务器

如何保护服务器并使其面向未来

如何上传图像到 Cloudinary

如何创建 Cloudinary 帐户

如何在我们的项目中安装 Cloudinary

如何在我们的项目中设置 Cloudinary

如何创建端点来上传图像

如何构建回调函数

安装 body-parser

为我们的项目配置 body-paser

返回构建我们的函数

如何测试我们的 API

如何使用 `dotenv`

结论

评论列表共有 0 条评论

发表评论取消回复

如何使用 node.js 构建安全服务器并使用 cloudinary 表达和上传图像

安装 Node.js 和 NPM

检查安装是否成功

如何在没有 Express 的情况下创建 Node 服务器

如何测试服务器

如何从服务器发回响应

如何使用 Express 创建 Node 服务器

如何保护服务器并使其面向未来

如何上传图像到 Cloudinary

如何创建 Cloudinary 帐户

如何在我们的项目中安装 Cloudinary

如何在我们的项目中设置 Cloudinary

如何创建端点来上传图像

如何构建回调函数

安装 body-parser

为我们的项目配置 body-paser

返回构建我们的函数

如何测试我们的 API

如何使用 dotenv

结论

如何使用 node.js 构建安全服务器并使用 cloudinary 表达和上传图像

如何开始使用 centos

404设置：给扫描网站备份的人提供一个下载包

PHP入门指南：服务器端口

评论列表 共有 0 条评论

发表评论 取消回复

如何使用 `dotenv`

评论列表共有 0 条评论

发表评论取消回复