[8] 도커 react, nodejs, db . multi-container

[1] 파일: docker-fullstack-app_6

목표 실습)

클라이언트가 글을 입력하면 리액트를 통해 노드로 전달한 후 mysql에 저장한다.

이후 이걸 화면에 보여준다. 화면을 재시작해도 DB에는 남아 있다.

방법 1)

Nginx의 라우팅 & 정적 파일 제공 역할 2가지를 모두 사용함

특징) /api가 있으면 백엔드에, 없으면 프론트엔드에 넘겨준다.

장점) request 보낼 때 host 이름이 바뀌어도 변경시켜주지 않아도 된다. 포트가 바뀌어도 변경하지 않아도 된다.

단점) nginx 설정, 전체 설계가 복잡함

방법 2)

Nginx의 라우팅 기능은 제외하고 정적 파일 제공 기능만 사용함

특징) 포트에 따라 프론트엔드, 백엔드에 넘겨준다

장점) 단순한 설계

단점) host name이나 port 변경 시 request url도 변경시켜줘야 함

[2] node js 구성하기

[2-1] package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev" : "nodemon server.js"
  },

=> 소스를 바꿀 때 서버를 껐다 키지 않아도 재기동 함 (start, dev 설정)

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

const db = require('./db')

//express 서버 생성
const app = express();

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

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


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

//client에 입력한 값을 db lists table에  넣어주기
app.post('/api/value', function(req, res, next){
  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})
    })
})


app.listen(5000, () => {
  console.los('app이 5000번 포트에서 시작됨.')
})

server.js 구성하기

const mysql = require("mysql")
const pool  = mysql.createPool({
  connectionLimit: 10,
  host: 'mysql',
  user: 'root',
  password: 'minji',
  databse: 'mjapp'
});

exports.pool = pool;

db.js 구성하기

[3] react js 구성하기

onSubmit: 확인 버튼을 누르면 onSubmit 이벤트가 발생해 submitHandler 함수 호출

onChange: 키보드로 값을 입력하면 onChange 이벤트가 발생해 changeHandler 함수 호출

value: input의 value를 State의 value로 컨트롤