Configuraciónde VSCode con Docker y MySQL

Anexo Título Versión
02 VSCode + Mysql v 1.0

Prerrequisitos

Es necesario tener instalado Docker y VSCode. En Docker debemos tener instalado y en funcionamiento el contenedor de MySQL.

Configuración del contenedor Mysql/Mysql-server

Vamos a suponer:

  1. La IP del contenedor MySQL es 127.0.0.1
  2. El puerto de MySQL es 3306

Crear un usuario en MySQL

Según hemos creado el contenedor de MySQL, tenenmos el usuario root@localhost con la contraseña administrador. El usuario root solo se puede conectar desde el contenedor, por lo que no podemos utilizarlo para conectarnos desde VSCode. Para conectarnos desde VSCode debemos crear un usuario que se pueda conectar desde cualquier IP, es decir, desde fuera del contenedor. Esto se hace por seguridad, ya que el usuario root tiene todos los privilegios y no es recomendable utilizarlo desde fuera del contenedor.

El script de creación de este usuario sería:

CREATE USER 'alumno'@'%' IDENTIFIED BY 'alumno';
GRANT ALL PRIVILEGES ON *.* TO 'alumno'@'%' WITH GRANT OPTION;

Pero para poder ejecutarlo primero nos tenemos que conectar al contenedor de MySQL. Para ello vamos a utilizar el terminal de Docker.

docker exec -it docker_mysql bash
Una vez dentro del contenedor, nos conectamos a MySQL con el usuario root:

mysql -u root -p
Introducimos la contraseña administrador cuando nos lo pida.

Una vez dentro de MySQL, ejecutamos el script anterior para crear el usuario alumno:

CREATE USER 'alumno'@'%' IDENTIFIED BY 'alumno';
GRANT ALL PRIVILEGES ON *.* TO 'alumno'@'%' WITH GRANT OPTION;

La respuesta de MySQL debe ser:

mysql> CREATE USER 'alumno'@'%' IDENTIFIED BY 'alumno';
Query OK, 0 rows affected (0.027 sec)

mysql> GRANT ALL PRIVILEGES ON *.* TO 'alumno'@'%' WITH GRANT OPTION;
Query OK, 0 rows affected (0.009 sec)

Ahora puedes salir exit y probar a conectarte a MySQL con el usuario alumno desde el contenedor:

mysql -u alumno -p
Introducimos la contraseña alumno cuando nos lo pida.

Si todo funciona correctamente ya puedes salirte del clliente de MySQL y del contenedor con exit. Y continuar con la instalación de las extensiones de VSCode.

Instalción de la extensión Docker de MySQL

En Docker podemos instalar la extensión de Docker.

Extension Docker

Podemos tener más información sobre la extensión en Docker Extension

Una vez instalada la extensión nos debe aparecer en la barra lateral izquierda de VSCode. Desde esta extensión podemos ver los contenedores que tenemos en ejecución, pararlos, iniciarlos, etc.

Instalación de la extensión MySQL

Ahora vamos a instalar la extensión de MySQL. En este caso vamos a utilizar la extensión de Weijan Chen.

Extension MySQL

Podemos tener más información sobre la extensión en MySQL Extension

Una vez instalada la extensión nos debe aparecer en la barra lateral izquierda de VSCode. Desde esta extensión podemos conectarnos a la base de datos, ejecutar consultas, etc.

Conexión a la base de datos

Para conectarnos a la base de datos debemos pulsar en el icono de la extensión de MySQL y seleccionar la opción Add Connection.

Add Connection

En la imagen podemos ver los valores por defecto.

Vamos a cambiarlos para que se ajusten a nuestra configuración.

  • ServerType: MySQL
  • Name: Nombre de la conexión -> DockerConnection
  • Host: IP del contenedor MySQL -> 127.0.0.1
  • Port: Puerto de MySQL -> 3306
  • User: Usuario de MySQL -> alumno
  • Password: Contraseña del usuario -> alumno

Antes de guardar la conexión podemos utilizar el botón Connect para comprobar que la conexión se realiza correctamente.

Boton Connect

Si todo ha ido bien nos debe aparecer un mensaje como el siguiente:

Conexión correcta

En caso contrario, debes revisar si el contenedor de MySQL está en ejecución, y si cumples todos los requisitos que se piden al inicio del documento.

Uso de la extensión

Una vez que tenemos la conexión configurada podemos ejecutar consultas, ver las bases de datos, las tablas, etc.

Para ello vamos a realizar un ejemplo donde vamos a crear una base de datos test con una tabla test_table y vamos a insertar un registro en la tabla. Lo primero es crear un nuevo proyecto (carpeta) en VSCode a la que llamaremos mysqlTest.

Una vez en este proyecto vamos a crear un nuevo archivo test.sql donde vamos a escribir el siguiente código:

CREATE DATABASE test;
USE test;

Estos comandos nos sirven para crear la base de datos test y seleccionarla para poder trabajar con ella.

Imagen en VSCode

Si aparece como en la imagen con el candado cerrado quiere decir que no hemos asociado ninguna conexión a este archivo. Para asociar la conexión debemos pulsar en el candado y seleccionar la conexión que hemos creado anteriormente.

Luego si pasamos por encima de cada línea de código nos aparecerá un botón para ejecutar la consulta (botón play). Si todo va bien nos aparecerá un check verde, en caso de error nos aparecerá una X roja y un mensaje de error.

Si ahora volvemos a la extensión de la base de datos y refrescamos la conexión, nos debe aparecer la base de datos test.

Imagen en VSCode

Ahora vamos a crear una tabla en la base de datos test. Para ello vamos a escribir el siguiente código en el archivo test.sql:

CREATE TABLE test_table (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

Una vez creada la tabla debemos poder verla en la extensión de MySQL.

Tabla en MySQL

Y vamos a poblarla con varios registros:

INSERT INTO test_table (name) VALUES ('Registro 1');
INSERT INTO test_table (name) VALUES ('Registro 2');
INSERT INTO test_table (name) VALUES ('Registro 3');

Si todo ha ido bien podemos ejecutar la consulta y ver los registros en la tabla.

SELECT * FROM test_table;

Registros en MySQL

Conclusión

De esta manera podemos conectar con nuestros servidores MySQL y ejecutar consultas desde VSCode. Esto nos permite tener todo nuestro entorno de desarrollo en un único programa y no tener que estar cambiando de aplicaciones para realizar consultas en la base de datos.

Es vital para un desarrollador tener un entorno de desarrollo cómodo y que le permita trabajar de manera eficiente. VSCode nos permite instalar extensiones que nos facilitan el trabajo y nos permiten tener todo en un único programa.

Alternativas

Existen otras extensiones y aplicaciones que nos permiten conectarnos a bases de datos MySQL desde VSCode. Algunas de ellas son: