Remote VSCode Docker Image 만들기

VSCode를 웹으로 접근해서 사용할 수 있도록 해주는 code-server를 소개한 적이 있다.

- Web based Visual Studio Code (Online VSCode)

 

공식적으로 제공해주는 docker image가 있긴 하지만,

이번에는 Kubernetes에 올려서 사용하기 위한 나만의 docker image를 만들어보려고 한다.

 

0. 작업 환경

  - 이하 과정을 진행한 환경은 다음과 같다.

    . OS: Ubuntu 18.04 Desktop

    . Docker: Docker version 20.10.7, build f0df350

 

  - Docker 설치는 다음 포스팅을 참고하기 바란다.

    . Docker Install (Ubuntu Server 20.04 - 64bit) - using Download

  - 지금 포스팅을 작성하는 시점에서의 최신 버전은 다음과 같다.

    . containerd.io_1.4.8-1_amd64.deb

    . docker-ce-cli_20.10.7~3-0~ubuntu-focal_amd64.deb

    . docker-ce_20.10.7~3-0~ubuntu-focal_amd64.deb

 

 

1. Dockerfile & Scripts

  - 아래 내용은 다음 링크를 참조했다.

    . https://git.nofla.me/k8s-projects/codekube

  - 위 내용 중 필요한 부분만 뽑아내고 재구성을 한 내용을 전체 공유하면 아래와 같다.

 

    . Dockerfile

 

FROM ubuntu:20.04

RUN apt-get update && apt-get upgrade -y
RUN DEBIAN_FRONTEND="noninteractive" apt-get install -y \
    wget \
    vim \
    curl \
    dumb-init \
    zsh \
    htop \
    locales \
    man \
    nano \
    git \
    procps \
    openssh-client \
    sudo \
    jq \
    openssl \
    bash-completion \
    dnsutils \
    lsb-release

RUN apt-get install -y python3 python3-pip python3-dev build-essential

RUN update-alternatives --install /usr/bin/python python /usr/bin/python3 1
RUN update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

RUN apt-get install -y apt-utils locales
RUN locale-gen ko_KR.UTF-8
ENV LC_ALL ko_KR.UTF-8


RUN addgroup --gid 1000 code && \
    adduser --uid 1000 --ingroup code --home /home/code --shell /bin/bash --disabled-password --gecos "" code && \
    adduser code sudo
RUN chmod g+rw /home && \
    mkdir -p /home/code/workspace && \
    chown code:code /home/code/workspace -R


RUN echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers;


RUN USER=code && \
    GROUP=code
RUN curl -SsL https://github.com/boxboat/fixuid/releases/download/v0.5/fixuid-0.5-linux-amd64.tar.gz | tar -C /usr/local/bin -xzf - && \
    chown root:root /usr/local/bin/fixuid && \
    chmod 4755 /usr/local/bin/fixuid && \
    mkdir -p /etc/fixuid && \
    printf "user: $USER\ngroup: $GROUP\n" > /etc/fixuid/config.yml


RUN CODE_SERVER_VERSION=3.11.0 && \
    curl -sSOL https://github.com/cdr/code-server/releases/download/v${CODE_SERVER_VERSION}/code-server_${CODE_SERVER_VERSION}_amd64.deb && \
    sudo dpkg -i code-server_${CODE_SERVER_VERSION}_amd64.deb


RUN cat /usr/lib/code-server/lib/vscode/product.json \
    | jq '.extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vsliveshare.vsliveshare" \
        | .extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vscode.node-debug" \
        | .extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vscode.node-debug2"' \
    > /usr/lib/code-server/lib/vscode/product.json_ \
    && mv /usr/lib/code-server/lib/vscode/product.json_ /usr/lib/code-server/lib/vscode/product.json


RUN mkdir /opt/default_home
ADD warehouse/.bashrc /opt/default_home


ENV PASSWORD=${PASSWORD:-password}
EXPOSE 8080

ADD warehouse/restart-codekube.sh /usr/local/bin/restart-codekube
ADD warehouse/code.sh /usr/local/bin/code
ADD warehouse/startup.sh /startup.sh


