웹사이트 검색

Ubuntu 22.04에서 코드 서버 클라우드 IDE 플랫폼을 설정하는 방법

저자는 Write for DOnations 프로그램을 선택했습니다.

소개

개발자 도구가 클라우드로 이동함에 따라 클라우드 IDE(통합 개발 환경) 플랫폼의 생성 및 채택이 증가하고 있습니다. Cloud IDE를 사용하면 비호환성을 최소화하고 생산성을 향상시키는 통합 개발 환경에서 작업할 수 있도록 개발자 팀 간의 실시간 협업이 가능합니다. 웹 브라우저를 통해 액세스할 수 있는 클라우드 IDE는 모든 유형의 최신 장치에서 사용할 수 있습니다.

원격 서버에서 실행되고 브라우저에서 직접 액세스할 수 있는 Microsoft Visual Studio Code. Visual Studio Code는 Git 지원, 코드 디버거, 스마트 자동 완성, 사용자 지정 및 확장 가능한 기능이 통합된 최신 코드 편집기입니다. 코드 서버를 사용하면 서로 다른 운영 체제를 실행하는 다양한 장치를 사용할 수 있으며 항상 일관된 개발 환경을 사용할 수 있습니다.

이 자습서에서는 Ubuntu 22.04 시스템에 코드 서버 클라우드 IDE 플랫폼을 설정하고 무료 Let’s Encrypt TLS 인증서로 보호하여 도메인에 노출합니다. 자습서가 끝나면 Microsoft Visual Studio Code가 Ubuntu 22.04 서버에서 실행되고 도메인에서 사용 가능하며 암호로 보호됩니다.

전제 조건

  • 최소 2GB RAM, 루트 액세스 및 루트가 아닌 sudo 계정으로 Ubuntu 22.04를 실행하는 서버. 이 초기 서버 설정 가이드에 따라 설정할 수 있습니다.\n
  • Nginx가 서버에 설치되었습니다. 이를 수행하는 방법에 대한 가이드는 Ubuntu 22.04에 Nginx를 설치하는 방법의 1~4단계를 완료하십시오.\n
  • 서버를 가리키는 호스트 코드 서버에 완전히 등록된 도메인 이름입니다. 이 자습서에서는 전체적으로 code-server.your-domain을 사용합니다. 추가 방법에 대한 자세한 내용은 이 DigitalOcean DNS 소개에서 도메인 이름을 구입할 수 있습니다.\n

1단계 - 코드 서버 설치

이 단계에서는 최신 버전을 다운로드하고 백그라운드에서 코드 서버를 계속 실행하는 systemd 서비스를 생성하여 서버에 코드 서버를 설정합니다. 또한 서비스에 대한 다시 시작 정책을 지정하여 가능한 충돌이나 재부팅 후에도 코드 서버를 계속 사용할 수 있도록 합니다.

코드 서버와 관련된 모든 데이터를 ~/code-server라는 폴더에 저장합니다. 다음 명령으로 생성합니다.

  1. mkdir ~/code-server

그런 다음 해당 항목으로 이동합니다.

  1. cd ~/code-server

코드 서버의 Github 릴리스에서 최신 Linux 빌드를 가져와야 합니다(파일 이름에 linux가 포함됨). 작성 당시 최신 버전은 4.8.2였습니다. 다음 명령을 실행하여 wget으로 다운로드합니다.

  1. wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

그런 다음 다음을 실행하여 아카이브의 압축을 풉니다.

  1. tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

코드 서버 소스 코드가 포함된 다운로드한 원본 파일과 정확히 동일한 이름의 폴더가 생성됩니다. 다음 명령을 실행하여 /usr/lib/code-server에 복사하면 시스템 전체에서 액세스할 수 있습니다.

  1. sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

그런 다음 코드 서버 실행 파일을 가리키는 심볼릭 링크를 /usr/bin/code-server에 만듭니다.

  1. sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

다음으로 코드 서버가 사용자 데이터를 저장할 폴더를 만듭니다.

  1. sudo mkdir /var/lib/code-server

이제 code-server를 다운로드하고 시스템 전체에서 사용할 수 있게 만들었으므로 코드 서버가 항상 백그라운드에서 실행되도록 systemd 서비스를 생성합니다.

