Express를 사용하여 REST-API 설정

본고에서 저는 REST-API를 사용하여 신속하고 신뢰할 수 있는 설정ExpressJS을 하는 방법을 보여 드리고 싶습니다.이것은 어떤 종류의 신분 검증이나 권한 수여도 포함하지 않는다.경로를 하나만 설정하고 몇 가지 기준을 정의할 것입니다. 만약 우리가 이렇게 한다면, 이 기준들은 우리가 이 API를 확장하는 데 도움을 줄 것입니다.

선결 조건
인코딩을 시작하기 전에 시스템에 버전의 NodeJS와 NPM을 설치해야 합니다.공식 사이트 링크드here를 방문해 LTS(장기 지원) 버전의 노드JS를 다운로드하면 된다.이것은 자동으로 설치NPM를 패키지 관리자로 합니다.
다음에 express api template라는 폴더를 만들고 npm을 사용하여 NodeJS 프로젝트를 초기화해서 프로젝트를 생성합니다.

$ mkdir express_api_template
$ cd express_api_template/
$ npm init

npm, init는 새로운 프로젝트를 만드는 과정을 안내합니다.입구점을 제외하고 나는 보통 기본 설정을 사용한다.나는 나의 메인 자바스크립트 파일 서버를 호출하는 것을 좋아한다.기본 인덱스 대신 js.그리고 작성자를 기입하세요.
완료되면 ExpressJS를 패키지에 추가하여 설치해야 합니다.json.다음 명령을 사용하여 이 작업을 수행합니다.

$ npm install express

다운로드가 완료되면 node modules 폴더와 두 개의 패키지가 있어야 합니다.제이슨과 패키지 자물쇠.json.

기초 지식
우선, 우리는 두 개의 새 폴더와 두 개의 새 파일, 그리고 일부 새로운 의존 항목을 만들어야 한다.

$ mkdir src
$ mkdir src/config
$ touch src/server.js src/config/config.env
$ npm install colors dotenv
$ npm install nodemon --save-dev

일반 설치와 --save dev 설치 사이의 차이점은 일반 설치는 생산에 필요한 의존항을 설치한다는 것이다.save dev는 개발에 필요한 의존항만 설치합니다.
그런데 저희가 도대체 여기에 뭘 설치했죠?

colors: 다양한 콘솔 출력을 위한 패키지입니다.

dotenv: 이 패키지는 로딩 환경 변수에서 시작합니다.env 파일이 프로세스에 들어갑니다.환경{variable_name}

nodemon: 변경 사항을 저장할 때마다 서버를 다시 불러오는 데 사용됩니다.

이 모든 것을 설치하면 프로그램이 실행되지 않습니다.이를 위해서는 두 가지 더 해야 한다.

소프트웨어 패키지를 구성합니다.json 서버를 시작합니다.js

서버에 기본 Express 서버를 제공합니다.js

패키지부터 시작합시다.이렇게

