コードどこでもcodespaces

テクノロジーで働く誰の夢も、我々の親友、コンピュータで常にあることです.小さなデバイスを変換するいくつかの解決策がありますRaspberry Pis 完全なコンピュータには、他のソリューションは、いつでもアクセスできる小さな、ポケットサイズのコンピュータを作成します.
誰かが必要とするいくつかの理由があります-またはちょうど好き-すべての回で自分の側でコンピュータを使用する.しばしば、人はどんな問題のためにでも常に手で超強力なツールを持っているか、通りの中央で考えられたその考えを開発するのを好みます.他のより特別な場合では、人は重要なプロジェクトの管理者のうちの1つかもしれなくて、どんな問題も解決するために常に利用できなければなりません.
我々は最高のポータブルマシンを持っている可能性がありますが、コンピュータは我々の環境と構成で、自分自身に一致することはできません.

コーデスペース

Github Codespacesのためのオープニングスクリーン
最近ではSatellite 2020 イベントは、彼らのプラットホームで新しい特徴のリリースを発表しました.Codespaces . 現時点では、それはウェブサイトを介して初期のアクセスを要求することによってのみ利用可能です.しかし、あなたは最近、アクセスを受けている人々のうちの1つでありえて、働くことのこの驚くべき新しい方法にアクセスすることができます!

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.

Codespacesは、オンラインの実装ですVisual Studio Code . Web技術に基づくエディタとしてVSCode 非常に簡単にプラットフォーム間で移植することができるいくつかのプロジェクトの一つである信じられないほどのパークスがあります.
これは、以前は既に行われていましたCode Server - 私たちも、アルゼンチンからの私たちの同僚によって作成された興味深い実装を使用してNodeschool SP - しかし、コードサーバーに関する主な問題の1つは、拡張ストアがVSCodeのすべての既存の拡張機能をサポートしていなかったことであり、また、別のレイアウトのキーボードを使用したときに、エディタが混乱したことでした.
Github Codespaces(GH CodespacesまたはGHC)が持ってきた大きな利点は、それがGitTubに直接統合されているということです.つまり、あなたはウェブ準備ができているエディタで書く許可を持っているどんなリポジトリも開くことができます!私の例を見てくださいGotQL repository :
緑色の「codespacesで開く」ボタンを示しているGituubのクローニング画面
そして、このすべては無料で、両方の有料とプライベートリポジトリです.

どうやって動くの？

Codespacesは別の既存のマイクロソフトソリューションの上に構築されるVisual Studio Codespaces VSC(それはあなたがより開いた何かを探しているとき、GH CodeSpacesへの優れた代用代案です)は、VS CodespacesがAをつくるので、これですvirtual machine on Azure とネイティブのVSCODE機能を介して接続Remote Development .

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をどこでも実行できます.
それから、我々は容器であるもう一つの驚くべきテクノロジーをまとめました.ご覧の通りon my blog (in Portuguese) , コンテナは、外部ライブラリに頼ることなく、自己完結型の方法で実質的にすべてのアプリケーションを実行することができます信じられないほどの技術です.Codespacesは、主に、彼らが走るつもりであるマシンのイメージを構築することができるように、これを利用します.
この方法では、完全にカスタマイズ可能なので、プロジェクトを実行するために必要なすべてのツールが含まれているコンテナーを持つことができます.

ビジュアルスタジオ