systemd가 저장하는 /lib/systemd/system 디렉토리의 code-server.service라는 파일에 서비스 구성을 저장합니다. 그것의 서비스. 텍스트 편집기를 사용하여 생성합니다(이 자습서에서는 nano를 사용함).

  1. sudo nano /lib/systemd/system/code-server.service

다음 줄을 추가합니다.

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

먼저 서비스 설명을 지정합니다. 그런 다음 이 서비스보다 먼저 nginx 서비스를 시작해야 한다고 명시합니다. [Unit] 섹션 다음에 서비스 유형을 정의하고(simple는 프로세스가 단순히 실행되어야 함을 의미함) 실행할 명령을 제공합니다.

또한 전역 코드 서버 실행 파일이 코드 서버에 특정한 몇 가지 인수로 시작되어야 함을 지정합니다.

  • --bind-addr 127.0.0.1:8080은 포트 8080에서 localhost에 바인딩하므로 내부에서만 직접 액세스할 수 있습니다. 당신의 서버.
  • --user-data-dir /var/lib/code-server는 사용자 데이터 디렉토리를 설정합니다.
  • --auth password는 위 줄에 선언된 PASSWORD 환경 변수에 지정된 비밀번호로 방문자를 인증하도록 지정합니다.

your_password를 원하는 암호로 바꾸는 것을 잊지 마십시오. 다음 줄은 systemd에게 모든 오작동 이벤트(예: 충돌 또는 프로세스 종료)에서 코드 서버를 다시 시작하도록 지시합니다.

[Install] 섹션은 서버에 로그인할 수 있을 때 이 서비스를 시작하도록 systemd에 명령합니다.

파일을 저장하고 닫습니다.

다음 명령을 실행하여 코드 서버 서비스를 시작합니다.

  1. sudo systemctl start code-server

상태를 관찰하여 올바르게 시작되었는지 확인합니다.

  1. sudo systemctl status code-server

다음과 유사한 출력이 표시됩니다.

Output

● code-server.service - code-server
     Loaded: loaded (/lib/systemd/system/code-server.service; disabled; preset: enabled)
     Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s ago
   Main PID: 2670 (node)
      Tasks: 22 (limit: 1116)
     Memory: 90.9M
        CPU: 799ms
     CGroup: /system.slice/code-server.service
             ├─2670 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
             └─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry

서버 재부팅 후 code-server가 자동으로 시작되도록 하려면 다음 명령을 사용하여 해당 서비스를 활성화하십시오.

  1. sudo systemctl enable code-server

심볼릭 링크가 생성되었다는 응답을 받게 됩니다.

Output
Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

이 단계에서는 code-server를 다운로드하고 전역적으로 사용할 수 있도록 했습니다. 그런 다음 code-server용 systemd 서비스를 생성하고 활성화하여 모든 서버 부팅 시 code-server가 시작되도록 했습니다. 다음으로 방문자와 코드 서버 간의 리버스 프록시 역할을 하도록 Nginx를 구성하여 도메인에 노출합니다.

2단계 - 도메인에 코드 서버 노출

이 섹션에서는 Nginx를 코드 서버의 리버스 프록시로 구성합니다.

Nginx 전제 조건 단계에서 경험한 것처럼 사이트 구성 파일은 /etc/nginx/sites-available에 저장되며 나중에 /etc/nginx/sites-enabled를 활성화합니다.

/etc/nginx/sites-available 아래의 code-server.conf 파일에 도메인에 코드 서버를 노출하기 위한 구성을 저장합니다. 편집기를 사용하여 이 파일을 생성하여 시작합니다.

  1. sudo nano /etc/nginx/sites-available/code-server.conf

다음 줄을 추가합니다.

server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
	  proxy_pass http://localhost:8080/;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection upgrade;
	  proxy_set_header Accept-Encoding gzip;
	}
}

code-server.your-domain을 원하는 도메인으로 바꿉니다.

이 파일에서 Nginx가 HTTP 포트 80을 수신하도록 정의합니다. 그런 다음 요청을 수락하고 이 특정 구성을 적용할 도메인을 Nginx에 알려주는 server_name을 지정합니다.

