Docker fullstack - Node Js 구성하기

구성

 

• node.js
• react.js
• postgres
• nginx
•  

docker-fullstack 폴더를 만든뒤 backend 폴더를 만들어줍니다.

 

 

/backend/package.json

npm init -y

 

 

package.json 파일 만들기

 

 

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node server.js",
        "dev": "nodemon server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "4.17.1",
        "pg": "8.6.0",
        "nodemon": "2.0.7",
        "body-parser": "1.19.0"
    }
}

 

 

개발환경에서는 nodemon 이용해 hot reloading을 합니다.

dependencies 에 종속성들을 넣어줍니다.

server.js

 

 

// 필요한 모듈들을 가져오기
const express = require('express');
const bodyParser = require('body-parser');

// create express server
const app = express();

// json 형태로 오는 요청의 본문을 해석해줄수 있게 등록
app.use(bodyParser.json());

// Express 서버 포트 5000에서 시작
app.listen(5000, () => {
  console.log('server is running');
});

 

 

db setup

db.js

 

 

const { Pool } = require("pg");
export const pool = new Pool({
  user: "root",
  host: "postgres",
  password: "postgres",
  database: "app",
  port: 5432,
});

 

 

server.js 파일과 같은 위치에 db.js 파일을 생성하고 다음과 같이 설정합니다. dotenv 파일을 만들어서 설정하셔도 무방합니다.

 

 

server.js 에서 db import 하기

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

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

// create express server
const app = express()
...

 

 

react 에서 입력한 글을 database 에 저장하는 api 를 만들도록 하겠습니다.

docker 가 껏다 켜져도 database 에 있는 data 들이 사라지지 않도록 하는 것이 중요!!

 

 

api 만들기

server.js

...
...
// json 형태로 오는 요청의 본문을 해석해줄수 있게 등록
app.use(bodyParser.json());

//DB lists 테이블에 있는 모든 데이터를 프론트 서버에 보내주기
app.get('/api/values', (req, res) => {
  // db에서 모든 정보 가져오기
  db.pool.query('SELECT * FROM lists;', (err, results, fileds) => {
    if (err) {
      return res.status(500).send(err);
    } else {
      return res.json(results);
    }
  });
});

// Express 서버 포트 5000에서 시작
app.listen(5000, () => {
  console.log('server is running');
});

 

 

테이블 생성 과 테이블에 값 넣기

 

 

전체 소스코드

// 필요한 모듈들을 가져오기
const express = require('express');
const bodyParser = require('body-parser');

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

// create express server
const app = express();

// json 형태로 오는 요청의 본문을 해석해줄수 있게 등록
app.use(bodyParser.json());

//DB lists 테이블에 있는 모든 데이터를 프론트 서버에 보내주기
app.get('/api/values', (req, res) => {
  // db에서 모든 정보 가져오기
  db.pool.query('SELECT * FROM lists;', (err, results, fileds) => {
    if (err) {
      return res.status(500).send(err);
    } else {
      return res.json(results);
    }
  });
});

// 테이블 생성하기
db.pool.query(
  `CREATE TABLE lists (
    id INTEGER AUTO_INCREMENT,
    value TEXT,
    PRIMARY KEY (id)
)`,
  (err, results, fileds) => {
    console.log('results', results);
  }
);

// client 에서 입력한 값을 데이터 베이스 lists 테이블에 넣어주기
app.post('/api/value', (req, res, next) => {
  // db에 값 넣어주기
  db.pool.query(
    `INSERT INTO lists (value) VALUES("${req.body.value}")`,
    (err, results, fileds) => {
      if (err) {
        return res.status(500).send(err);
      } else {
        return res.json({ success: true, value: req.body.value });
      }
    }
  );
});

// Express 서버 포트 5000에서 시작
app.listen(5000, () => {
  console.log('server is running');
});

 

 

node js 부분의 코드는 작성이 끝났고 다음 글에서 react js 부분을 만들도록 하겠습니다.

github 참고 링크 github