[Docker 부터 Kubernetes 까지] [#8] React Front 및 Redis 작업하기

FROM node:12-alpine

# work directory
WORKDIR /usr/app

# Copy dependencies first for effective caching
COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 6000

CMD ["npm", "run", "start"]

# Express Server에 대한 정의를 해줍니다.
# Docker Compose를 사용하면 자동으로 Docker Compose에서 사용한
# 이름에 따라 도커 네트워크에서 DNS가 생성됩니다.
# 저희 Express Server는 express_server라는 이름으로
# Docker Compose 파일에 정의해놨기 때문에 해당 이름을
# DNS로 사용하시면 요청이 Docker Compose 내부 내트워크를 타고
# Express Server로 전달이 됩니다.
# 포트가 4000번이 아니고 3000번인 이유는
# 호스트를 통해서 네트워크 연결이 될 경우 4000번이 맞지만
# 다이렉트하게 Express Server의 컨테이너에 꼿히기때문에
# 내부 포트인 3000번을 사용해주셔야 합니다.
upstream express_server {
    server express_server:3000;
}

upstream react_front {
    server react_front:3000;
}

server {
    listen 80;

    # 로그파일을 저장하는 부분입니다. 이 부분을
    # Docker Compose에서 Volume 쉐어를 해놓으면
    # 호스트 기기에서도 도커에서 생성된 로그파일을 볼수있습니다.
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # React Front 컨테이너로 루트 패스를 모두
    # 매핑해줍니다.
    location / {
        proxy_pass http://react_front;
    }

    # 이건 딱히 신경쓰실 필요는 없는데
    # React 에서 파일이 변경 됐을때
    # 브라우저로 refresh를 하라고 알려주는 패스를
    # 매핑해주는 역할을 합니다.
    location /sockjs-node {
        proxy_pass http://react_front;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    # /api의 경로로 Nginx를 hit 하게되면
    # express Server로 reverse proxy 역할을 하라는 코드입니다.
    # 다만 서버 개발의 편의를 위해 /api 부분을 제외하고
    # /api 이후에 오는 부분들만 전달하게됩니다.
    # rewrite 룰을 정의하지 않을경우
    # Express Server에서 모든 api포인트에 /api를 최상위
    # 라우트로 지정해줘야해서 귀찮아집니다.
    location /api {
        proxy_pass http://express_server;
        rewrite /api/(.*) /$1 break;
    }
}

react_front:
  build: ReactFront
  ports:
    - "${REACT_FRONT_PORT}:3000"
  volumes:
    - /usr/app/node_modules
    - ./ReactFront:/usr/app
  env_file:
    - .env

## React Front
REACT_FRONT_PORT=6000

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

function App() {
    const [posts, updatePosts] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const resp = await axios.get('/api/posts');

            updatePosts(resp.data.data)
        }

        fetchData();
    }, []);

    return (
        <div className="App">
            {posts.map((x) => {
                return (
                    <div style={{
                        border: '1px solid #000000',
                        margin: 20,
                        padding: 10,
                    }}>
                        <a href={x.url}>
                            <div>
                                id: {x._id}
                            </div>
                            <div>
                                title: {x.title}
                            </div>
                            <div>
                                url: {x.url}
                            </div>
                        </a>
                    </div>
                )
            })}
        </div>
    )
        ;
}

export default App;

redis:
  image: redis:5

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const mongoose = require('mongoose');
const axios = require('axios');
const Post = require('mongoose/Post');
const redis = require('redis');
const {promisify} = require('util');

const mongoUri = 'mongodb://root:root@mongodb:27017/admin';

const client = redis.createClient({
    host:'redis'
});
const getAsync = promisify(client.get).bind(client);
const setAsync = promisify(client.set).bind(client);
const incrAsync = promisify(client.incr).bind(client);

mongoose.connect(mongoUri, {useNewUrlParser: true});

app.get('/count', async (req, res) => {
    const count = await getAsync('count');

    console.log(count);

    res.json({
        count
    })
});

app.get('/posts', async (req, res) => {
    console.log('Getting Posts Started!!!');

    /*
    * 만일 count 라는 키가 존재하지 않으면
    * count 를 1로 세팅하고
    * count가 존재하면 +1을 합니다.
    * */
    const count = await getAsync('count');

    if(count !== 0 && !count){
        await setAsync('count', 1);
    }else{
        await incrAsync('count');
    }

    let posts = await Post.find();

    if (posts.length === 0) {
        await axios.get('http://polling_server:3000/');

        posts = await Post.find();
    }

    console.log('Getting Posts Finished');

    res.json({
        success: true,
        version:1,
        data:posts
    });

});

app.listen(port, () => {
    console.log(`server is listening at localhost:${port}`);
});

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

function App() {
    const [posts, updatePosts] = useState([]);
    const [count, updateCount] = useState(null);

    useEffect(() => {
        async function fetchData() {
            const resp = await axios.get('/api/posts');
            const respC = await axios.get('/api/count');

            updatePosts(resp.data.data);
            updateCount(respC.data.count);
        }

        fetchData();
    }, []);

    return (
        <div className="App">
            <div>
                count: {count}
            </div>
            {posts.map((x) => {
                return (
                    <div style={{
                        border: '1px solid #000000',
                        margin: 20,
                        padding: 10,
                    }}>
                        <a href={x.url}>
                            <div>
                                id: {x._id}
                            </div>
                            <div>
                                title: {x.title}
                            </div>
                            <div>
                                url: {x.url}
                            </div>
                        </a>
                    </div>
                )
            })}
        </div>
    )
        ;
}

export default App;