code-server로 사지방에서 코딩하기 - 3 (code-server로 웹 서비스 실행 시 주의할 점)

2wndrhs·2022년 5월 6일
2

군대

목록 보기
3/3

들어가며

이번 글은 전 편에서 만든 code-server에서 웹 서비스를 실행시킬 때 주의할 점들에 대해서 알아보겠다.

현재 프론트엔드 개발을 하고 있다보니 code-serverVueReact 개발 서버를 띄울 일이 많은데 서버를 띄우고 평소 로컬에서 하던 것처럼 http://인스턴스의_외부_IP:포트번호 로 접속해보면 접속이 안된다🤔

생각해보면 http://인스턴스의_외부_IP:포트번호는 우리가 만든 GCP 인스턴스의 포트로 접속을 하는 것인데 우리는 GCP 인스턴스의 80 포트에 띄운 code-server와 9000 포트에 띄운 portainer 말고는 GCP 인스턴스의 다른 포트를 사용한 적이 없으므로 접속이 되지 않는 것이 당연해보인다.

그렇다면 code-server 안에서 실행시킨 개발 서버와 같은 웹 서비스는 로컬에서 어떻게 접근할 수 있을까?

code-server의 sub-path

다행히도 code-server 공식 문서에 해결방법이 나와있다. 해결방법은 바로 code-server 에서 제공해주는 subpath를 이용하는 것이다.

간단하게 설명하자면 code-server 에서 8081 포트에 웹 서비스를 실행시켰다면 http://인스턴스의_외부_IP:8081 로 접속하는 것이 아니라 http://인스턴스의_외부_IP/proxy/8081 로 접속하는 것이다. 실제로 웹 개발을 할 때 자주 사용하는 live-server를 이용해 접속이 잘 되는지 확인해보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Code-Server</h1>
  </body>
</html>

간단한 html 파일을 홈 디렉터리에 작성하고 html 파일에 우클릭을 한 다음 Open with Live Server를 눌러 기본 포트인 5500 포트에서 개발 서버를 실행해보자.

http://인스턴스의_외부_IP/proxy/5500/test.html 로 접속해보면 html 파일이 잘 보이는 것을 알 수 있다😀

다음으로는 code-server 에서의 React, Vue 프로젝트 설정 방법에 대해서 알아보겠다.

code-server의 React 개발

code-server 에서 create-react-app 을 이용해 React 프로젝트를 만들고 npm start로 기본 포트인 3000 포트에 개발 서버를 실행시켜보자.

그런 다음 위에 서술한 것 처럼 code-serversub-path 를 이용하여 http://인스턴스의_외부_IP/proxy/3000 으로 접속해보면...

접속이 되긴 하는데 화면에 아무것도 나오지가 않는다🤔 그 이유는create-react-app기본적으로 서버의 루트 경로에서 호스팅된다고 추측하기 때문이다.

따라서 create-react-app이 서버의 루트 경로가 아니라 /proxy/3000 경로를 기본 경로로 추측할 수 있도록 설정을 해줘야 한다.

code-server React 개발 서버 기본 경로 설정

위에 서술한 것처럼 create-react-app/proxy/3000 경로를 기본 경로로 추측할 수 있도록 하려면 결국 create-react-appwebpack 설정을 수정해야 한다. 다행히 create-react-app은 간단하게 webpack 설정을 수정할 수 있도록 Advanced Configuration 을 제공한다.

리액트 프로젝트 루트 경로에 .env 파일을 생성하고 아래와 같이 작성하자.

PUBLIC_URL=/absproxy/3000

이렇게 .env 파일을 작성하고 npm start로 개발 서버를 다시 실행시키면...

정상적으로 리액트 개발 서버가 실행된 모습을 볼 수 있다😀

여기서 PUBLIC_URL의 값이 /proxy/3000이 아닌 /absproxy/3000인 것에 대하여 의문점이 들 수 있다. 그 이유는 code-server가 내부적으로 /proxy/<port> 경로로 오는 요청을 /로 재작성하기 때문이다.

따라서 code-server 가 요청을 재작성하지 못하도록 PUBLIC_URL 값을 /absproxy/<port> 형식으로 작성해줘야 한다.

이와 관련하여 더 자세한 내용이 궁금하다면 code-server docs 를 참고해보도록 하자.

