Installation de Visual Studio Code (Méthode Docker sans Supervisor)

Home Assistant - Tutoriels & Partages Autres
1

Installation de Visual Studio Code (Méthode Docker sans Supervisor)

Introduction.

Si vous avez installé Home Assistant Core via docker sans utiliser le superviseur, vous n’avez pas accès à la bibliothèque d’addons de Home Assistant (avec le supervisor).
Ce tutoriel vous explique comment installer Visual Studio Code pour éditer votre configuration directement depuis l’interface web de home assistant.

Pré-requis :

  • une installation de home-assistant sous docker-compose

Ajout du container Visual Studio Code

version: "3"

services:
  home-assistant:
    container_name: home-assistant
    image: homeassistant/home-assistant:stable
    restart: unless-stopped
    ports:
      - "8123:8123"
    volumes:
      - $DOCKER_FOLDER/home-assistant:/config
    environment:
      - TZ=$TZ

  vscode:
    container_name: vscode
    image: linuxserver/code-server
    restart: unless-stopped
    ports: 
      - "8443:8443"
    volumes:
      - $DOCKER_FOLDER/vscode:/config   #configuration de votre vscode
      - $DOCKER_FOLDER/home-assistant:/config/workspace    #dossier d'installation de votre home assistant
    environment:
      - PUID=$PUID
      - PGID=$PGID
      - TZ=$TZ

Pour simplifier mon docker-compose, j’utilise un fichier d’environnement .env à coté de mon docker-compose.yml :

PGID=1000     # id utilisateur
PUID=1000     # id groupe utilisateur
TZ=Europe/Paris   # timezone
DOCKER_FOLDER=~/docker-folder #dossier qui contient vos dockers

Lancer votre stack en faisait un docker-compose up.

Configuration de VS Code pour Home Assistant

Vous devriez voir votre workspace home assistant dans vscode en vous rendant sur http://ip-de-votre-serveur:8443

image
image1296×850 62 KB

Allez dans l’onglet extensions puis cherchez l’extension Home Assistant Config Helper et installez là.

image
image824×694 81.2 KB

Créez un token dans Home Assistant .

image
image1278×538 56.8 KB

Copiez le token.

image
image928×486 28.6 KB

Retourner dans VS Code puis allez dans les paramètres.

image
image614×672 30.9 KB

Coller le token et ajoutez l’url de votre instance home assistant dans les paramètres de l’extension.

image
image2004×748 91.8 KB

Vous pouvez verifier la connexion du l’extension avec votre instance home assistant en tentant de le rédemarrer depuis VS Code :

  • CTRL + SHIFT + P (ou CMD + SHIFT + P sur mac os)
  • Restart Home Assistant

image
image2132×588 66.3 KB

L’auto-completion doit également fonctionner dans les fichiers de configuration yml.

Ajout d’un onglet VS Code dans Home Assistant

Vous pouvez maintenant ajouter VS Code direct dans Home Assistant en y accédant via une iframe en ajoutant ce code dans le fichier configuration.yml :

panel_iframe:
  vscode:
    title: 'VS Code'
    url: 'http://ip-de-votre-serveur:8443'
    icon: mdi:microsoft-visual-studio-code

Puis redémarrez Home Assistant.

Et voila !

image
image1368×1062 98.3 KB

Bonus : Accès à VS Code depuis l’extérieur

L’intégration actuelle ne marchera qu’en local car nous utilisons des ip locales.
Vous pouvez remplacer les ip par vos url publiques du type https://home-assistant.example.com et ttps://vscode.example.com pour y accéder depuis l’extérieur.

N’oubliez pas de configurer votre reverse proxy préféré (ngnix, traefik, npm, etc…) avec le header X-Frame-Options pour autoriser VS Code a être incorporer dans une iframe : X-Frame-Options - HTTP | MDN.

6 « J'aime »
2

Merci pour ce tutoriel ! :+1:

3

Super merci bien pour ce tutoriel

4

Bonjour,

Je n’arrive pas à faire la connexion entre Vscode et HA

image

J’ai l’impression que l’addon ne charge pas …

5

Bonjour,

J’ai une erreur de « Permission denied » lorsque je veux modifier configurations.yaml
Une idée de la cause?
Merci

6

Les droits du fichier ne permettent pas au container docker virtual studio d’écrire.
Il faut regarder comment tu lances les containers, avec quels UID/GID. Et ajuster ça pour que le UID d’exécution de virtual studio ait le droit d’écriture sur le fichier.

7

Merci pour votre retour. Pouvez-vous m’expliquer plus en détail ce que je dois faire. Je suis une bille en Linux.

8

Tu es bien en méthode Docker sans supervisor? Appelée officiellement Home Assistant Container?
Si c’est bien le cas,

C’est pas forcément la solution d’installation recommandée.
On pourrait dire que c’est vouloir faire le Mont-Blanc en tong :wink:

Pour une installation avec Supervisor et donc via add-on, les droits sont (normalement) mis « comme il faut »…

9

