코드 공간을 사용하여 임의의 위치에서 인코딩하기

기술직에 종사하는 모든 사람의 꿈은 영원히 우리의 가장 친한 친구인 컴퓨터와 함께 있는 것이다.Raspberry Pis와 같은 소형 장치를 완전한 컴퓨터로 변환할 수 있는 몇 가지 해결 방안이 있고, 다른 해결 방안은 언제든지 접근할 수 있는 소형 소형 소형 소형 소형 소형 컴퓨터를 만들 수 있다.
왜 한 사람이 필요로 하는지, 아니면 그저 컴퓨터와 함께 있는 것을 좋아하는지 설명할 수 있는 몇 가지 이유가 있다.통상적으로 사람들은 어떤 문제를 해결하기 위해 수중에 매우 강력한 도구를 가지고 있으며, 심지어는 거리에서 구상하는 아이디어를 개발하는 것을 더욱 좋아한다.다른 더욱 특수한 상황에서 이 인원은 관건적인 프로젝트의 관리자 중 하나일 수 있다. 반드시 시종일관 모든 문제를 해결할 수 있어야 한다. 이것은 행동의 자유를 박탈하고 이런 설비를 가지고 있어서 이 인원이 다시 유연성을 얻을 수 있다.
우리는 가장 좋은 휴대용 기계를 가지고 있을 수 있지만, 우리의 환경과 설정과 일치하는 컴퓨터는 한 대도 없다.

코드 공간

GitHub 코드 공간 열기 화면
최근 GitHub는 Satellite 2020 행사에서 플랫폼에 새로운 기능Codespaces을 발표했다고 발표했다.현재는 홈페이지를 통해서만 사전 방문을 요청할 수 있다.그러나 당신은 최근에 접근 권한을 얻은 사람 중의 하나가 될 수 있고, 이런 믿을 수 없는 새로운 작업 방식에 접근할 수 있을 것입니다!

For now GitHub's Codespaces is in beta and you may not have the functionality enabled. Then you will not be able to see what I will show next, but you will be able to register directly on the site to receive early access.

코드 공간은 Visual Studio Code의 온라인 구현이다.웹 기술을 기반으로 한 편집기로서VSCode는 믿을 수 없는 장점을 가지고 있으며, 몇 안 되는 몇 개의 플랫폼 사이에서 쉽게 이식할 수 있는 프로젝트 중 하나이다.
이것은 Code Server 이전에 이미 완성되었다. - 우리는 심지어 재미있는 실현을 사용했다. 아르헨티나에서 온 동료atNodeschool SP가 만들었다. 그러나 코드 서버의 주요 문제는 확장 저장소가 VSCode의 모든 기존 확장을 지원하지 않는다는 것이다. 그리고 우리가 서로 다른 레이아웃의 키보드를 사용할 때 편집기는 곤혹스러웠다.
GitHub Codespaces(GH Codespaces 또는 GHC)의 가장 큰 장점은 GitHub에 직접 통합된다는 것입니다. 즉, 웹 준비 편집기에서 작성할 수 있는 저장소를 열 수 있다는 것입니다!myGotQL repository의 예제를 참조하십시오.
GitHub의 클론 화면에 녹색 코드 공간 열기 버튼 표시
이 모든 것은 무료입니다. 비용을 지불하든 개인이든.

그것은 어떻게 일합니까?

코드 공간은 다른 기존 마이크로소프트 솔루션Visual Studio Codespaces (VSC) 위에 세워진 것이다. 더 개방적인 것을 찾을 때 GH 코드 공간의 좋은 비용 지불 대체 방안이다. VS 코드 공간은 virtual machine on Azure 을 만들고 Remote Development 라는 원생 VS코드 기능을 통해 연결되기 때문이다.

Important Update

Microsoft is consolidating VS Codespaces into GH Codespaces, which means that, by November 20th 2020 all new VS Codespaces will be unavailable and by February 2021, VSC will be retired completely.

Thanks for the comments on this update. You can read more here

소형 서버를 다른 쪽에 연결하는 다른 컴퓨터를 원격 개발합니다.편집기의 처리와 인터페이스를 분리할 수 있다는 뜻이다.이렇게 하면 최신 JavaScript를 지원하는 모든 브라우저에서 편집기 인터페이스를 실행할 수 있기 때문에 실제로 어디에서든 VSCode를 실행할 수 있습니다.
그리고 나서 우리는 또 다른 믿을 수 없는 기술을 한데 놓았다. 그것이 바로 용기였다.보시다시피 용기는 외부 라이브러리에 의존하지 않고 거의 모든 응용 프로그램을 자체적으로 실행할 수 있는 믿을 수 없는 기술입니다.코드 공간은 주로 이 점을 이용하여 그들이 실행할 기계의 이미지를 구축할 수 있도록 한다.
이렇게 하면 우리는 프로젝트 운행에 필요한 모든 도구를 포함하는 용기를 가질 수 있다. 왜냐하면 이것은 완전히 맞춤형 제작이 가능하기 때문이다.