RUN chmod a+x /usr/local/bin/*

ENTRYPOINT ["/bin/bash", "/startup.sh"]

 

  - 필요한 스크립트 파일은 다음과 같다.

    . .bashrc

 

# ~/.bashrc: executed by bash(1) for non-login shells.
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples

# If not running interactively, don't do anything
case $- in
    *i*) ;;
      *) return;;
esac

# don't put duplicate lines or lines starting with space in the history.
# See bash(1) for more options
HISTCONTROL=ignoreboth

# append to the history file, don't overwrite it
shopt -s histappend

# for setting history length see HISTSIZE and HISTFILESIZE in bash(1)
HISTSIZE=1000
HISTFILESIZE=2000

# check the window size after each command and, if necessary,
# update the values of LINES and COLUMNS.
shopt -s checkwinsize

# If set, the pattern "**" used in a pathname expansion context will
# match all files and zero or more directories and subdirectories.
#shopt -s globstar

# make less more friendly for non-text input files, see lesspipe(1)
[ -x /usr/bin/lesspipe ] && eval "$(SHELL=/bin/sh lesspipe)"

# set variable identifying the chroot you work in (used in the prompt below)
if [ -z "${debian_chroot:-}" ] && [ -r /etc/debian_chroot ]; then
    debian_chroot=$(cat /etc/debian_chroot)
fi

# set a fancy prompt (non-color, unless we know we "want" color)
case "$TERM" in
    xterm-color|*-256color) color_prompt=yes;;
esac

# uncomment for a colored prompt, if the terminal has the capability; turned
# off by default to not distract the user: the focus in a terminal window
# should be on the output of commands, not on the prompt
#force_color_prompt=yes

if [ -n "$force_color_prompt" ]; then
    if [ -x /usr/bin/tput ] && tput setaf 1 >&/dev/null; then
    # We have color support; assume it's compliant with Ecma-48
    # (ISO/IEC-6429). (Lack of such support is extremely rare, and such
    # a case would tend to support setf rather than setaf.)
    color_prompt=yes
    else
    color_prompt=
    fi
fi

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
fi
unset color_prompt force_color_prompt

# If this is an xterm set the title to user@host:dir
case "$TERM" in
xterm*|rxvt*)
    PS1="\[\e]0;${debian_chroot:+($debian_chroot)}\u@\h: \w\a\]$PS1"
    ;;
*)
    ;;
esac

# enable color support of ls and also add handy aliases
if [ -x /usr/bin/dircolors ]; then
    test -r ~/.dircolors && eval "$(dircolors -b ~/.dircolors)" || eval "$(dircolors -b)"
    alias ls='ls --color=auto'
    #alias dir='dir --color=auto'
    #alias vdir='vdir --color=auto'

    alias grep='grep --color=auto'
    alias fgrep='fgrep --color=auto'
    alias egrep='egrep --color=auto'
fi

# colored GCC warnings and errors
#export GCC_COLORS='error=01;31:warning=01;35:note=01;36:caret=01;32:locus=01:quote=01'

# some more ls aliases
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'

# Add an "alert" alias for long running commands.  Use like so:
#   sleep 10; alert
alias alert='notify-send --urgency=low -i "$([ $? = 0 ] && echo terminal || echo error)" "$(history|tail -n1|sed -e '\''s/^\s*[0-9]\+\s*//;s/[;&|]\s*alert$//'\'')"'

# Alias definitions.
# You may want to put all your additions into a separate file like
# ~/.bash_aliases, instead of adding them here directly.
# See /usr/share/doc/bash-doc/examples in the bash-doc package.

if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
fi

# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
if ! shopt -oq posix; then
  if [ -f /usr/share/bash-completion/bash_completion ]; then
    . /usr/share/bash-completion/bash_completion
  elif [ -f /etc/bash_completion ]; then
    . /etc/bash_completion
  fi
fi

 

    . restart-codekube.sh

 

#!/bin/bash
kubectl get pods "$HOSTNAME" || (
    echo "Use kubens to switch to the namespace of this instance and try again!"
    echo "(we can't do this for you since we don't know the namespace name)"
    exit 1
)
kubectl delete pod "$HOSTNAME"

 

    . code.sh

 

#!/bin/bash
# Script that mimics the open-from-stdin functionality of VSCode
if [ "$1" == "-" ]; then
    TEMP=$(mktemp /tmp/stdin_XXXXXX)
    cat > "$TEMP"
    exec code-server -r "$TEMP"
    exit 0
fi;

# Pass through everything else to `code-server`
# Shellcheck SC2068 = quoting variables to prevent globbing - we want that here.
# shellcheck disable=SC2068
exec code-server $@

 

    . startup.sh

 