code-server React Web Socket 서버 기본 경로 설정

이제 code-server 에서 정상적으로 리액트 개발을 할 수 있게 되었지만 개발을 진행하다보면 문제점을 하나 발견할 수 있다. 로컬에서 개발할 때는 잘만 작동하던 HMR(Hot Module Replacement)이 작동을 하지 않는다는 것이다😨

webpack은 내부적으로 Web Socket 서버와 통신을 하면서 HMR을 구현한다. 따라서 HMR을 위해서는 webpack 설정을 통해 Web Socket 서버 경로를 변경해주어야 한다.

CRA가 제공하는 Advanced ConfigurationWDS_SOCKET_PATH 라는 변수로 기본 Web Socket 서버 경로를 변경할 수 있지만 테스트해본 결과 HMR이 정상적으로 작동하지 않았으므로 craco 를 이용하여 직접 webpack 설정을 변경해보도록 하겠다.

현재 리액트 프로젝트 루트 경로에서 터미널을 열고 아래와 같이 입력한다

npm install @craco/craco@alpha --save

설치가 완료되면 프로젝트 루트 경로에 craco.config.js 파일을 생성하고 아래와 같이 작성한다

module.exports = {
  devServer: (devServerConfig) => {
    devServerConfig.webSocketServer = {
      options: { path: process.env.PUBLIC_URL + "/ws" },
    };

    return devServerConfig;
  },
};

다음으로 프로젝트 루트 경로에 있는 package.json 파일에서 script 부분을 아래와 같이 수정한다.

"scripts": {
// -   "start": "react-scripts start",
	"start": "craco start",
}

마지막으로 .env 파일을 아래와 같이 수정한다.

PUBLIC_URL=/absproxy/3000
WDS_SOCKET_PORT=0

이렇게 craco를 통해 Web Socket 서버 경로를 변경해주고 npm start 로 개발 서버를 다시 실행시키면...

정상적으로 Web Socket 서버와 통신이 이루어지고 HMR이 잘 동작하는 것을 확인할 수 있다😀

code-server의 Vue 개발

code-server 에서 vue-cli 을 이용해 Vue 프로젝트를 만들고 npm run serve로 8081 포트에 개발 서버를 실행시켜보자. 기본 포트인 8080 포트를 code-server가 점유하고 있으므로 서버는 8081 포트에서 실행될 것이다.

리액트 프로젝트와 마찬가지로 http://인스턴스의_외부_IP/proxy/8081 경로로 접속해보면 접속은 되는데 화면에 아무것도 나오지 않는 것을 알 수 있다. 그 이유는 vue-cli 또한 기본적으로 서버의 루트 경로에서 호스팅 된다고 추측하기 때문이다.

따라서 vue-cli 역시 /absproxy/8081 경로를 기본 경로로 추측할 수 있도록 설정을 해주어야 한다.

code-server Vue 개발 서버 기본 경로 설정

create-react-app 과 마찬가지로 vue-cli도 간단하게 webpack 설정을 수정할 수 있는 vue.config.js 를 제공한다.

Vue 프로젝트 루트 경로에 vue.config.js 파일을 생성하고 아래와 같이 작성하자.

module.exports = {
  publicPath: '/absproxy/8081',
};

이렇게 vue.config.js 파일을 작성하고 npm run serve로 개발 서버를 다시 실행시키면...

정상적으로 Vue 개발 서버가 실행된 모습을 볼 수 있다😀

code-server Vue Web Socket 서버 기본 경로 설정

Vue 개발서버가 정상적으로 실행 되고 있는 것처럼 보이지만 역시나 HMR이 작동하지 않는다😨

해결방법은 예상했던 것처럼 Web Socket 서버의 기본 경로를 수정해주어야 한다.

vue.config.js 파일을 아래와 같이 수정하자.

module.exports = {
  publicPath: '/absproxy/8081',
  devServer: {
    public: 'http://인스턴스의_외부_IP/absproxy/8081',
    sockPath: '/absproxy/8081/sockjs-node',
  },
};

이렇게 Web Socket 서버 경로를 변경해주고 npm run serve 로 개발 서버를 다시 실행시키면 HMR이 정상적으로 동작하는 것을 볼 수 있다.

0개의 댓글