내 블로그(포르투갈어) Visual Studio 코드 공간

Visual Studio Codespaces 홈 페이지
GitHub 코드 공간을 심도 있게 연구하기 전에 원격 개발 환경을 만드는 방법을 보여 드리겠습니다.
로그인하여 VSC 인스턴스를 만든 후 새 코드 공간을 만듭니다.
Visual Studio 코드 공간 만들기 버튼
'코드 공간 만들기'단추를 누르면 재미있는 일이 시작됩니다. 왜냐하면 우리는 전환할 수 있는 일련의 좋은 옵션이 있기 때문입니다.
VS Codespaces Visual Studio 코드 공간 구성 화면
첫 번째 옵션은 매우 간단합니다. 우리는 코드 공간에 이름을 붙여야 합니다. 이것은 이 기계의 이름을 식별하는 것이기 때문에 매우 묘사적인 이름이 필요합니다.
그리고 우리는 가장 재미있는 선택이 하나 있다. VSC 자체가 우리가 다른 GitHub 저장소에서 코드 공간을 시작할 수 있도록 허락했다. 즉, GH 코드 공간 자체가 VSC의 다른 인터페이스라는 것이다.
여기에서 가상 머신을 구성할 수 있기 때문에 원격 머신의 강도와 가상 머신을 끊기 전에 얼마나 많은 여가 시간을 보낼 수 있는지 선택할 수 있습니다. 그러면 우리는 여가 계산에 비용을 지불할 필요가 없습니다.
그리고 저희가 가장 멋있는 부분으로!셸의 프로필이라는 점 파일을 정의할 수 있습니다.이렇게 하면 우리는 단독 점 파일 저장소(예를 들어 와 스크립트를 가지고 우리의 온라인 기계에 이 점 파일을 설치할 수 있다. 즉, 우리는 웹 인터페이스에서 우리가 로컬 컴퓨터에서 가지고 있는 내용을 완전히 복제할 수 있다.
Visual Studio Codespace online

나는 있다 GitHub 코드 공간

GHC와 동일합니다!당신이 해야 할 유일한 다른 작업은 저장소에 들어가는 것이다. 예를 들어 녹색'복제'단추를 누르는 것이다.그런 다음 [코드 공간으로 열기]를 클릭합니다.
코드 공간에서 새 저장소 열기
모든 테스트 버전 사용자는 2개의 무료 코드 공간을 얻을 권리가 있다.즉, 당신은 최대 2대의 개발 기계를 유지할 수 있으며, 어떠한 비용도 지불할 필요가 없다는 것이다.그리고 새 것을 만들기 위해 낡은 것을 삭제해야 합니다.GOQL 예시에서 코드 공간을 사용하여 열 수 있습니다. 이 동작은 개발할 준비가 된 환경을 만들고 모든 의존항을 설치합니다.
GotQL
근데 우리 어떻게 하지?

사용자 정의

코드 공간의 가장 멋진 특성 중 하나는 완전히 맞춤형으로 제작할 수 있다는 것이다.
dotfiles의 경우 로컬 VSCode (기계에 설치된 편집기) 를 설정하여 일련의 파일을 검색할 수 있습니다. 예를 들어 설명이나 GitHub의 경우 dotfiles 라는 저장소를 직접 가질 수 있습니다. 예를 들어 설명도 있습니다.
그러나 .devcontainer라는 폴더를 사용하여 더 많은 일을 할 수 있습니다.이 폴더의 역할은 코드 공간의 가능한 설정을 그룹화하는 것이다.그 중에서 Dockerfile, devcontainer.json라는 파일과 .sh 파일이 있습니다. 이것은 우리 환경의 셸 설정입니다.저장소에서 코드 공간을 만들면 GitHub에서 해당 폴더를 찾아 코드 공간을 만듭니다.
예를 들자.우리는 어떤 종류의 용기를 알려주거나, 어떤 종류의 환경을 가지고 있는지, 패키지를 설치하고, 사용자를 만들고, 기본적인 운영체제의 이미지를 선택할 수 있는 Dockerfile이 있습니다.

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:14

# The javascript-node image includes a non-root node user with sudo access. Use 
# the "remoteUser" property in devcontainer.json to use it. On Linux, the container 
# user's GID/UIDs will be updated to match your local UID/GID when using the image
# or dockerFile property. Update USER_UID/USER_GID below if you are using the
# dockerComposeFile property or want the image itself to start with different ID
# values. See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=node
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Alter node user as needed, install tslint, typescript. eslint is installed by javascript image
RUN if ["$USER_GID" != "1000"] || ["$USER_UID" != "1000"]; then \
        groupmod --gid $USER_GID $USERNAME \
        && usermod --uid $USER_UID --gid $USER_GID $USERNAME \
        && chmod -R $USER_UID:$USER_GID /home/$USERNAME \
        && chmod -R $USER_UID:root /usr/local/share/nvm /usr/local/share/npm-global; \
    fi \
    #
    # Install tslint, typescript. eslint is installed by javascript image
    && sudo -u ${USERNAME} npm install -g tslint typescript gitmoji-cli

따라서 GotQL 코드 공간을 만들 때, 이것이 바로 우리가 가지고 있는 환경이며, sudo, tslint, TypeScript에 접근하는 비root 사용자의 환경이다..devcontainer도 추가했습니다. 이것은 제가 이 프로젝트에서 사용한 제출 기준입니다.
그리고 우리는 gitmoji-cli 편집기의 설정을 설정할 뿐만 아니라 코드 공간 생성기에 방향을 제공하는 것도 책임진다.그 중에서 코드 공간의 이름을 정의했습니다. 온라인 VSCode가 시작되면 확장될 것입니다. 기본 시스템을 구축하는 데 사용할 Dockerfile이 무엇인지, 모든 VSCode 설정을 덮어쓸 수 있습니다.

{
  "name": "TypeScript website codespace",
  "extensions": [
    "emmanuelbeziat.vscode-great-icons",
    "dbaeumer.vscode-eslint",
    "oderwat.indent-rainbow",
    "vtrois.gitmoji-vscode",
    "dracula-theme.theme-dracula",
    "2gua.rainbow-brackets",
    "ms-vscode.vscode-typescript-tslint-plugin"
  ],
  "dockerFile": "Dockerfile",
  // Set *default* container specific settings.json values on container create.
  "settings": { 
    "terminal.integrated.shell.linux": "/bin/bash",
    "window.autoDetectColorScheme": true,
    "workbench.preferredDarkColorTheme": "Dracula",
    "editor.renderWhitespace": "boundary",
    "workbench.colorTheme": "Dracula",
    "workbench.iconTheme": "vscode-great-icons"
  },
  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "npm install"
}

또한 코드 공간을 만든 후에 명령을 실행하는 데 매우 유용합니다. 이 예에서 우리는 열 때 모든 패키지를 설치하기 위해 명령devcontainer.json을 실행하고 있습니다.
우리는 훌륭한 코드 공간this documentation을 가지고 있으며, 당신이 자신의 코드 공간을 만드는 기초가 될 수 있습니다.documentation 에서 파일 가져오기 postCreateCommand

## update and install some things we should probably have
apt-get update
apt-get install -y \
  curl \
  git \
  gnupg2 \
  jq \
  sudo \
  zsh

## set-up and install yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
apt-get update && apt-get install yarn -y

## install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

## setup and install oh-my-zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
cp -R /root/.oh-my-zsh /home/$USERNAME
cp /root/.zshrc /home/$USERNAME
sed -i -e "s/\/root\/.oh-my-zsh/\/home\/$USERNAME\/.oh-my-zsh/g" /home/$USERNAME/.zshrc
chown -R $USER_UID:$USER_GID /home/$USERNAME/.oh-my-zsh /home/$USERNAME/.zshrc

이 파일은 Dockerfile에서 참조되며 시작 즉시 실행됩니다.

GotQL의 npm 설치 결론

코드 공간은 우리가 현재 가지고 있는 주요 기술 중의 하나가 될 수 있다. 주로 휴대전화 등 모바일 기기로 편집하거나 더욱 복잡한 개발을 할 수 있기 때문이다.
많은 프로그래머들이 Docker 기반 솔루션을 example repository 에 사용하고 있지만, 이러한 솔루션은 결국 진정한 솔루션이 아니라'융통성 있는 방법'과 같다.
이러한 기술과 기능이 등장함에 따라 우리는 업무 환경을 어느 곳으로 가져갈 능력이 있다.다음 글은 GHC를 사용하여 원격 데스크톱을 설정하는 방법에 대한 설명입니다.
당신의 피드백을 좋아하고 댓글로 공유합니다!
안녕히 가세요.