Oui, j’ai une installation Home Assistant Container sans Supervisor. J’ai utilisé odocker-coompose pour l’installation de VsCode et Home Assistant.

10

C’est que je pensais/craignais. Sauf si tu as envie de t’investir dans linux et docker, c’est sans doute une « mauvaise » route.
L’installation Home Assistant Operating System, c’est beaucoup plus facile.
Tu te retrouves avec un environnement Linux, que je dirais, bridé. Mais, c’est clic-clic et ça roule (sauf exception…).
Une « bonne » raison de partir sur la solution container?

En gros, dans le compose, il va falloir préciser l’UID et le GID pour que ton utilisateur du container VSCode puisse lire les fichiers de HA.
Voilà quelques explications:https://www.objectif-libre.com/fr/blog/2020/06/30/securiser-docker-au-travers-de-la-fonctionnalite-userns-remap/

11

Bonjour,

Peux-tu détailler cette partie car je pense avoir fait ce qu’il fallait mais cela ne fonctionne pas :

Je suis sur une configuration avec un docker NGinx Proxy Manager.
L’accès de l’extérieur en https à Home Assistant fonctionne (ha.domain.com).
L’accès de l’extérieur en https à Visual Studio Code fonctionne (vsc.ha.domain.com).
J’ai mis à jour configuration.yaml

et dans le host de NPM j’ai ajouté

image
image730×989 29.7 KB

Quand je clic le menu VS Code de HA, j’ai un message dans la frame comme quoi « vsc.ha.domain.com » n’autorise pas la connexion !

Par avance merci.

12

Bonjour, merci pour le tuto, tout est fonctionnel même à l’extérieur.
Mais je rencontre un autre soucis: depuis mon iPad, j’ai lancé l’app home assistant et cliquer sur vscode dans le menu de gauche. Impeccable, sauf que maintenant je n’ai plus que la fenêtre vscode et impossible de retourner le menu de gauche de home assistant.
Même en redémarrant l’app ou iPad, des que j’ouvre l’app il me remet sur la iframe vscode.
Y a t’il une solution ? (A part enlever la config dans le fichier de configuration)?
Merci

13

bonjour, pour visual studio code, doit etre dans le compose ha?

14

Non pas obligé.

Merci encore pour le tutoriel, je viens de le suivre à l’instant et il est toujours fonctionnel.

15

bon j’ai modifier un peu le docker compse de base pour un faire qu’avec visal code et ca a fonction meme pour l’intgration dans ha
ksks
j’ai que ca qui revien a chaque fois

16

Bonjour,
J’ai installé VScode sous docker sur un NAs synology, ainsi que HA.
Tout fonctionnait parfaitement, mais depuis un mois l’icône « vscode » ne fonctionne plus : lorsque clique dessus pour afficher le dashboard j’ai une erreur :
Error loading the dashboard strategy:
Error: Unknown strategy

image
image1028×259 10.7 KB

Je peux toujours accéder à la conf de HA avec vscode en tapant http://<IP du NAS>:8443/?folder=/config dans chrome, mais ça ne marche pas dans HA
J’ai essayé de modifier le dashboard, mais même erreur :
image

Pouvez vous m’aider ? merci !

17

Re-bonjour,
j’ai trouvé. J’ai supprimée la vue et j’en ai crée une nouvelle (via l’UI) avec

views:
  - title: VSCode
    Panel: true
    cards:
      - type: iframe
        url: http://192.168.1.130:8443/?folder=/config
    type: panel

Il reste le bandeau bleu au dessus mais l’important c’est que je peux à nouveau éditer ma conf yaml avec VS Code !

1 « J'aime »
18

Bonjour,
Je n’arrive pas à intégrer Visual studio dans HA.
Quand je pointe l’IP local: port, HA me donne l’erreur suivante :

Impossible de charger les iframes pointant vers des sites web utilisant http: si home assistant est servi via https.

Mon image docker n’est en effet pas accessible en https depuis l’adresse IP. Je pourrai mettre en place le réserve proxy, mais je ne souhaite pas rendre accessible VS server depuis l’extérieur.

Quelqu’un sait comment faire ?

Installation Docker sur nas Synology.

19

Je m’auto répond.
Il n’est pas possible de faire un lien https vers une IP.

J’ai donc créé un reverse proxy pour avoir une vrai adresse avec certificat SSL (https://code.ndd.fr).

J’ai ajouté une vérification sur ce sous-domaine pour autoriser uniquement les clients locaux (192.168.1.1/24) à se connecter à ce sous-domaine.

J’ai utilisé pour se faire le « Profil de contrôle d’accès » du reverse proxy de Synology.

20

Bonjour,

J’ai une question sur mon cas d’usage car, depuis plus d’un an, l’execution de l’addon vscode sur mon installation HA le fait planter (le CPU grimpe soudain en flèche, et HA fini par rebooter).
Donc je n’utilise plus que le simple File Editor depuis ce temps … mais VCODE serait mieux …

Bref, j’aurais mon HA sur son Odroid N2 et le VSCODE dans un conteneur sur mon NAS QNAP.
Est-ce que cela va fonctionner ?