리액트 앱과 백엔드 서버 연동 테스트4 (+ docker)

아래 작업을 진행하기 전에 $ sudo docker pull rockylinux:9.1 명령어로 록키 리눅스 9.1 이미지를 다운 받았다.

jcha@hjcha-AERO-15-Classic-SA:/usr/local/my-app$ sudo su
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# docker rm -f catnails
catnails
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# sudo docker run --privileged -d -it -p 82:80 -p 3001:3000 --name catnails rockylinux:9.1 /sbin/init
09a9e50129a06b5db94a58669507f50599449f2fbb948864d0a2957a373bf407
docker: Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: exec: "/sbin/init": stat /sbin/init: no such file or directory: unknown.
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# docker rm -f catnails
catnails
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# sudo docker run --privileged -d -it -p 82:80 -p 3001:3000 --name catnails rockylinux:9.1 /bin/init
668a830eed2b3e883f0fd62d689b3b3f5c7bbc73f8d71b9177e7908bb1a5022a
docker: Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: exec: "/bin/init": stat /bin/init: no such file or directory: unknown.
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# docker rm -f catnails
catnails
root@hjcha-AERO-15-Classic-SA:/usr/local/my-app# sudo docker run --privileged -d -it -p 82:80 -p 3001:3000 --name catnails rockylinux:9.1
hjcha@hjcha-AERO-15-Classic-SA:~$ sudo docker ps
CONTAINER ID   IMAGE            COMMAND       CREATED       STATUS       PORTS                                                                          NAMES
8abccd8e76e3   rockylinux:9.1   "/bin/bash"   3 hours ago   Up 3 hours   0.0.0.0:82->80/tcp, :::82->80/tcp, 0.0.0.0:3001->3000/tcp, :::3001->3000/tcp   catnails

포스팅 본문에는 없지만 스프링부트 서버를 컴파일 할 때 사용한 것과 동일한 jdk17버전을 컨테이너 안으로 넣어 주고

/etc/profile에 환경변수로 적어준 뒤, source /etc/profile 하여 동기화 하였다.

 

 

1. 백엔드 서버

포트는 10000번을 사용한다.

(호스트머신의 관점으로는 172.17.0.2:10000, 컨테이너 관점에서는 127.0.0.1:10000)

 

127.0.0.1:3000으로부터 GET요청을 받으면 json 객체를 반환한다.

package com.test.reactspringboottest.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class ApiController {
    @GetMapping("/apitest")
    public String api() {
        return "api";
    }

    @GetMapping("/bpitest")
    public TestClass bpi(){
        TestClass testClass = new TestClass();
        testClass.setName("catnails");
        testClass.setAge("이 업스트림 서버는 도커 컨테이너 내부에 있습니다.");

        return testClass;

    }
}

class TestClass {
    private String name;
    private String age;

    public String getName(){
        return name;
    }
    public String getAge(){
        return age;
    }

    public void setName(String name){
        this.name = name;
    }
    public void setAge (String age){
        this.age = age;
    }

}

 

호스트 머신에서 통신 확인

호스트 머신은 우분투이다.

hjcha@hjcha-AERO-15-Classic-SA:/usr/local$ curl -X GET 'http://172.17.02:10000/api/apitest'
api

hjcha@hjcha-AERO-15-Classic-SA:/usr/local$ curl -X GET 'http://172.17.02:10000/api/bpitest'
{"name":"catnails","age":"이 업스트림 서버는 도커 컨테이너 내부에 있습니다."}

 

2. 프론트 서버

리액트 앱이며 localhost:3001번 포트 사용한다.

localhost:3001 ==> 172.17.0.2:3000

 

여기서 [get data] 버튼을 클릭하면 컨테이너 내부에서 동작하는

127.0.0.1:10000 (호스트머신의 관점으로는 172.17.0.2:10000)으로 GET 요청을 보낸다.

 

 

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  //컨테이너 내부의 localhost:10000번으로 프록시
  "proxy":"http://127.0.0.1:10000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//  <React.StrictMode>
//    <App />
//  </React.StrictMode>

<div>
        <input type="button" value="get data" onClick={
                function(){
                        fetch('/api/bpitest')
                        .then(function(result){return result.json})
                        .then(function(json){console.log(json);})
                }.bind(this)
        }>
        </input>
</div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
~

 

3. 동작 확인

 

JSON객체를 응답으로 받았다.