Fully translated (but some work to do about urls)
This commit is contained in:
@ -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.
|
||||
|
||||
|
||||
|
||||
@ -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).
|
||||
::
|
||||
Reference in New Issue
Block a user