Visual Studio Code에서 GitHub Codespaces를 사용하는 코드로서의 IDE

게시 됨: 2021-11-24

개발자에게 가장 어려운 것 중 하나는 이미 진행 중인 프로젝트를 시작하는 것입니다.

새 프로젝트에 대한 요구 사항으로 인해 환경을 디버그하기 위해 로컬에 설치한 도구 및 SDK 버전을 수정해야 하는 경우가 종종 발생합니다. 이로 인해 모든 것이 예상대로 작동할 때까지 며칠을 낭비하게 됩니다.

베타 또는 미리 보기 단계에 있는 버전을 고려하면 상황이 더 복잡해집니다. 이를 방지하기 위해 GitHub Codespaces를 소개하고자 합니다. GitHub Codespaces는 컨테이너 내에서 애플리케이션이 필요로 하는 개발 환경을 생성할 수 있을 뿐만 아니라 어디서나 모든 장치에서 개발할 수 있게 해줍니다.

의 시작하자!

GitHub 코드스페이스란 무엇입니까?

Github 코드스페이스는 브라우저에서 액세스할 수 있는 클라우드 환경이며 전용 코드 개발에 필요한 모든 기능을 갖추고 있습니다.

저장소에 있을 때마다 "키" 마침표를 누를 때마다 GitHub 발표를 보았을 것입니다. 해당 리포지토리와 함께 웹 편집기가 열립니다.

그러나 그것은 단순히 웹 편집기이고 백엔드 머신이 없기 때문에 터미널을 실행할 수 없습니다. 때로는 이것으로 충분할 수 있지만 환경을 실행하거나 프로젝트를 컴파일해야 하지만 요구 사항을 충족하는 시스템(iPad, Surface Go 등)이 없다고 상상해 보십시오.

GitHub Codespaces는 클라우드에서 IDE를 실행하여 로컬 시스템과 지정된 구성을 사용하는 것처럼 작동하도록 하여 이 문제를 해결합니다.

참고: 이 기능은 팀 및 엔터프라이즈 계정에서만 사용할 수 있습니다.

샘플 코드

이 예에서는 매우 간단한 Node.js 애플리케이션을 사용합니다.

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

위의 코드는 다음과 같은 구조를 가지고 있습니다.

코드의 구조

이 언어로 된 프로젝트에 유용한 Node.js, git 및 VS Code 확장을 설치했다면 문제 없이 이 프로젝트를 로컬에서 시작할 수 있습니다. 응용 프로그램을 자동으로 새로 고치는 Nodemon과 같은 도구를 사용할 수도 있습니다.

문제는 이 구성으로 작업할 뿐만 아니라 .NET Core, Python, Docker 또는 Kubernetes를 사용한 개발과 같은 다른 많은 것을 사용할 때 발생합니다. 결국 개발 환경의 성능을 저하시킬 수 있습니다.

문제는 자신의 실적에만 국한되지 않습니다. 다른 사람이 팀에 합류하여 응용 프로그램을 시작하는 데 필요한 도구와 프레임워크로 자신의 시스템을 "준비"해야 하는 경우 몇 시간을 잃게 되어 전체 팀 성능이 저하됩니다. 다른 운영 체제를 사용하여 작업).

원격 컨테이너 작업

Visual Studio Code는 Remote Containers 또는 Dev Containers라는 확장을 제공하므로 컨테이너 내에서 애플리케이션에 필요한 개발 환경을 생성할 수 있습니다. 이러한 방식으로 프로젝트를 진행하는 팀의 모든 개발자는 자동으로 동일한 개발 환경을 갖게 됩니다.

이렇게 하면 가능한 한 민첩하게 프로젝트를 시작할 수 있으며 환경을 정의한 경우 동일한 시스템에서 서로 다른 구성으로 프로젝트당 여러 작업 환경을 분리할 수 있습니다. 멋진 응?

어떻게 시작합니까?

이 기능을 사용하려면 컨테이너가 머신에서 실행되기 때문에 Docker가 머신에 설치되어 있어야 합니다. 또한 개발 환경을 구축하는 데 도움이 되는 Remote Containers 확장을 설치해야 합니다.

가장 먼저 해야 할 일은 루트 디렉터리에 .devcontainer 라는 폴더를 만드는 것입니다. 이것은 표시가 포함된 컨테이너를 마운트하는 구성이 있는지 확인하기 위해 확장이 식별하려고 시도하는 것입니다.

여기에는 환경 구성이 포함된 devcontainer.json 이라는 파일이 하나 이상 있어야 합니다.

이 예에서는 다음을 사용했습니다.

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