{
  "name": "express_api_template",
  "version": "1.0.0",
  "description": "",
  "main": "src/server.js",
  "scripts": {
    "start": "NODE_ENV=production node src/server.js",
    "dev": "NODE_ENV=development nodemon src/server.js"
  },
  "author": "Jakob Klamser",
  "license": "ISC",
  "dependencies": {
    "colors": "^1.4.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

우리는 npm와 함께 사용하는 두 개의 명령을 정의했다.
첫 번째는 생산이다.NODE ENV 변수를 production으로 설정한 다음 NODE 명령을 사용하여 서버를 시작합니다.
두 번째는 NODE ENV를 개발자로 설정하고 NODE 대신 nodemon을 사용하면 우리는 개발할 때 reload on save 기능을 사용할 수 있다.
참고: Windows를 운영 체제로 사용하는 경우 노드 ENV를 개발 종속성으로 설정하려면 설치cross-env가 필요합니다.

$ npm install cross-env --save-dev

그런 다음 다음과 같이 두 개의 스크립트를 편집합니다.

"scripts": {
  "start": "cross-env NODE_ENV=production node src/server.js",
  "dev": "cross-env NODE_ENV=development nodemon src/server.js"
},

이 모든 것이 작용하기 위해서는 먼저 두 번째 단계를 완성해야 한다.express 프로그램을 만들고 설정에 정의된 포트를 사용해서 시작해야 합니다.환경
다음과 같이 포트를 파일에 추가합니다.

PORT=5000

이제 우리는 서버에서 코드를 작성하기 시작할 수 있다.js.

const express = require('express');
const dotenv = require('dotenv');
const colors = require('colors');

dotenv.config({ path: 'src/config/config.env' });

const app = express();

const PORT = process.env.PORT || 5001;

app.listen(PORT,
  console.log(`Server up and running in ${process.env.NODE_ENV} mode on port ${PORT}`.yellow.bold));

이것은 매우 간단합니다. 우리는 설정된 경로를 설정했습니다.그리고express 프로그램을 초기화합니다.그런 다음 방금 구성에 설정된 포트에서 모니터링을 시작합니다.환경
다음 명령을 실행하는 경우

$ npm run dev

다음과 같은 출력이 표시되어야 합니다.

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/server.js`
Server up and running in development mode on port 5000

지금 우리는 매우 기본적인 설정이 하나 생겼다.이제 다음 섹션에서 REST-API의 템플릿으로 사용합니다.

디버그 및 보안
디버깅을 위해 콘솔에 더 많은 정보를 기록하고 API를 보호하는 등 더 많은 기능을 추가하는 것이 목표입니다.
상술한 목표를 실현하기 위해서 우리는 약간의 의존항을 늘려야 한다.

$ npm install helmet cors
$ npm install morgan  --save-dev

이 세 가지 새로운 의존항은 무엇입니까?

helmet: 이 가방은 중간부품으로 여러 개의 HTTP 헤더를 추가하여 API를 보호하는 데 도움을 줍니다.

cors: 이 중간부품은 우리가 실현하는 것을 돕는다CORS.

morgan: 이것은 간단한 HTTP 요청 기록기로서 전송된 요청을 노드 컨트롤러에 출력합니다.

이 모든 중간부품을 설치한 후, 우리express 프로그램에 계속 추가해야 합니다.

// After the other require statements:
const helmet = require('helmet');
const cors = require('cors');

// Between const app and const PORT:
// Development Setup
if (process.env.NODE_ENV === 'development') {
  // require morgan if in development mode
  // setting morgan to dev: https://www.npmjs.com/package/morgan#dev
  app.use(require('morgan')('dev'));
}

// Put all the server-wide middleware here
app.use(cors({
  origin: process.env.CORS_ORIGIN,
}));
app.use(helmet());

가장 주목할 점은 현재 노드 ENV에 대한 새 체크입니다.우리가 이렇게 하는 것은 개발 모델에서만 모건이 필요하기 때문이다.나중에 개발 중인 데이터베이스에 데이터 피드 스크립트 같은 내용을 추가하려면 직접 추가할 수 있습니다.
새로운 검사 후에, 우리는express 프로그램에 중간부품을 연결할 것입니다.cors에 대해 우리는 원점을 설정합니다.이것은 이 소스에서 요청한 경우에만 API와 통신할 수 있음을 의미합니다.예를 들어, 사용자가 만든 전방 응용 프로그램입니다.우리는 단지 주소를 설정에 추가하기만 하면 된다.env 파일은 다음과 같습니다.

CORS_ORIGIN=http://localhost:8000

포트는 웹 응용 프로그램 개발 설정에 따라 다를 수 있습니다.그렇다면 그것을 바꿔라.

끝점 및 사용자정의 중간부품
현재 우리는 API를 보호하는 작업을 완성했고, 우리는 두 가지 기본적인 중간부품과 예시적인 루트를 실현할 것이다.프로젝트의 깔끔함과 유지보수성을 유지하기 위해서, 우리는 세 개의 폴더와 네 개의 새 파일을 추가할 것이다.

$ mkdir src/routes src/middleware src/controllers
$ touch src/middleware/notFound.js src/middleware/errorHandler.js src/routes/post.js src/controllers/postsController.js

중간부품
우선 notFound에서 첫 번째 중간부품 함수를 만듭니다.js는 404 Not Found 오류를 던져서 API 노드에 명중하지 않은 요청을 처리합니다.

const notFound = (req, res, next) => {
  const error = new Error(`Not Found - ${req.originalUrl}`);
  res.status(404);
  next(error);
};

module.exports = notFound;

그것은 단지 요청, 응답, 다음 단계의 함수일 뿐이다.오류를 만들고 HTTP 상태 코드를 404로 설정한 다음 다음 다음 오류를 전달합니다.
이 중간부품만으로는 근본적으로 우리를 도울 수 없다.방금 작성한 Not Found 오류와 같은 전송 오류를 처리할 수 있는 뭔가가 필요합니다.이를 위해 다음 중간부품 함수인 errorHandler를 실현했습니다.

const errorHandler = (error, req, res, next) => {
  const statusCode = res.statusCode === 200 ? 500 : res.statusCode;
  res.status(statusCode);
  res.json({
    message: error.message,
    stack: process.env.NODE_ENV === 'production' ? ':(' : error.stack,
  });
};

module.exports = errorHandler;

만약 누군가가 단점이 없는 루트를 눌렀다면, 우리 API는 오류 메시지를 포함하는 JSON 대상을 되돌려주고, 개발 중에 실행하면 창고로 되돌려줍니다.
마지막 단계는 서버에 중간부품을 추가하는 것입니다.js.

// After the other require statements:
const notFound = require('./middleware/notFound');
const errorHandler = require('./middleware/errorHandler');
// Custom middleware here
app.use(notFound);
app.use(errorHandler);

라우터
우리는 결승선에서 점점 가까워졌다.두 발자국밖에 안 남았어요.우리는 지금 그 중 하나를 주목하고 있다. 바로 노선을 추가하는 것이다.이를 위해, 우리는 어떤 노선을 추가하고 싶은지 가슴에 손을 얹고 자문해야 한다.이 문서에는 모든 게시물을 가져오는 두 가지 다른 경로를 추가하고 싶습니다. 하나는 ID를 통해 글을 가져오는 것입니다. 게시물 파일에서 우리의 경로를 실현하기 시작합니다.js.

const express = require('express');

const router = express.Router();

// Controller Methods
const { getPosts, getPostById } = require('../controllers/postsController');

router.route('/')
  .get(getPosts);

router.route('/:id')
  .get(getPostById);

module.exports = router;

express router에서는 GET, POST 등 HTTP 술어를 기반으로 루트를 정의할 수 있습니다. 컨트롤러 방법을 HTTP 술어에 추가하기만 하면 됩니다. 이 방법을 실현하면 공유기가 그의 마력을 발휘할 것입니다.
서버에서js 이렇게 공유기를 추가해야 합니다:

// Between helmet and custom middleware:
// All routes here
app.use('/api/posts', require('./routes/post'));

이것은 우리가 아직 컨트롤러 기능을 실현하지 못했기 때문에 오류가 발생할 것이다.

컨트롤러
이제 REST-API 템플릿의 마지막 단계에 도달했습니다.컨트롤러가 정상적으로 작동하다.getPosts와 getPostById 두 개를 만들어야 합니다.PostsController에서 이러한 방법을 실현하기 시작합니다.js.

const postsArray = [
  {
    id: 1,
    title: 'React from scratch',
    content: 'In this article we will create a ToDo App in React from scratch.... etc.etc.etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 2,
    title: 'Vanilla JavaScript Basics',
    content: 'Today we will discuss some basic JavaScript fundamentals like array manipulation, currying etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 3,
    title: 'VS Code Extensions',
    content: 'I wanted to show you some of my favorite VS Code Extensions.... Bracket Pair Colorizer etc.etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 4,
    title: 'ExpressJS REST API',
    content: 'Is this the current article?',
    author: 'Jakob Klamser'
  },
];


// @route   GET api/posts
// @desc    Get All Posts
// @access  Public
exports.getPosts = (req, res) => {
  const posts = postsArray;
  return res.status(200).json({
    success: true,
    count: posts.length,
    data: posts,
  });
};

// @route   GET api/posts/:id
// @desc    Gets a post by ID
// @access  Private
exports.getPostById = (req, res) => {
  const post = postsArray.filter(post => post.id === Number(req.params.id));
  console.log(post);
  if (post[0] !== undefined) {
    return res.status(200).json({
      success: true,
      data: post[0],
    });
  }
  return res.status(404).json({
    success: false,
    error: 'No post found',
  })
};

파일의 맨 위에 정적 데이터가 있습니다.그리고 우리는 두 개의 함수를 내보냈다.첫 번째는 getPosts입니다. 모든 정적 데이터 목록을 되돌려줍니다.두 번째 방법은 getPostById입니다. id가 일치하면 그룹에서 대상을 되돌려줍니다. 만약post 일치 요청에 제공된 id가 없으면 오류를 되돌려줍니다.
마지막으로 해야 할 일은 다른 중간부품을 추가해서 프로그램에 JSON을 활성화하는 것입니다.

// Right below helmet:
app.use(express.json());

결론
이제 http://localhost:5000/api/posts 또는 http://localhost:5000/api/posts/2를 입력하여 API(API 실행 중)에 액세스할 수 있습니다.
template express API 설정에 대한 이 빠른 안내서를 좋아하시기 바랍니다.
데이터베이스, 신분 검증, 권한 수여, 더 많은 노드를 추가해서 구축할 수 있습니다.
만약 당신이 이 틀에 뭔가를 세웠다면 그것에 대한 당신의 견해를 알려 주십시오.
전체 항목은 내 GitHub에서 찾을 수 있다.
사진 작성자Brian McGowan가 Unsplash