하나의 서버 인스턴스에 운영 및 테스트서버 두기

운영서버와 테스트 서버는 독립된 서버에 각각 두는 것이 기본적으로 권장사항이라고 한다.

그렇지만 인스턴스를 단 하나만 가지고 있는 상황에서 테스트 서버가 필요했다.

 

🪄한 인스턴스에 운영서버와 테스트서버 두는 구조

하나의 인스턴스에 운영서버, 테스트서버를 구축하려면 어떻게 해야 할까?

나는 운영서버와 테스트경로의 접속 path로 구분하는 방법을 적용했다.

아래와 같은 구조다.

 

프론트 서버에 대해 할 이야기가 있다.

테스트 서버를 구축하던 중, 리액트 서버를 nginx 안에 뒀을 때 장점을 배우게 되어서 테스트서버는 nginx 안에서 빌드하여 사용하기로 했다. 이제 운영서버도 그렇게 하는 것이 낫겠다.

 

결국 이렇게 테스트서버, 운영서버를 분리해서 띄워놓았다.

이렇게 동일서버에 뒀을 때 단점은, 호스트에 트래픽이 몰릴 경우 둘 다 사망한다는 것이겠다!

그렇지만 지금은 이것이 최선이라고 생각한다.

 

 

---

🪄 설정

아래와 같은 설정이 필요했다.

 

✨ Nginx

개발용 리버스 프록시를 추가했다.

# 개발 서버
upstream dev-seeandyougo {
    server dev-seeandyougo:8080;
}


server {
    listen 80;
    client_max_body_size 0;
    proxy_buffering off;

    location /dev {
        alias /app/build/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /dev/api/ {
        proxy_pass http://dev-seeandyougo/api/;
    }
}

 

✨ React

1. package.json에서 "homepage": "/dev"를 추가한다. 

{
  "homepage": "/dev",
  "name": "~~~",
  "version": "0.1.0",
  "dependencies": {
  ...
  }
}

 

2. index.js에서 BrowserRouter basename = "/dev" 를 추가한다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  // </React.StrictMode>
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter basename="/dev">
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>
);

 

3. 

백엔드로 api 요청날리는 부분 경로도 개발 컨테이너로 가도록 수정한다.

예를들어서 이렇다.

- 기존 운영서버의 요청경로 : /api

- 개발서버로 가는 요청경로: /dev/api

 

4.

카카오 로그인을 사용중인데, 그 redirect uri도 그냥 /oauth가 아닌 /dev/oauth 요청으로 가야 한다.

카카오 developer에서도 이 redirect uri를 추가등록 해줘야 한다.

(추가 오류 해결중.. 새로 등록한 redirect uri 요청시 / 로 이동한다.. 해결중..ㅜㅜ)

=> 카카오 로그인이 문제가 아니라 다른 문제로 생각된다.

브라우저 주소창에 직접 /dev/XX 로 접속하면 /로 이동하고

클릭을 통해 이동하면 /dev/XX로 잘 이동된다. 이 차이를 일단 파악해야할듯(다음주에 진행)

그래시 로그인시 아래 코드에서 /로 이동하는 문제가 발생하는 것으로 파악된다.

const handleLogin = () => {
   window.location.href = kakaoURL;
};

목요일 이후에 이어서 보자!!

 

✨ Backend

테스트용 백엔드 서버 컨테이너를 새로 띄웠다.

그리고 백엔드에서도 역시 key.yml에 있는 카카오 redirect uri 수정해줘야 한다.

 

 

 

---

🪄 TODO

 

- 개발 / 운영 서버를 코드수정없이 한번에 하려면 설정파일 최적화가 필요하겠다. 

- 개발서버에 CI/CD 적용해야겠다.