어떻게 VS 코드를 원격 개발 용기로 실행합니까

사전 로드된 개발 도구(SDK, npm 패키지, CLI 등)를 사용하여 자신의 Code Server 용기를 시작하여 가정 실험실이나 개인 클라우드에서 효율적이고 안전한 웹 IDE를 실현합니다!

왜 VS 코드가 한 용기에 있습니까?

원격 개발은 이미 전 세계를 휩쓸었고, 그것은 하나의 추세일 뿐만 아니라, 계속 새로운 방식으로 일과 생활의 균형을 실현할 것이다.
팀은 개발자의 업무 효율을 높이기 위해 인프라 시설에 신속하게 적응하고 배치해야 한다. 우리가 발견한 가장 좋은 방법 중 하나는 바로 온라인 속도를 높이는 것이다.
용기를 축소하기만 하면 모든 도구와 개성화된 취향을 사용할 수 있도록 시작하고 실행하는 것은 매우 간단하다.어느 곳에서든, 자신의 클라우드로 구동되는 장치에서, 코드를 작성하는 것은 지금처럼 쉽지 않았다.

개시하다

이 설명서에 사용된 전체 코드 예는 Github 저장소를 참조하여 시작하십시오.
👉 재구매 계약 복제
📜 .env 파일 만들기
🔒 SSL 인증서 생성
🐳 vi dockerfile 스크립트
🚀 docker-compose up으로 스택을 시작합니다!docker 또는 podman이 설정된 호스트 서버에서 복제repo.코드 라이브러리를 용기가 실행될 때 분리된 위치에 저장하여 여분과 페일오버 관리를 실현하는 것을 권장합니다.

$ git clone https://github.com/DigitalTransformation/vs-code-container-with-ssl.git

다음에 우리는 포함된 .env.template (.env으로 복사) 을 사용하여 필요한 환경 변수와 데이터 경로를 설정할 것입니다. (주의: 기본적으로.gitignore에서 제외됩니다.)
용기 재부팅과 재구성에 편리하도록 확장과 vscode 설정의 지속적인 저장소를 HOST_* 변수를 비추어 사용할 수 있습니다.그렇지 않으면 너는 모든 선호가 사라지는 것을 보고 매우 불쾌해 할 것이다.
유행하는 vs 코드 확장 settings-sync도 기본 설정을 개인 GIST에 백업하는 또 다른 좋은 방법이지만, 새로운 이미지 구축마다 확장을 다시 설치해야 한다.
다음은 .env에 정의해야 하는 예입니다.

VIRTUAL_HOST=10.0.0.1
VIRTUAL_PORT=8555

HOST_CONFIG_PATH=./config
HOST_LOG_PATH=./logs

HOST_CODE_PATH=/mnt/codebase
CODE_PATH=/code

TZ=America/New_York
PASSWORD=<PASSWORD>
SUDO_PASSWORD=<SUDO_PASSWORD>

Nginx는 자체 서명된 SSL 인증서를 사용하여 트래픽을 [::]:80에서 업스트림 HTTPS 포트 [::]:8443으로 다시 라우팅합니다.generate_certs.sh 스크립트를 체크 아웃하고 실행하여 서명 키가 있는 필요한 인증서를 openssl으로 보냅니다.
nginx.conf과 인증서를 code-server.yaml에 정의된 경로 아래에 두십시오.

listen [::]:443 ssl default_server;
        ssl_certificate /etc/nginx/certs/ssl.crt;
        ssl_certificate_key /etc/nginx/certs/ssl.key;
        ssl_protocols TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DHE+AES128:!ADH:!AECDH:!MD5;

마지막으로 명령 docker-compose -f code-server.yaml up을 사용하여 docker 호스트에 용기 창고를 배치합니다.하드웨어와 네트워크 대역폭에 따라 초기 구축에 15~20분이 걸릴 수 있습니다.dockerfile는 많은 devtool을 미리 설정하고 기본 이미지 패키지를 업데이트합니다.
Docker CI를 준수하기 위해 모든 용기에 자원 제한이 정의되어 있지만,compose code-server.yaml 파일에서 하드웨어에 따라 사용자 정의할 수 있습니다.

사전 설치된 개발 도구

다음은 dockerfile에서 linuxserver/code-server 기본 이미지를 확장하는 방법에 대한 빠른 개요입니다.이것은 개발팀에서 기존의 도구를 사용할 수 있도록 용기를 신속하게 배치하고 확장할 수 있게 한다.
출력 이미지에는 React, Node, C#, AWS 및 Azure cloud CLIs와 같은 클라우드 기본 어플리케이션 개발 워크로드에 대한 SDK가 포함됩니다.