루트 위치(/) 블록에서 요청이 localhost:8080에서 실행 중인 코드 서버로 앞뒤로 전달되도록 지정합니다. 다음 세 줄(proxy_set_header로 시작)은 코드 서버가 광범위하게 사용하는 WebSockets의 올바른 기능에 필요한 일부 HTTP 요청 헤더를 전달하도록 Nginx에 명령합니다.

파일을 저장하고 닫습니다.

이 사이트 구성을 활성화하려면 /etc/nginx/sites-enabled 폴더에 심볼릭 링크를 만들어야 합니다. 이렇게 하려면 다음 명령을 실행하십시오.

  1. sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

구성의 유효성을 테스트하려면 다음 명령을 실행하십시오.

  1. sudo nginx -t

다음과 같은 결과가 표시됩니다.

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

구성을 적용하려면 Nginx를 다시 시작해야 합니다.

  1. sudo systemctl restart nginx

이제 도메인에서 코드 서버 설치에 액세스할 수 있습니다. 다음 단계에서는 무료 Let's Encrypt TLS 인증서로 보안을 설정합니다.

3단계 - 도메인 보안

이 섹션에서는 Certbot을 사용하여 프로비저닝할 Let’s Encrypt TLS 인증서를 사용하여 도메인을 보호합니다. 일단 구성되면 코드 서버 설치가 HTTPS 뒤에서 실행됩니다.

전제 조건의 일부로 ufw(복잡하지 않은 방화벽)를 활성화하고 암호화되지 않은 HTTP 트래픽을 허용하도록 구성했습니다. 보안 사이트에 액세스하려면 다음 명령을 실행하여 암호화된 트래픽을 수락하도록 사이트를 구성해야 합니다.

  1. sudo ufw allow https

출력은 다음과 같습니다.

Output
Rule added
Rule added (v6)

Nginx와 마찬가지로 구성을 적용하려면 다시 로드해야 합니다.

  1. sudo ufw reload

이 출력은 다음과 같이 인쇄됩니다.

Output
Firewall reloaded

그런 다음 브라우저에서 코드 서버에 사용한 도메인으로 이동합니다. 코드 서버 로그인 프롬프트가 로드됩니다.

코드 서버가 비밀번호를 묻습니다. 이전 단계에서 설정한 것을 입력하고 Enter IDE를 누릅니다. 이제 code-server에 들어가 즉시 편집기 GUI에 액세스합니다.

이제 코드 서버가 도메인에 올바르게 노출되었는지 확인했으므로 Certbot을 사용하여 Let’s Encrypt TLS 인증서를 설치하여 보호합니다.

최신 버전의 Certbot 및 해당 Nginx 플러그인을 설치하려면 다음 명령을 실행합니다.

  1. sudo apt install certbot python3-certbot-nginx -y

도메인에 대한 인증서를 요청하려면 다음 명령을 실행합니다.

  1. sudo certbot --nginx -d code-server.your-domain

이 명령에서 certbot을 실행하여 도메인에 대한 인증서를 요청합니다. -d 매개변수로 도메인 이름을 전달합니다. --nginx 플래그는 HTTPS를 지원하도록 Nginx 사이트 구성을 자동으로 변경하도록 지시합니다. code-server.your-domain을 도메인 이름으로 바꿔야 합니다.

Certbot을 처음 실행하는 경우 긴급 알림을 위한 이메일 주소를 제공하고 EFF의 서비스 약관에 동의하라는 메시지가 표시됩니다. 그러면 Certbot이 Let’s Encrypt에서 도메인에 대한 인증서를 요청합니다.

출력은 다음과 유사합니다.

Output
Requesting a certificate for code-server.your-domain

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/code-server.your-domain/privkey.pem
This certificate expires on 2023-02-01.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf
Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 * Donating to EFF:                    https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

이 출력은 Certbot이 성공적으로 TLS 인증서를 생성하고 이를 도메인의 Nginx 구성에 적용했음을 나타냅니다. 이제 브라우저에서 코드 서버 도메인을 다시 로드하고 사이트 주소 왼쪽에 있는 자물쇠를 관찰할 수 있습니다. 이는 연결이 제대로 보호되었음을 의미합니다.

이제 보안 Nginx 리버스 프록시를 통해 도메인에서 코드 서버에 액세스할 수 있으므로 코드 서버의 사용자 인터페이스를 검토할 준비가 되었습니다.

