Aller au contenu principal

VS Code dans un navigateur

1. Description​

  • Pour avoir un homelab complètement autonome, il est possible d'installer un IDE (Integrated Development Environment) graphique sur une VM de son homelab pour développer à distance depuis son navigateur, sans avoir besoin d'installer de logiciel sur son propre ordinateur. Il existe une version web de VS Code(Visual Studio Code) qui tourne dans un container et accessible à travers une interface web.

2. Installation de "VS Code in the browser" en tant que service (option 1)​

  • Télécharger le script d'installation install.sh
$ wget https://raw.githubusercontent.com/coder/code-server/refs/heads/main/install.sh
$ chmod u+x install.sh
  • Exécuter le script d'installation install.sh
$ ./install.sh
AlmaLinux 9.5 (Teal Serval)
Installing v4.100.2 of the amd64 rpm package from GitHub.

+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server-4.100.2-amd64.rpm.incomplete -C - https://github.com/coder/code-server/releases/download/v4.100.2/code-server-4.100.2-amd64.rpm
###################################################################################################################################################################################################################################### 100,0%
+ mv ~/.cache/code-server/code-server-4.100.2-amd64.rpm.incomplete ~/.cache/code-server/code-server-4.100.2-amd64.rpm
+ sudo rpm -U ~/.cache/code-server/code-server-4.100.2-amd64.rpm
Mot de passe :

rpm package has been installed.

To have systemd start code-server now and restart on boot:
  sudo systemctl enable --now code-server@$USER
Or, if you don't want/need a background service you can run:
  code-server

Deploy code-server for your team with Coder: https://github.com/coder/coder
  • Installer le service code-server pour son utilisateur
$ sudo systemctl enable --now code-server@$USER

3. Installation de "VS Code in the browser" dans un container podman (option 2)​

3.1. Créer le fichier Containerfile​

FROM codercom/code-server:latest
LABEL maintainer="tz@home.lab"

USER root

# Install packages
RUN apt-get -y update && \
    apt-get -y install \
      python3 \
      python3-pip \
      apt-transport-https \
      gnupg2 \
      curl wget

# Install vscode extensions
RUN code-server --install-extension ms-python.python

# Cleanup
RUN rm -rf /var/lib/apt/lists/* /root/.cache

3.2. Construire l'image localhsot/code-server​

$ podman build -t code-server:1.0.0

3.3. Exécuter l'image localhost/code-server​

$ podman run -it -p 127.0.0.1:8080:8080 --rm -v "${HOME}/projects:/home/coder/project:z"  -v "${HOME}/.config:/home/coder/.config:z" --name vscode localhost/code-server:1.0.0

4. Utilisation de "VS Code in the browser"​

  • Par défaut, VS Code n'écoute que sur l'interface localhost. Pour y accéder, on peut par exemple utiliser SSH en faisant de la redirection de port.
    • Se connecter en SSH au serveur hébergeant "VS Code in the browser"
$ ssh -L8080:127.0.0.1:coder1.home.lab

5. Utilisation d'extensions​

5.1. Extensions python​

  • Pour développer en python, installer les extensions Python et Python for VSCode

5.2. Extension git​

  • "VS Code in the browser" supporte nativement git si le package est installé