* AWS CLI Tools
    * aws-shell
    * amplify cli
* Azure CLI
* Netlify CLI
* NPM packages
    * yarn (upstream)
    * gatsby-cli
    * gulp
    * create-react-app
* .NET Core SDK and Runtime
    * 5.0.0
    * 3.1.0
    * 2.1.0
* Python global env
    * python3 python3-pip python3-dev
* Ubuntu apt packages
    * Networking
        * wget
        * apt-transport-https
        * libssl-dev libffi-dev
    * Tools
        * ranger
        * tree
        * unzip
        * ansible
        * vim
        * htop
        * iputils-ping
    * OS/Misc
        * systemd
        * build-essential
        * ffmpeg
        * youtube-dl
        * chromium-browser
    * Default shell --> zsh/oh-my-zsh
        * zsh-syntax-highlighting
        * zsh-autosuggestions
        * zsh-completions
        * history-search-multi-word

이미지 레이어에 대해서는 Dockerfile을 참조하십시오.우리의 구축 이미지 크기는 6.5GB을 훨씬 초과하지만, 귀하가 개발 도구에 대한 수요에 따라 최소화할 수 있습니다.

원격 조정

기본적으로 dockerfile과 code-server.yaml은 공개 웹 응용 개발에 자주 사용되는 포트 범위인 5000-5010과 8000-8010으로 설정되었다.컨테이너에서 실행되는 HTTP 인스턴스를 원격으로 디버깅할 수 있도록 React, Gatsby, Angular, Django 등의 작업 로드에 대해 이 옵션을 사용자 정의합니다.http-server (npm 또는 yarn 실례화) 에 의존하는 노드 프레임워크에 외부 접근을 허용하려면, 로컬 호스트가 아닌 package.json을 업데이트하고 실행할 때 호스트 IP에 연결해야 할 수도 있습니다.
다음은 몇 가지 일반적인 예입니다.

{
    "scripts": {
        "ng:start": "ng serve --host 0.0.0.0",
        "npm:start": "http-server --host 0.0.0.0",
        "gatsby:start": "gatsby develop --host 0.0.0.0"
    }
}

또는 포트를 공개하지 않으려면 vscode-browser-preview 확장자를 보십시오. 용기 자체에서 chromium 기반의 검사와 디버깅을 사용할 수 있습니다.

안전 고려

기본 이미지가 ubuntu:18.04으로 확장됨에 따라 hosts 파일, fail2ban 및 clamav 패키지를 사전 로드하는 추가 보안 조치를 취했습니다.이런 조치는 공격을 예방할 수 있지만 이미 알려진 규칙 위반 행위를 예방하기에는 부족하다.
로그 분석auditd을 활성화한 상태에서 로그 분석에 원격syslog 데몬을 설정하는 것을 강력히 권장합니다. 다음은 Graylog2과 같은 해결 방안을 사용하는 지침입니다.
항구.
원격 디버깅 용기에서 실행되는 프로그램에 사용할 대량의 tcp 포트가 호스트에 직접 노출되어 비치고 있습니다.기본적으로 포트 code-server과 8443에는 localhost:8080만 할당됩니다.

$ netstat -tnlp

Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:8443            0.0.0.0:*               LISTEN      299/node            
tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN      -     

홈랩이나 방화벽 뒤에 있는 개인 클라우드 이외의 개발자의 작업 부하에 대해 HTTPS와 신분 검증이 리셋된nginx 역방향 에이전트를 사용하는 것은 민감한 코드 유출을 방지하는 데 매우 중요하다.

다음은요?

컨테이너에 VS Code Server를 배치하는 것은 홈 랩이나 팀에서 인프라를 유연하게 개발할 수 있는 좋은 방법입니다.
WebIDE는 VPN 액세스와 모든 사용자 정의 설정을 결합하여 원격 인코딩의 미래에 기여했습니다.그것은 모든 장치에서 더 빨리 인코딩할 수 있는 빠른 확장성을 가지고 있다.
반드시 Github 저장소를 보십시오. 우리는 그 중에서 완전한 코드 예시를 제공하여 몇 분 안에 당신의 code-server을 배치할 수 있습니다.
나는 줄곧 그것을 나의 주요 개발 환경으로 사용해 왔다. vscode의 설정과 확장을 조정한 후에 다시는 돌아갈 길이 없다.전용 서버에서만 코드를 컴파일하는 속도는 바꿀 만하다.
당신이 이 가정 실험실의 설치와 당신의 생각을 좋아하는지 알려주세요!