4단계 - 코드 서버 인터페이스 사용

이 섹션에서는 코드 서버 인터페이스의 일부 기능을 사용합니다. code-server는 클라우드에서 실행되는 Visual Studio Code이므로 독립 실행형 데스크톱 에디션과 동일한 인터페이스를 갖습니다.

IDE의 왼쪽에는 활동 표시줄로 알려진 측면 패널에서 가장 일반적으로 사용되는 기능인 6개 버튼의 수직 행이 있습니다.

이 막대는 사용자 정의할 수 있으므로 이러한 버튼을 이동하거나 막대에서 제거할 수 있습니다. 기본적으로 첫 번째 버튼(햄버거 메뉴 아이콘)은 드롭다운에서 일반 메뉴를 열고 두 번째 버튼(폴더 아이콘)은 프로젝트 구조의 트리형 탐색을 제공하는 탐색기 패널을 엽니다. 여기에서 폴더와 파일을 관리하고 필요에 따라 생성, 삭제, 이동 및 이름을 변경할 수 있습니다. 돋보기 버튼은 검색 및 바꾸기 기능에 대한 액세스를 제공합니다.

그 다음에는 기본 순서대로 소스 제어 공급자와 같은 소스 제어 시스템 보기를 제공하는 아이콘이 있습니다.

디버거 옵션(작은 버그 아이콘이 있는 삼각형)은 패널에서 디버깅을 위한 일반적인 작업을 제공합니다. Visual Studio Code는 필수 디버거의 확장을 기본적으로 지원합니다. 활동 표시줄의 마지막 보기인 네 개의 블록 버튼은 VSCode Marketplace에서 사용 가능한 확장에 액세스할 수 있는 메뉴를 제공합니다.

GUI의 기본 영역은 코드 편집을 위해 탭으로 구분할 수 있는 편집기입니다. 편집 보기를 그리드 시스템 또는 병렬 파일로 변경할 수 있습니다.

브라우저에서 code-server.your-domain/?folder=/var/lib/code-server/User를 열면 기존 폴더가 로드됩니다.

햄버거 메뉴 아이콘을 선택하여 옵션 메뉴를 연 다음 새 파일을 만들 파일 메뉴를 선택합니다. 파일 이름을 지정하고 기본 폴더 위치에 저장합니다.

파일이 저장되면 Explorer 측면 패널에서 파일을 볼 수 있습니다. 탐색기 사이드바를 마우스 오른쪽 버튼으로 클릭하고 새 폴더를 클릭하여 폴더를 생성할 수 있습니다. 이름을 클릭하고 파일 및 폴더를 계층 구조의 상위 부분으로 끌어다 놓아 폴더를 확장하여 새 위치로 이동할 수 있습니다.

상단 메뉴 드롭다운에서 터미널을 클릭하고 새 터미널을 선택하여 터미널에 액세스할 수 있습니다. 메뉴에 나열된 키보드 단축키를 사용할 수도 있습니다. 하단 패널에서 터미널이 열리고 해당 작업 디렉토리가 탐색기 측면 패널에 표시된 파일 및 폴더가 포함된 프로젝트의 작업 공간으로 설정됩니다.

이 단계에서는 코드 서버 인터페이스와 가장 일반적으로 사용되는 일부 기능을 검토했습니다.

결론

이제 다목적 클라우드 IDE인 code-server가 Ubuntu 22.04 서버에 설치되고 도메인에 노출되며 Let’s Encrypt 인증서를 사용하여 보호됩니다. 이제 개별적으로 또는 팀으로 공동으로 프로젝트를 작업할 수 있습니다. 클라우드 IDE를 실행하면 로컬 시스템의 리소스가 해제되고 필요할 때 리소스를 확장할 수 있습니다. 자세한 내용은 코드 서버의 다른 구성 요소에 대한 추가 기능 및 자세한 지침에 대한 Visual Studio Code 설명서를 참조하세요.

DigitalOcean Kubernetes 클러스터에서 코드 서버를 실행하려면 DigitalOcean Kubernetes에서 코드 서버 클라우드 IDE 플랫폼을 설정하는 방법에 대한 자습서를 확인하십시오.