チュートリアルリモートマシンをWeb IDEに接続する(無料 ALL BETA)

フラグ: セルフマネージドGitLabでは、デフォルトでこの機能が利用可能です。この機能を隠すには、管理者がvscode_web_ideという機能フラグを無効にします。GitLab.comでは、この機能は利用可能です。この機能はまだ本番環境では使用できません。

caution
この機能はベータ版であり、予告なく変更される場合があります。

このチュートリアルでは

  • GitLab の外に開発環境を作る方法。
  • リモートマシンをWeb IDE に接続します。

リモートマシンを Web IDE に接続するには：

  1. Let’s Encrypt 証明書を生成します。
  2. 開発環境を Web IDE に接続します。

前提条件

  • root権限を持つリモート仮想マシン
  • そのマシンに解決するドメインアドレス
  • Dockerのインストール

Let’s Encrypt証明書の生成

Let’s Encrypt証明書を生成します：

  1. A レコードを作成し、ドメインをリモート・マシンに指定します (例:example.remote.gitlab.dev から10.0.2.2)。

  2. CertbotをインストールしてHTTPSを有効にします：

    sudo apt-get update
sudo apt-get install certbot

  3. 証明書を生成します：

    export EMAIL="YOUR_EMAIL@example.com"
export DOMAIN="example.remote.gitlab.dev"
   
certbot -d "${DOMAIN}" \
  -m "${EMAIL}" \
  --config-dir ~/.certbot/config \
  --logs-dir ~/.certbot/logs \
  --work-dir ~/.certbot/work \
  --manual \
  --preferred-challenges dns certonly

証明書を生成したら、いよいよ開発環境を作成して接続します。

開発環境を Web IDE に接続します。

開発環境と Web IDE を接続します：

  1. 開発環境を作成します：

    export CERTS_DIR="/home/ubuntu/.certbot/config/live/${DOMAIN}"
export PROJECTS_DIR="/home/ubuntu"
   
docker run -d \
  --name my-environment \
  -p 3443:3443 \
  -v "${CERTS_DIR}/fullchain.pem:/gitlab-rd-web-ide/certs/fullchain.pem" \
  -v "${CERTS_DIR}/privkey.pem:/gitlab-rd-web-ide/certs/privkey.pem" \
  -v "${PROJECTS_DIR}:/projects" \
  registry.gitlab.com/gitlab-org/remote-development/gitlab-rd-web-ide-docker:0.2-alpha \
  --log-level warn --domain "${DOMAIN}" --ignore-version-mismatch

    新しい開発環境が自動的に起動します。

  2. トークンを取得します：

    docker exec my-environment cat TOKEN

  3. リモート接続の設定。

リモート接続の設定

Web IDE からリモート接続を設定するには、以下の手順に従います：

  1. Web IDE を開きます。
  2. メニューバーで、View > Terminalを選択するか、Control+`を押します。
  3. ターミナルパネルで、[リモート接続の設定] を選択します。
  4. ポートを含むリモートホストの URL を入力します (例:yourdomain.com:3443)。
  5. プロジェクトのパスを入力します。
  6. 取得したトークンを入力します。

また、URLからパラメータを渡してWeb IDEに直接接続することもできます：

  1. 次のコマンドを実行します：

    echo "https://gitlab-org.gitlab.io/gitlab-web-ide?remoteHost=${DOMAIN}:3443&hostPath=/projects"

  2. そのURLにアクセスし、取得したトークンを入力してください。

これで完了です！これで開発環境はWeb IDE に接続されたリモートホストとして実行されます。