ビジュアルスタジオCodespacesホームページ
我々がGitthub Codespacesに飛び込む前に、我々はどのように我々が使うことができるかについて、あなたに教えますVS Codespaces リモート開発環境を作成するには
ログインしてVSCインスタンスを作成した後、新しいCodeSpaceを作成します.
Visual Studioのコーデック作成ボタン
そして、“CREATECOPELEACE”ボタンをクリックした後、物事は興味深いことに、我々はトグルすることができます素晴らしいオプションの一連の開始を開始する
Visual Studio Codespaces設定画面
最初のオプションは非常に簡単です、私たちは私たちのcodesaceに名前を与えなければなりません、これはこのマシンを特定するつもりである名前であるので、それは非常に記述的な名前である必要があります.
そして、私たちは、最も興味深いオプションを持って、VSC自体はもう一つのGithubリポジトリからCodeSpaceを開始することができます、すなわち、GH Codespaces自体はVSCのための異なったインターフェースです.
そこから我々のVMSの構成があるので、我々は我々のリモートマシンがどれくらい強いかについて選ぶことができます、そして、また、どれくらいのアイドル時間がVMを中断する前に通過することができるか、このように、我々は怠惰な計算のために支払う必要はありません.
そして、我々はクールな部分に入る!私たちは、dotfilesと呼ばれるものを定義することができます.このように、私たちはdotfilesの別々の倉庫を持つことができますI have - そして、私たちのオンラインマシン上でこれらのdotfilesをインストールするスクリプトは、すなわち、我々は正確に我々はローカルのコンピュータ上でWebインターフェイスで何を持って複製することができます!
ビジュアルスタジオ

ギタブコーデスペーズ

GHCで、それは全く同じです!あなたがしなければならない唯一の異なるアクションは、リポジトリGotQL - 「クローン」である緑のボタンをクリックしてください.次に、「CodePaceで開く」をクリックします.
共同体の新しい倉庫を開く
すべてのベータユーザーは、2つの無料Codespacesを受ける権利があります.つまり、何も絶対に支払うことなく、2台の開発機械を維持できます.その後、新しいものを作成するために古いものを削除する必要があります.Gotqlの例では、CodeSpacesで開くオプションがあります.このアクションは、すべての依存関係がインストールされた状態で、開発用に準備された環境を既に作成します

でもどうやってやるの?

カスタマイズ

Codespacesのクールな機能の一つは、彼らが完全にカスタマイズ可能であるという事実です.
DotFilesの場合は、ローカルVSCode(あなたのマシンにインストールされたエディタ)を設定し、一連のファイルを検索することができますthis documentation 説明するか、Githubの場合、直接リポジトリと呼ばれるリポジトリを持つことができますdotfiles , …のようにdocumentation 説明.
しかし、それはフォルダと呼ばれる以上のことができます.devcontainer . このフォルダの内容は、CodeSpaceの設定をグループ化することです.その中にdockerfileがあるdevcontainer.json と.sh 私たちの環境のシェル構成であるファイル.リポジトリからCodeSpaceを作成すると、Githubはこのフォルダーを探し、それに応じてCodeSpaceを作成します.
見ましょうGotQL's .devcontainer 例として.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

したがって、GTQL CodeSpacaceが作成されるとき、これは我々が持つ環境であるでしょう、sudoとtslintとtypescriptにすでにアクセスしている非rootユーザーと一緒の環境.私もgitmoji-cli このプロジェクトで使用するコミットの標準です.
では、私たちはdevcontainer.json , これは我々のエディタの設定を構成するだけでなく、CodePaceビルダーへの指示を与えるためにも責任があります.この関数では、CodeSpaceの名前を定義していますが、これは起動時に私たちのオンライン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"
}

加えて、我々はpostCreateCommand , これはcodesaceが作成された後にコマンドを実行するのに非常に便利ですnpm install , それで、我々が開くとき、我々はすべてのパッケージをインストールさせます.
そして、我々は優れているexample repository Codespacesのあなたのための基盤として機能することができますあなた自身を作成します.ファイルを入手しましょうsetup.sh からcodespace example for Node

## 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内で参照され、起動されるとすぐに実行されます.

結論

Codespacesは我々が現在持っている主要な技術の1つになることができます、主に彼らが携帯電話のようなモバイル機器を使っている編集またはより複雑な開発を許すので.
多くのプログラマは既にDockerprogram on the ipad , しかし、これらの解決は、常に本当の解決より「回避策」のように終わりました.
これらのような技術と特徴の出現で、我々はどこでも我々の仕事環境をとる能力を持ちます.次の記事では、GHCを使ってリモートデスクトップを設定する方法を説明します.
コメントのようにあなたのフィードバックを共有!
yaを参照してください!