#!/bin/bash
[[ -f /home/code/.homedir-initialized ]] || (
    echo "Remove this file to re-copy files from /etc/skel /opt/default_home at next container startup" > /home/code/.homedir-initialized
    # dotglob to catch files like `.bashrc`
    shopt -s dotglob
    cp -r /etc/skel/* /home/code
    cp -r /opt/default_home/* /home/code
    shopt -u dotglob
    # install kubernetes ext
    #su code --login -c "/usr/bin/code-server --install-extension ms-kubernetes-tools.vscode-kubernetes-tools"
)
# make workspace dir if it doesn't exist
[[ -d /home/code/workspace ]] || mkdir /home/code/workspace
# chown stuff to kube:kube
chown code:code /home/code -R
# generate env whitelist from su using.. a blacklist, pretty much.
env_whitelist=$(env | cut -d = -f 1 | grep -v -e HOSTNAME -e PWD -e HOME -e TERM -e SHLVL -e LC_ALL -e ^_$ | tr "\n" "," | head -c -1)
# configure kubectl so vscode's kubernetes extension works
# su code --login -w "$env_whitelist" -c "/usr/local/bin/generate-kubeconfig.sh"
# start code-server
# su code --login -w "$env_whitelist" -c "/usr/bin/code-server --bind-addr 0.0.0.0:8080 /home/code/workspace" # --enable-proposed-api [\"ms-vsliveshare.vsliveshare\",\"ms-vscode.node-debug\",\"ms-vscode.node-debug2\"]
runuser code --login -w "$env_whitelist" -c "/usr/bin/code-server --bind-addr 0.0.0.0:8080 /home/code/workspace" # --enable-proposed-api [\"ms-vsliveshare.vsliveshare\",\"ms-vscode.node-debug\",\"ms-vscode.node-debug2\"]

 

 

2. 설명

  ① Ubuntu 20.04를 기준으로 했다.

    . 18.04도 가능할 것으로 보이지만, `startup.sh` 내용 中 마지막 라인에 있는

    . `su` 또는 `runuser`의 `-w` 옵션이 18.04에서는 적용되지 않아서 지금은 20.04로 했다.

    → 18.04에서도 적용 가능하도록 연구해보겠다 (언제가 될지는...^^)

 

  ② 개발환경으로 사용되기에 기본적인 패키지들을 설치했다.

    . 추후 필요에 따라 추가하면 된다.

    . `DEBIAN_FRONTEND="noninteractive"` 부분이 없으면 설치 중간에 사용자 입력을 기다리기도 한다. (설치 오류)

 

  ③ Python3 설치 (pip 포함)

    . 일단 python3 개발환경으로 맞췄다.

    . 다른 언어 또는 라이브러리가 필요하다고 하면 자유롭게~

 

  ④ 한글 환경 설정 (locale)

    . 이 부분이 없으면 한글 처리에 문제가 발생한다.

    . 참고: 한글 지원되는 Ubuntu Docker Image 만들기

  ⑤ 사용자 계정 만들기 (code)

    . `code`라는 사용자 계정을 생성해서 이를 기준으로 맞추고자 했다.

    . 패스워드 없이 sudo 사용할수 있도록 했다.

    . `fixuid`를 이용해서 `code` 계정의 uid를 전체적으로 맞추도록 했다.

 

  ⑥ code-server 설치

    . 현재 시점의 최신 버전 `3.11.0`이 설치하도록 했다.

 

  ⑦ (예정) LiveShare 적용 준비

    . 지금은 아니지만, 나중에 LiveShare Extension 사용하도록 하기 위해 집어넣은 부분이다.

    . 아직은 분석이 필요한 단계

 

  ⑧ default home 준비

    . `code` 계정을 생성하면서 `/home/code` 디렉토리가 만들어졌는데,

    . 사용 중에 `/home/code` 디렉토리가 사라지면

    . 이를 다시 생성할 때 필요한 `.bashrc` 파일 같은 것을 넣어놓기 위한 과정이다.

 

  ⑨ 패스워드 및 포트 설정

    . `code-server` 접근할 때 필요로 하는 password를 지정하는 부분이다.

    . 외부에 노출되는 포트는 `8080`으로 했다.

 

  ⑩ 스크립트 복사

    . 필요에 따라 만들어진 스크립트들을 복사해 넣는 부분이다.

 

  ⑪ 실행

    . 실행 명령어 지정

 

 

3. build Image

  - 이미지 만들기는 다음과 같다.

    . 당연히 알겠지만, `-f Dockerfile` 부분은 생략 가능하다. (다른 파일명을 사용하는 경우에만 필요)

 

$ docker build -t code-server:v0.1 -f Dockerfile .

 

 

4. run Docker

  - Docker로 실행해 볼 수 있다

 

$ docker run -it -p 8080:8080 --name code -e PASSWORD="0000" code-server:v0.1

 

다행히 잘 동작한다.