아래의 포스트들은 저 혼자 kubernetes에 대한 이해와 실습을 위해서
시행착오들을 적어놓은 포스트들입니다.
완벽하지 않고 순서가 뒤죽박죽임을 알아주시고
참고해주시면 감사하겠습니다!
Mysql Docker Image를 이용해서 React-Node.js-MySQL 애플리케이션 구현해보기
React와 Node.js 애플리케이션 Docker image build
6. React-Node.js image 생성하기
Kubespray와 Ansible을 이용한 Kubernetes 설치하기 - 1편
8. Ansible을 이용해서 Master와 Worker 연결
9. Ansible-playbook을 이용해서 한꺼번에 명령내리기
Kubespray와 Ansible을 이용한 Kubernetes 설치하기 - 2편
10. Kuberspray를 이용해 kubernetes 설치하기
Kubespray와 Ansible을 이용한 Kubernetes 설치하기 - 3편
10. Kuberspray를 이용해 kubernetes 설치하기(계속)
Kubespray와 Ansible을 이용한 Kubernetes 설치하기 - 4편
13. docker image pull 받고 실행시키기
15. Database의 Volume설정(PersistentVolume, PersistentVolumeClaim)
16. Database의 초기화 설정(configMap 사용하기)
17. 현재 파일 구조와 오브젝트들 설명과 목표 짚고 가기.
18. DB와 Web-app을 같은 Pod에서 구동시키기
개요
이 글은 react, node.js, mySQL의 개념들은 다루지 않습니다.
하고자 하는것은 쿠버네티스로 전체적인 관리를 할 것입니다.
그리고 미니큐브가 아닌 멀티 노드를 실현하기 위해서 실제로 서버를 따로 구축을 해보았습니다.
위에나오는 모든 글들은 제가 실습하는 과정들을 기록한 것들이고
개연성과 연관성이 없을 수도 정보가 정확하지 않을수도 있습니다.
회사에서 준비해주신 컴퓨터가지고 서버를 구축해서
워커 노드로 구동을 할 것이고 현재 사용하고 있는 컴퓨터는 마스터 노드로 사용을 할 것입니다.
새로 들어온 서버 컴퓨터는 centOS 7 운영체제를 사용할 것이며
기존 서버는 Ubuntu를 사용중입니다.
우선은 React-Node.js를 연결하고 mySQL은 dockerhub에서 이미지를 pull해서 사용하는 것까지 해보았습니다.
1. React 설치
CRA(create-react-app) 설치
리액트를 간단하고 빠르게 설치할 수 있는 CRA를 사용하였습니다.
설치가 완료되었다면
npm start명령어를 통해서 구동을 시켜봅니다.
(구동시키기전에 cd 폴더명 으로 폴더에 들어가야합니다.)
정상적으로 설치가 되었다면 저런 문구들이 나오면서
포트 3000번으로 자동으로 홈페이지가 뜹니다.
그러면 성공입니다!
App.js를 수정해주었습니다.
(return 부분을 잘 바꾸시면 됩니다.)
전체 파일 구조
|
react-nodejs ㄴ create-react-app (App.js, App.css 등등..) ㄴ package.json ㄴ package-lock.json ㄴ node-modules |
현재까지의 파일 구조입니다.
단촐합니다.
2. Node.js 설치
저희는 폴더의 구조를 바꿔야합니다.
client 폴더 = React
server 폴더 = Node.js
가 돌아가는 방식으로 바꿀겁니다.
폴더 구조를 바꿔준 다음
Node가 설치가 되어있는지 확인해야합니다.
위와 같이 명령어를 입력하고 에러가 뜬다면 설치가 안된것이기 때문에
sudo apt-get install npm
sudo apt-get install npm다음과 같이 입력해서 설치를 해줍니다.
그 다음에는 node.js를 사용하기 위한 모듈들을 설치해야합니다.
저희가 쓸 모듈들은 express, body-parser, mysql, nodemon 입니다.
//server.js
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.send('hello node!');
})
app.listen(port, () => console.log(`Listening on port ${port}`));server/server.js
node ./server.js그럼 작성한 server.js를 구동해봅시다.
저희는 5000번 포트로 연결을 했으니 localhost:5000으로 접속하여 확인을 해보고
다음과 같이 나온다면 성공!
|
전체 파일 구조
react-nodejs ㄴclient (클라이언트 폴더) ㄴ create-react-app ㄴ package.json ㄴ package-lock.json ㄴ node-modules ㄴserver (서버 폴더) ㄴ server.js ㄴ package.json ㄴ package-lock.json ㄴ node-modules |
3. React와 Node.js 동시 구동
Create-react-app은 3000번 포트에서 구동
node.js 서버는 5000번 포트에서 구동이됩니다.
우리는 proxy를 통해서 3000번 포트가 들어오면 5000번 포트로 리디렉션(방향을 다시 설정)하게 설정해 놓아야 합니다.
{
"name": "react-nodejs-docker",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"http-proxy-middleware": "^1.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy" : "http://localhost:5000/"
}
client/package.json
맨 밑에 proxy : http://localhost:5000/ 으로 설정해주어야 합니다.
이렇게되면 3000번 포트로 접속해도 5000번 포트로 접속을 한 것처럼 보이게 됩니다.
프록시는 포트의 사이에 있어서 우리가 3000번으로 들어가면 5000번으로 쏘아주는 역할을 하는 겁니다.
요기까지 설정이 완료가 되었으면 React와 Node.js를 병렬적으로 구동을 해야합니다.
그러기 위해서 server폴더, client폴더가 동시에 위치하는 메인폴더로 이동해서
메인 폴더에서 yarn 설치 후 (npm과 비슷한 package manager)
npm install -g yarnyarn 설치는 다음과 같이하고
메인폴더에서 package.json 파일은
yarn init -y위의 커맨드를 입력해주면 메인 폴더에 package.json 파일이 생깁니다.
이제 package.json을 수정해서 병렬적으로 실행되도록 할것입니다.
{
"name": "react-nodejs-docker",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"client": "cd client && npm start",
"server": "cd server && node server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"concurrently": "^4.0.1"
}
}
package.json (메인 폴더)
메인 폴더에서는 yarn을 사용하고 client에서는 npm으로 사용했습니다.
"client": "cd client && npm start",
"server": "cd server && nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
client는 "cd client" 명령어를 입력한 뒤 "npm start" 명령어를 실행해라.
server는 "cd server" 명령어를 입력한 뒤 "nodemon server.js" 명령어를 실행해라.
그리고 dev 명령어를 입력하면 server와 client를 동시에 병렬적으로(concurrently)하게 실행해라라는 뜻입니다.
그리고 이 명령어를 실행하기 위해서는 concurrently 모듈이 깔려있어야합니다.
위에 package.json 파일 복사하신 다음
메인 폴더에서 yarn install 입력하시면 자동적으로 패키지들이 설치됩니다.
|
전체 파일 구조 react-nodejs(메인 폴더) ㄴclient (클라이언트 폴더) ㄴ create-react-app ㄴ package.json ㄴ package-lock.json ㄴ node-modules ㄴserver (서버 폴더) ㄴ server.js ㄴ package.json ㄴ package-lock.json ㄴ node-modules package.json package-lock.json yarn.lock |
client = 포트 3000번
server = 포트 5000번
그리고 설정이 잘되었는지 확인하기위해
메인 폴더에서
yarn dev를 입력해서 병렬적으로 실행을 시켜봅니다.
병렬적으로 실행이 되는 것을 확인했습니다.
그 다음에는 mysql docker 이미지를 다운받아서 컨테이너로 실행을 시키고,
노드 js와 연결을 시켜보겠습니다.
4. mySQL image pull하기
우선 이것을 하려면 도커가 설치가 되어있어야합니다.
도커 설치는 위의 사이트를 참고해주세요!
mySQL 이미지를 설치하기 위해서는 도커 허브에 접속해서 이미지가 있나 확인을 해봅시다.
그 다음에는 docker pull mysql 명령어를 통해서 이미지를 설치합니다.
뒤에 태그를 안붙이면 제일 최신 버전(latest)으로 설치를 진행합니다.
그리고 설치가 잘 되었나 확인하기 위해서
docker images명령어로 이미지를 확인해봅시다.
잘 설치가 되었습니다.
5. mySQL, React, Node.js 연동하기
쿠버네티스로 관리하기 전에 간단히 연동을 해서 잘 동작하는지 확인해보겠습니다.
mySQL 이미지를 컨테이너에서 실행을 하면
볼륨(저장소)설정이나 이런것들을 하나도 안해준다면
만들었던 테이블, 데이터베이스는 컨테이너가 종료되면 다 사라지게되어있습니다.
그래서 그런것들은 서버를 전부 구축하고 설정을 해주도록 하겠습니다!
지금은 간단한 웹 애플리케이션 테스트를 해보겠습니다.
우선 mySQL 컨테이너를 실행하기 위해 docker-compose 파일을 생성해주었습니다.
이미지는 mysql을 사용한다는 뜻이고, mysql에 접속할 때 패스워드는 admin으로 설정해주었습니다.
그리고 docker-compose 파일이 있는 곳에서
docker-compose up -d명령어를 입력하시면 컨테이너가 실행이 됩니다.
docker ps
docker ps명령어를 치면 현재 실행중인 컨테이너를 볼 수 있습니다.
docker exec -it <컨테이너 ID> /bin/bash를 통해서 컨테이너를 쉘로 접근할 수 있습니다.
mysql -u root -p
mysql -u root -p를 통해서 mysql 접속합니다. 패스워드는 아까 설정해주었던 admin 입니다.
그리고 데이터베이스와
간단한 테이블을 만들어보았습니다.
데이터베이스 명 : db
테이블 명 : table1
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component{
state = {
response: '',
post: '',
responseToPost: '',
};
onClickButton = async e => {
e.preventDefault();
const response = await fetch('/api/db', {
method: 'GET',
});
const body = await response.text();
this.setState({responseToPost: body});
}
onClickDeleteButton = async e => {
e.preventDefault();
const response = await fetch('/api/delete', {
method: 'GET',
});
const body = await response.text();
this.setState({responseToPost: body});
}
onClickInsertButton = async e => {
e.preventDefault();
const response = await fetch('/api/insert', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ post: this.state.post }),
});
const body = await response.text();
this.setState({responseToPost: body});
}
render(){
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
정현수
</p>
<form onSubmit={this.onClickInsertButton}>
<input
type="text"
value={this.state.post}
onChange={e => this.setState({post: e.target.value})}
/>
<button type="submit">삽입하기</button>
</form>
<button onClick={this.onClickButton}>데이터 보기</button>
<button onClick={this.onClickDeleteButton}>모든 데이터 삭제</button>
<p>
{this.state.responseToPost}
</p>
</header>
</div>
);
}
}
export default App;
client/App.js
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// app.get('/', (req, res) => {
// res.send('hello node!');
// })
const connection = mysql.createConnection({
host: '172.21.0.2',
user: 'root',
post: 8080,
password: 'admin',
database: 'db'
});
connection.connect();
app.get('/api/db', (req,res) => {
let sql = 'select * from table1';
connection.query(sql, (err, rows) => {
if(err){
res.send('Opps. Error\n');
} else {
res.send(rows);
}
})
})
app.get('/api/delete', (req,res) => {
let sql = 'delete from table1';
connection.query(sql, (err, rows) => {
if(err){
res.send('삭제가 실패했습니다.\n');
} else {
res.send("모든 데이터가 삭제되었습니다.");
}
})
})
// API 라우팅 !!!
app.post('/api/insert', (req, res) => {
let sql = `insert into table1 (name) value ('${req.body.post}');`;
connection.query(sql, (err, rows) => {
if(err){
res.send('삽입이 실패했습니다.');
} else {
res.send('삽입이 완료 되었습니다.');
}
})
});
app.listen(port, () => console.log(`Listening on port ${port}`));server/server.js
그 다음으로는 서버와 클라이언트를 변경시켜보았습니다.
그리고 메인 폴더에서 실행시키면
데이터를 입력하고 삽입하기를 누르면 데이터베이스에 저장이 되고,
데이터 보기를 누르면 데이터베이스에 저장된 데이터를 보여줍니다.
그리고 모든 데이터 삭제버튼을 누르면 모든 데이터가 삭제되는식의 간단한 애플리케이션을 만들어보았습니다.
--- 7월 23일 완료
참고
docker image 이용해서 Node.js와 mysql 연동하기
'Kubernetes & Docker' 카테고리의 다른 글
| Kubespray와 Ansible을 이용한 Kubernetes 설치하기 - 1편 (2) | 2020.07.28 |
|---|---|
| React와 Node.js 애플리케이션 Docker image build하기 (0) | 2020.07.24 |
| 쿠버네티스 공식문서 파헤치기 : 레플리카셋(ReplicaSet) (0) | 2020.07.16 |
| 쿠버네티스 공식문서 파헤치기 : 파드(Pod) (0) | 2020.07.16 |
| 쿠버네티스 공식문서 파헤치기 : 클러스터 아키텍처 (0) | 2020.07.15 |