[강의] 따라하며 배우는 도커와 CI환경 -6

STUDY/CLOUD

[강의] 따라하며 배우는 도커와 CI환경 -6

ozllzL 2022. 6. 28. 02:50

이전 : 프론트만 사용

이번 : 백엔드와 DB도 구현해서 많은 컨테이너 사용

두 가지 방식으로 설계 가능 -> 첫 번째 방식으로 강의 진행

Nginx의 Proxy를 이용한 설계
Nginx는 정적파일을 제공만 해주는 설계

큰그림

💫Node JS 구성하기

backend폴더 만들고 여기서 npm init

nodemon을 사용하는 이유 : 노드 코드를 변경해도 바로 중단, 재가동 시켜줄 수 있도록 하기 위해

db.js

const mysql = require("mysql");
const pool = mysql.createPool({
	connectionLimit: 10,
	host: 'mysql',
	user: 'root',
	password: 'johnahn',
	database: 'myapp'
});
exports.pool = pool;

server.js

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

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

const app = express();

app.user(bodyParser.json());

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

ap.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({ success: true, value: req.body.value })
    }
})

ap.post('/api/values', function (req, res, next) {
    db.pool.query(`INSERT INTO lists (vlaue) 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.log('어플리케이션이 서버 5000번 포트에서 시작되었습니다.')
})

💫React JS 구성하기

frontend 폴더 생성

npx create-react-app frontend 명령어로 react 파일 생성

App.js

axios 안돼서 한참 헤매다 직접 설치했는데 담강의에 잘못됐다고 알려주심 ~~개킹받는다~~

import logo from './logo.svg';
import './App.css';
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {

    useEffect(() => {
        axios.get(`/api/values`)
            .then(response => {
                console.log('response', response.data)
                setLists(response.data)
            })
    }, [])

    const [lists, setLists] = useState([])
    const [value, setValue] = useState("")


    const changeHandler = (event) => {
        setValue(event.currentTarget.value)
    }

    const submitHandler = (event) => {
        event.preventDefault();
        axios.post(`/api/value`,
            { value: value })
            .then(response => {
                if (response.data.success) {
                    console.log('response.data', response.data)
                    setLists([...lists, response.data])
                    setValue("");
                } else {
                    alert("값을 DB에 넣는데 실패했습니다.")
                }
            })
    }
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <div className="container">
                    {lists && lists.map((list, index) => (
                        <li key={index}>{list.value}</li>
                    ))}
                    <form className="example" onSubmit={submitHandler}>
                        <input
                            type="text"
                            placeholder="입력해주세요..."
                            onchange={changeHandler}
                            value={value}
                        />
                        <button type="submit">확인</button>
                    </form>
                </div>
            </header>
        </div>
    );
}

export default App;

🐳 for 리액트 앱 도커 파일 만들기

default.conf 를 이요앟여 index.html이 home이라는 것을 알려준다

server{
	listen 3000;
	location / {
		root /usr/share/nginx/html;

		index index.html index.htm;

		try_files $uri $uri/ /index.html;
	}
}

Dockerfile

FROM node:alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY ./ ./
RUN npm run build


FROM nginx
EXPOSE 3000
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html

🐳 for 노드 앱 도커 파일 만들기

mysql 폴더 생성

Dockerfile.dev

위 파일과 "start"->"dev"하나 차이

Dockerfile

Dockerfile.dev에서 "start"만 그대로 둠

🐳 for MySQL 도커 파일 만들기

Dockerfile

FROM mysql:5.7
ADD ./my.cnf /etc/mysql/conf.d/my.cnf

my.cnf

한글 깨짐 현상 방지 위함

initialize.sql

DROP DATABASE IF EXIST myapp;

CREATE DATABASE myapp;
USE myapp;

CREATE TABLE lists(
	id INTEGER AUTO_INCREMENT,
	value TEXT,
	PRIMARY KEY (id)
)

🐳 for Nginx 도커 파일 만들기

nginx 폴더 생성

클라이언트 요청에 따라 정적파일을 원하면 React.js API 요청이면 Node.js로 보낸다.

->기준: /api로 시작하는지, /로 시작하는지

default.conf

React.js로 보낼 것과 Node.js로 보낼 것 분리

Dockerfile

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

🎇 Docker Compose 파일 작성하기

version: "3"
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - /app/node_modules
      - ./frontend:/app
    stdin_open: true

  nginx:
    restart : always #재시작 정책, 항상 재시작
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - "3000:80"

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    container_name: app_backend
    volumes:
      - /app/node_modules
      - ./backend:/app

  mysql:
    build: ./mysql
    restart: unless-stopped #개발자가 임의로 멈추려고 하는거 아니면 항상 재시작
    container_name: app_mysql    
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/mysql_data:/var/lib/mysql
      - ./mysql/sqls/:/docker-entrypoint-initdb.d/
    environment:
      MYSQL_ROOT_PASSWORD: johnahn
      MYSQL_DATABASE: myapp

docker-compose up 으로 실행

빡대가리의 오류일기

1. nginx 스펠링 틀림 nginix라고 오타냄(엔지닉스 맞자나..)

2. "3306":"3306" 함

3. 주석다느라 한글 써놓고 utf-8로 저장 안함

🔊 Volume을 이용한 데이터 베이스 데이터 유지하기

이전 : 컨테이너 내부에 데이터를 저장하게 되므로, 컨테이너 삭제 시 컨테이너 안에 저장된 데이터도 함께 삭제된다.

-> 영속성이 필요한 데이터는? -> Volumes

호스트 파일 시스템의 도커에 의해서만 통제되는 도커 Area에 데이터가 저장된다

-> 데이터가 사라지지 않는다.