[Code-Server] 코드서버를 Nginx로 프록시 호스팅하기

ID : 2401301657

Tag : #code-server #linux #nginx

개요

Code-Server를 호스팅 하고 나서 가장 큰 걸림돌이 되는 부분이 있었다. SSL이 적용이 되지 않을 경우 웹 뷰의 이용이 제한되는 것이다. 이를 해결하기 위해 여러 가지 삽질을 하였고 내가 발견한 가장 최적의 방법은 code-server를 nginx에 Proxy Pass를 적용한 후 SSL 인증서를 추가하는 것이다.
이번 포스팅에서는 Proxy_Pass를 적용하는 첫 번째 단계부터 진행하려고 한다.

 

구성

 

아래의 항목은 내가 작업을 진행하기 위해 사용한 환경 구성이다.
버전이 맞지 않더라도 아래의 항목이 이미 설치되어 있다는 가정 하에 작업을 진행할 예정이다.

1. OS : Ubuntu 20.04.5 LTS (GNU/Linux 5.4.0-1100-raspi aarch64)
2. Code-Server : v4.20.1
3. Nginx : v1.18.0 (ubuntu)

 

진행

1. Code-Server 설정 확인

Code-Server의 아이피와 포트를 먼저 확인해야 한다.

cat /home/<USER_USERNAME>/.config/code-server/config.yaml

 

<출력 결과>

bind-addr: 127.0.0.1:8080 
auth: password 
password: <MY_PASSWORD>
cert: false

 

여기서 bind-addr에 나온 아이피와 포트를 외워두자

 

2. Nginx 설정 변경

Nginx가 설치되어 있다는 상황이지만 만약 설치가 필요하다면

sudo apt-get update
sudo apt-get install nginx

를 사용하여 Nginx를 설치하자.

설치가 되어 있다면 다음같이 구성파일을 변경해야 한다.
최신 Nginx 버전이라면 이미 sites-enabled로 적용이 되어있을 것이다.
만약 적용이 안되어 있다면 아래의 예제처럼 변경을 해야 한다.

sudo vi /etc/nginx/nginx.conf

 

 

<nginx.conf> 파일 변경 전

...

include /etc/nginx/conf.d/*.conf;

...

 

 

<nginx.conf> 파일 변경 후

...

include /etc/nginx/sites-enabled/*.conf;

...

 

그런 다음
/etc/nginx/ 폴더 안에
sites-available
sites-enabled
라는 폴더가 있어야 되는데 없다면 아래의 코드로 생성하자

mkdir /etc/nginx/sites-available
mkdir /etc/nginx/sites-enabled

 

여기서 sites-available 폴더는 사용가능한 사이트들에 대한 구성 파일들을 넣어두는 용도로 사용하고, sites-enabled에 바로가기를 추가 함으로써 해당 사이트를 활성화할 것인지 여부를 정할 수 있게 한다.

그다음 sites-available 폴더 안에 서버 구성파일을 만들어야 되는데 파일명은 자유롭게 해도 좋다.

 

vim /etc/nginx/sites-available/my-site.conf

 

 

</etc/nginx/sites-available/my-site.conf> 파일

server {
    listen 5500;  #외부 접근을 위한 port (포트포워딩과 ufw방화벽 해제를 해야함.)
    server_name mydomain.com; #외부에서 호출하면 이동시킬 도메인 OR IP도 가능

    location / {
        proxy_pass http://127.0.0.1:8080; #방금 외워둔 내부 아이피의 코드서버 주소
        proxy_set_header Host mydoamin.com:5500; #(중요) 프록시 패스가 이뤄질때 해당 호스트명을 기준으로 프로토콜을 업데이트하는데 이부분이 잘못될 경우 WebSocket[1006] 오류가 발생한다.
        proxy_set_header Upgrade $http_upgrade; #Code-Server의 WebSocket 프로토콜 업그레이드를 위한 헤더 지정
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
        #access_log /home/<USER_NAME>/access.log; 
        #error_log /home/<USER_NAME>/error.log; #로깅을 원한다면 주석을 해제하고 사용하면 된다.
    }
}

# server {
# #다른 서버를 추가할 경우 포트가 겹치지 않게 추가하자.
#}

 

작성을 완료했으면 :wq를 입력 후 저장하여 나오자.

이제 sites-enabled폴더에 바로가기를 생성해줘야 한다.

sudo ln -s /etc/nginx/sites-available/my-site.conf /etc/nginx/sites-enabled/my-site.conf

 

이제 /etc/nginx/sites-enabled 폴더에 가보면 my-site.conf라는 똑같은 파일이 바로가기 형태로 남아있을 것이다. 만약 사이트를 일시적으로 닫고 싶으면 sites-available 폴더의 파일을 건들지 말고 sites-enabled 폴더의 해당 바로가기를 삭제하면 된다.

정상적으로 작동이 되는지 확인하기 위해 아래의 명령어를 입력하자.

sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok 
nginx: configuration file /etc/nginx/nginx.conf test is successful

 

OK문자가 뜨면 my-site.conf 파일에 문법 오류가 없다는 것이다.

 

그다음 nginx 재시동

sudo systemctl restart nginx

 

만약에 잘 적용이 안 됐다면 브라우저의 캐시를 삭제 후 다시 시도해 봐야 한다.