보시다시피 다른 섹션이 있는 JSON입니다.

  • name : 개발 컨테이너가 가질 이름입니다. 이상적으로는 설명이 포함된 이름이어야 합니다.
  • dockerFile : 환경을 만드는 데 사용할 Dockerfile의 이름을 나타내는 데 사용됩니다. 제 경우에는 동일한 .devcontainer 폴더에 다음과 같은 폴더가 있습니다.
 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

이 예제에서는 이 개발 환경에 있는 구성이 Node.js 버전 14를 사용하는 로컬 구성 과 다르다는 것을 보여주기 위해 node: 12.16.1-alpine 이미지 를 사용하고 있습니다. 반면에 개발 중에 사용할 Nodemon 모듈 외에도 git, bash 및 cURL과 같은 일부 유틸리티를 설치합니다.

  • fordwardPorts : 로컬 머신에서 액세스할 수 있고 디버깅이 쉽도록 내 애플리케이션이 사용하는 포트입니다.
  • settings : 이 예의 경우 여러 환경이 있는 경우 매우 유용합니다. Visual Studio Code 테마를 수정하여 해당 IDE 인스턴스의 로컬 환경에 있지 않음을 분명히 했습니다. 나는 보통 어두운 버전을 사용하고 여기에서는 밝은 버전을 설정했습니다.
  • containerEnv : 개발할 때 일반적으로 매우 유용한 환경 변수도 추가했습니다.
  • postCreateCommand : 개발자 컨테이너의 수명 주기 동안 명령이나 스크립트를 실행할 수 있음을 확인할 수 있도록 이 속성을 추가했습니다. 이 경우 생성이 완료되면 이 스크립트가 실행됩니다. 이 내용은 다음과 같습니다.
     #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install
  • postAttachCommand: 마지막으로 이 속성에 nodemon server.js 명령을 추가하여 컨테이너에 연결할 때마다 기본적으로 애플리케이션이 해제되도록 했습니다.

devcontainer.json 파일에 더 많은 옵션을 추가할 수 있습니다. 이것은 수행할 수 있는 작업의 아주 작은 예일 뿐입니다.

이제 이 폴더에 있는 모든 내용과 정의된 구성이 작동하는 방식을 알았으니 이를 어떻게 시작합니까?

가장 쉬운 방법은 여기에서 이 버튼을 사용하는 것입니다.

Reopen in Container 옵션을 선택하면 프로세스가 컨테이너와 사용자 정의 IDE 생성을 시작합니다. 결과는 다음과 같아야 합니다.

결국 이 경우 결과는 특정 Node.js 버전, 보다 ​​편안하게 개발할 수 있도록 선택한 여러 확장, 포트 8080에서 이미 실행되고 노출된 내 애플리케이션이 포함된 Light 테마가 있는 Visual Studio Code 창입니다.

그리고 가장 좋은 점은 이 구성이 프로젝트 리포지토리에 버전이 지정되어 모든 구성원이 사용할 수 있다는 것입니다. 단순히 장관입니다!

이제 이 모든 것을 보았고 모든 단계를 이해했으므로 .devcontainer 폴더를 삭제하고 왼쪽 하단의 아이콘을 다시 선택 하고 컨테이너에서 다시 열기를 다시 선택하면 이번에는 여러 사전 중에서 선택할 수 있음을 알 수 있습니다. -빌드 구성.

구성을 처음부터 시작할 필요가 없으며, 끝내기 위해 터치해야 할 부분도 이미 알고 있습니다.

Github 공간으로 돌아가기

이제 Visual Studio 원격 컨테이너에서 사용한 것과 동일한 프로젝트를 사용하지만 이번에는 GitHub를 사용합니다. 코드 섹션에서 이 작업이 완료되면 코드 스페이스라는 새 옵션이 표시됩니다.

여기에서 이 특정 리포지토리로 작업하는 데 필요한 시스템 유형을 선택할 수 있습니다.

기계의 크기를 선택하십시오

선택하면 생성 프로세스가 시작됩니다. 원격 컨테이너용으로 생성한 .devcontainer 폴더의 구성을 사용하여 환경을 구성합니다.

프로세스가 완료되면 로컬 시스템에서와 동일한 방식으로 애플리케이션이 실행되는 Visual Studio Code가 웹 형식으로 표시되는 것을 볼 수 있습니다.

마지막 단어

위의 예에서 볼 수 있듯이 원격 컨테이너를 사용하는 Github Codespaces는 구성 및 개발 환경을 복제하는 문제에 대한 훌륭한 솔루션이며 우리 팀의 성능을 향상시키는 좋은 방법이기도 합니다.

태그:
  • 데브옵스