GIT : https://github.com/junghyeonsu/react-node-app-with-mysql

BLOG : https://junghyeonsu.tistory.com/42

DOCKERHUB : https://hub.docker.com/repository/docker/jung660317/react-node-app-with-mysql

Docker와 docker-compose가 설치가 되어있어야 합니다.

정말 정말 간단한 mysql과 연결한 react-node web app 입니다.

전체 파일 구조

• 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
  
• yarn.lock
  

react = 3000 port (proxy : 5000포트)
node.js = 5000 port
mysql = 8080 port

container로 실행 방법

Docker와 docker-compose가 설치가 되어있어야 합니다.

정말 정말 간단한 mysql과 연결한 react-node web app 입니다.

1. 우선 mysql image를 pull 한다.

링크 : https://hub.docker.com/_/mysql

2. react-node-app-with-mysql Image를 pull 한다.

docker pull jung660317/react-node-app-with-mysql

3. mysql container에 접속해서 mysql 쉘에 접속한다.

docker exec -it <mysql container name> /bin/bash

mysql -u root -p

password : admin

4. "db" 이름의 데이터베이스, "table1" 이름의 테이블을 생성한다.

테이블의 필드의 이름은 아무거나 상관없지만 하나의 필드만 적용해야 합니다

데이터베이스 명, 테이블 명은 고정해야 합니다.

create database db;

use db;

create table table1(name char(20));

5. docker-compose.yml 파일 작성

version: '3.1'

services:
  mysql:
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    container_name: mysql
    network_mode: host
    environment:
      MYSQL_ROOT_PASSWORD: admin

  adminer:
    image: adminer
    restart: always
    network_mode: host
    ports:
      - 8080:8080

  react-node-app-with-mysql:
    image: jung660317/react-node-app-with-mysql
    container_name: react-node-app
    restart: always
    ports:
      - 3000:3000
    network_mode: host

6. docker-compose 실행

docker-compose up -d --build

7 localhost:3000에 접속

http://localhost:3000/

정상 동작 확인

---

삽입 버튼

input 창에 입력한 데이터를 넣어줍니다.

데이터 보기 버튼

mysql 데이터베이스에 들어간 데이터를 보여줍니다.

모든 데이터 삭제 버튼

mysql 데이터베이스에 들어간 데이터를 모두 삭제합니다.