[Just Site] 6. MYSQL과 서버 연결하기 (feat. Network)

않이 임시저장 했는데 글이 날라가버렸다
너무한거 아냐?

---

Networking란

Multi container apps

Networking이란 여러 컨테이너가 서로 통신할 수 있도록 하는 것이다.

두가지를 주의해서 보자.

--network: 네트워크의 이름. 같은 네트워크를 가져야 통신이 가능하다.
--network-alias: 네트워크에서 쓰는 이름. 이 이름으로 호출할 수 있다.

---

프로젝트 구성

우선 서버를 구동할 때 DB에 대한 정보를 전달한다.

docker run -dp 3001:3001 -v cd:/app --network just-site -e MYSQL_HOST=mysql -e MYSQL_USER=root -e MYSQL_PASSWORD=secret -e MYSQL_DB=todos songinho/just_site_backend

just-site라는 네트워크를 만들고, MYSQL 설정 정보들을 전달했다.

이제 MYSQL을 구동해보자.

docker run -d --network just-site --network-alias mysql -v todo-mysql-data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=secret -e MYSQL_DATABASE=todos mysql:5.7

마찬가지로 just-site라는 네트워크에 연결하고, mysql이라는 alias를 주었다.

---

코드 추가

Frontend에 추가하기

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

function App() {
  const [greetings, setGreetings] = useState<string>("");
  let test = 'b';

  useEffect(() => {
    axios.get("http://localhost:3001/items")
      .then(function (response) {
        setGreetings(JSON.stringify(response.data));
      });
  }, []);

  const onNewItem = () => {
    axios.post("http://localhost:3001/items", { name: test })
      .then((response) => {
        test = test + 'b';
      });
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {greetings}
        </p>
        <button onClick={onNewItem}>
          Add
        </button>
      </header>
    </div>
  );
}

export default App;

---

Backend에 추가

app.use(cors({
  origin: 'http://localhost:3000', // 허락하고자 하는 요청 주소
  credentials: true, // true로 하면 설정한 내용을 response 헤더에 추가 해줍니다.
}));

app.use(bodyParser.json());

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.get('/greetings', (req, res) => {
  res.send(`Hi, I'm goldenfish diary.`);
});

app.get('/items', getItems);
app.post('/items', addItem);

db.init().then(() => {
  app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
  });
}).catch((err) => {
  console.error(err);
  process.exit(1);
});

---

총평

생각보다 단순한 구조였다.

그냥 Volume 생성하고 Network를 연결하는걸로 끝났다.