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
다행히 잘 동작한다.
'Development Tools > IDE' 카테고리의 다른 글
| Web-IDE, Cloud-IDE (0) | 2021.11.03 |
|---|---|
| Visual Studio Code - ZSH & Font (VSCode ZSH Font) (0) | 2020.08.15 |
| Visual Studio Code for Python (VSCode Python 개발환경 만들기) (3) | 2020.08.14 |
| Web based Visual Studio Code (Online VSCode) (0) | 2020.08.12 |
