Djeex/docudjeex
1
1
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Fully translated (but some work to do about urls)

Browse Source
This commit is contained in:
Djeex
2025-07-04 12:54:44 +00:00
parent acdebcb682
commit e9ccda2e14
26 changed files with 1002 additions and 846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
content/3.serveex/8.development/1.code-server.md
View File

@@ -1,6 +1,6 @@
---
---
navigation: true
title: Code-Serveur
title: Code-Server
main:
fluid: false
---
@@ -8,13 +8,13 @@ main:
# Code-Server
::alert{type="info"}
🎯 __Objectifs :__
- Installer code-server
- Monter des dossiers dans vscode
- Exposer code-server avec Swag
🎯 __Goals:__
- Install code-server
- Mount folders into VS Code
- Expose code-server with Swag
::
[code-server](https://github.com/linuxserver/docker-code-server) est un conteneur permettant d'accéder à [vscode](https://code.visualstudio.com/) en web-ui dans un environnement linux. C'est littéralement vscode et vos projets directement dans votre poche, disponibles partout.
[code-server](https://github.com/linuxserver/docker-code-server) is a container that lets you access [VS Code](https://code.visualstudio.com/) via a web UI in a Linux environment. It's literally VS Code and your projects in your pocket, available anywhere.
![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png)
@@ -22,21 +22,21 @@ main:
---
::alert{type="info"}
:::list{type="info"}
- Pour cette installation nous utiliserons [l'image maintenue par LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
- For this setup, we’ll use the [image maintained by LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
:::
::
Structure des dossiers
Folder structure
```console
root
├── docker
│ └── code-server
│ └── config
└── #n'importe quel dossier à monter dans vscode
└── #any folder you want to mount in VS Code
```
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `code-server` puis copiez collez ceci :
Open Dockge, click on `compose`, name the stack `code-server`, and paste the following:
```yaml
---
@@ -51,15 +51,15 @@ services:
- HASHED_PASSWORD=${PW}
volumes:
- /docker/code-server/config:/config
# ajoutez vos dossier à monter dans vscode
# - /chemin/vers/dossier:/dossier
# add folders to mount in VS Code
# - /path/to/folder:/folder
ports:
- 8443:8443
restart: unless-stopped
```
::alert{type="success"}
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
✨ Add the Watchtower label to each container to automate updates
```yaml
services:
@@ -69,19 +69,19 @@ services:
- com.centurylinklabs.watchtower.enable=true
::
Choisissez un mot de passe et générez un hash
Choose a password and generate its hash:
```shell
echo -n "votremotdepasse" | npx argon2-cli -e
echo -n "yourpassword" | npx argon2-cli -e
```
Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante :
Save the result carefully. Find your PUID and GUID with:
```shell
id nomdutilisateur
id yourusername
```
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
Fill in the `.env` file with the values you found, for example:
```properties
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
@@ -91,77 +91,78 @@ GUID=1000
::alert{type="warning"}
:::list{type="warning"}
- __Attention :__ Pensez à mettre un guillemet simple `'`au debut et à la fin du hash
- __Note:__ Make sure to wrap the hash in single quotes `'`
:::
::
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8443`. Et voilà, votre instance code-server en webui est disponible !
Deploy the container and go to `http://yourserverip:8443`. Voilà, your code-server instance is up and running in the browser!
::alert{type="danger"}
:::list{type="danger"}
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
- __If it fails:__ check your firewall rules.
:::
::
## Monter des dossiers
## Mount Folders
---
Vous pouvez monter les dossiers à partager dans vscode en ajoutant les volumes concernés dans le compose.yaml (ou via dockge), et en redéployant le conteneur.
You can mount folders into VS Code by adding the relevant volumes in `compose.yaml` (or via Dockge), then redeploy the container.
```yaml
services:
code-server:
#...
volumes:
- /chemin/vers/dossier:/dossier
- /path/to/folder:/folder
```
Une fois dans vscode, vous pourrez accéder au dossier.
Once inside VS Code, you'll have access to the mounted folder.
## Exposer code-server avec Swag
## Expose code-server with Swag
---
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer coder-server via Swag.
The whole point of such a solution is to access it remotely from any device. To do this, we’ll expose code-server via Swag.
::alert{type="info"}
:::list{type="info"}
- __Au préalable :__ Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/dns) un sous domaine du type `code.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/nat).
- __Preliminary:__ We assume you’ve created a subdomain like `code.yourdomain.com` with a `CNAME` pointing to `yourdomain.com` in your [DNS zone](/generalites/dns), and—unless you're using [Cloudflare Zero Trust](/serveex/securite/cloudflare)—that you’ve forwarded port `443` from your router to port `443` on your server using [NAT rules](/generalites/nat).
:::
::
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de code-server :
In Dockge, go to the SWAG stack and edit the compose file to add code-server’s network:
```yaml
services:
swag:
container_name: # ...
# ...
networks: # Relie le conteneur au réseau custom
networks: # Connects the container to a custom network
# ...
- code-server # Nom du réseau déclaré dans la stack
- code-server # Name of the network defined in the stack
networks: # Définit le réseau custom
networks: # Defines the custom network
# ...
code-server: # Nom du réseau déclaré dans la stack
name: code-serveur # Nom véritable du réseau externe
external: true # Précise que c'est un réseau à rechercher en externe
code-server: # Name of the network defined in the stack
name: code-serveur # Actual name of the external network
external: true # Indicates it’s an external network
```
::alert{type="info"}
:::list{type="info"}
- Ici nous partons du principe que le nom du réseau de code-server est `code-server_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
- We assume the network name is `code-server_default`. You can verify that the connection works by visiting the SWAG dashboard at http://yourserverip:81.
:::
::
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
Redeploy the stack by clicking “deploy” and wait until SWAG is fully operational.
Dans les dossiers de Swag, créez le fichier `code.subdomain.conf`.
Inside the Swag config folders, create the file `code.subdomain.conf`.
::alert{type="success"}
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
✨ __Tip:__ You can use [File Browser](/serveex/files/file-browser) to navigate and edit your files instead of using terminal commands.
::
```shell
sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf
```
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
Enter insert mode with `i` and paste the following configuration:
```nginx
## Version 2023/12/19
@@ -209,15 +210,14 @@ server {
set $upstream_port 8443;
set $upstream_proto http;
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
}
}
```
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
Press `Esc`, then save and exit by typing `:x` and pressing `Enter`.
Et voilà, vous avez exposé code-server !
That’s it — code-server is now exposed!
::alert{type="success"}
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik en ouvrant `code.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}.N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
✨ __Tip:__ You can protect this app with Authentik by opening `code.subdomain.conf` and uncommenting the lines `include /config/nginx/authentik-server.conf;` and `include /config/nginx/authentik-location.conf;`. Don’t forget to [create an application and provider in Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
::