Introducción: una solución de agente front-end concisa e integral que toca los puntos débiles, te lo mereces.
Autor: oblicua Fría
Hablando de agentes de front-end, creo que todos los estudiantes que han realizado la depuración conjunta de front-end y back-end lo han encontrado. En el desarrollo actual de proyectos de ingeniería front-end y back-end, el modelo principal debe ser la separación de front-end y back-end. Hace que los roles de front-end y back-end sean más claros, y proporciona una mejor garantía para la calidad de I + D del proyecto. Pero también trae muchos inconvenientes en la depuración.
Aquí tomamos como ejemplo el desarrollo web. Los proyectos front-end y back-end están separados, y sus respectivos servicios están habilitados. Los servicios front-end son principalmente para facilitar el desarrollo front-end para observar los resultados de renderizado del código escrito en tiempo real. Aquí, para garantizar un efecto de ingeniería más realista, esperamos dar prioridad a Tome la interfaz de back-end real para obtener los datos, pero debido a las restricciones de dominio cruzado del navegador, el front-end no puede permitir directamente que las solicitudes iniciadas desde el navegador lleguen al servidor de back-end.
En este momento, debemos agregar una capa de capacidades de proxy para ayudarnos a resolver problemas entre dominios.
La solución es muy simple, solo configure la dirección proxy en el paquete web para comenzar el viaje de depuración conjunta de front-end y back-end. Pero ... en la mayoría de los casos, la situación de la puesta en marcha conjunta suele ser más complicada que simplemente proporcionarle una dirección IP en el back-end.
Es posible que tenga que enfrentar tal situación
Escenario 1
El proyecto de fondo generalmente necesita agregar algunas restricciones a la interfaz. Por ejemplo, la autenticación de inicio de sesión es indispensable en la mayoría de los casos. En este momento, configura directamente la dirección de servicio del proxy e inicia una solicitud.
Escenario 2
1 Para muchos, ejemplos muy reales. La relación actual de I + D del equipo del proyecto es generalmente de un front-end a múltiples back-end, y los estudiantes de back-end se desarrollan simultáneamente. Cuando se coordina con el front-end, se convierte en paralelo. Los servicios se han implementado en un servicio diferente, ya que aún no es el final que todos fusionarán el código y lo colocarán en una etapa en la que la dirección del servicio permita la depuración del front-end. En este momento, el front-end solo puede cambiar de agente.
Escenario 3
Además de la situación de verificación de inicio de sesión, hay una cosa especial que nuestro servicio de back-end está oculto detrás de la máquina bastion. Equivalente al nivel de verificación de seguridad, otro nivel, como el entorno de nube patentado de nuestro cliente. En este momento, la configuración de proxy común, incluido el uso de host, no se puede resolver.
Su posible solución
Escenario 1 solución
La forma de omitir el permiso de inicio de sesión es simple: inicie sesión de la manera normal, obtenga la información de la cookie de la interfaz y luego use algunos métodos para hacer que su solicitud local traiga esta cookie para que el servidor pueda reconocerla. En este momento, si el servidor de prueba proporciona servicios en forma de un nombre de dominio, puede introducir una herramienta de administración de host como ihosts y configurar la asignación entre la ip local y el nombre de dominio del servicio de prueba, activarlo, porque el mismo nombre de dominio y diferentes puertos pueden compartir cookies. Para que pueda acceder sin problemas. Sin embargo, si el servicio de prueba solo proporciona acceso ip y se establece la verificación de inicio de sesión, en este momento, es imposible lograr la transmisión de cookies vinculando el host. Pensaremos en webpack, pero desafortunadamente la configuración de cookies de webpack es más complicada A menudo tomará mucho tiempo hacer esto a través de la búsqueda y el aprendizaje, y puede que tenga que seguir cometiendo errores al final para lograr un resultado exitoso. Obviamente, este costo sigue siendo un poco alto para un pequeño requisito de depuración.
Solución del escenario 2
Establezca múltiples configuraciones de proxy, cambie cuando corresponda a diferentes entornos de desarrollo, pero necesita reiniciar el proyecto, debe escribir su propia lógica para juzgar las diferencias en entornos específicos.
Solución del escenario 3
Use algunas herramientas proxy existentes, como Charles, PostMan. El complemento de Chrome SwitchyOmega, etc., PostMan, SwitchyOmega son más adecuados para la simulación de back-end para iniciar solicitudes para probar su propia interfaz, Charles es más completo, se puede usar para capturar paquetes, también se puede usar para la depuración de proxy, pero la configuración es relativamente complicada. O bien, los estudiantes que están familiarizados con nginx pueden usar nginx como una implementación proxy, pero para los novatos, el costo de implementar un proxy sintonizable de esta manera es aún demasiado alto.
¿Cómo podemos resolver el problema de la depuración conjunta de front-end y back-end en 5 minutos?
¿Existe una mejor solución integral que sea concisa y toque el punto del dolor? La respuesta es que debe haberla . Aquí recomendamos la herramienta de retiro: versión del complemento vscode de Alibaba CloudTookit . La instalación del complemento es muy conveniente para abrir vscode, seleccionar el panel de complementos, buscar "Alibaba Cloud Tookit", seleccionarlo e instalarlo.
A continuación, tomemos un ejemplo práctico para mostrarle el "efecto curativo" de CloudTookit.
Depuración conjunta en la sección frontal de un entorno de despliegue real
En muchos casos, el I + D de front-end espera realizar la depuración conjunta en un entorno más cercano al real. Cuando nos encontramos con problemas, necesitamos realizar pruebas locales de depuración conjunta en un entorno similar al preenvío. En este momento, encontraremos problemas estrictos de autenticación. Por ejemplo, ahora ajustamos conjuntamente el entorno previo a la emisión de un producto en la nube, necesitamos obtener sec_token, y necesitamos obtener la cookie de verificación de inicio de sesión para pasar la verificación, pero todos sabemos que el proxy webpack convencional establece la autenticación y No directamente amigable.
A continuación, demuestre el efecto de depuración conjunta con autenticación, envíe previamente el host del entorno: xx.xxx.xxx.xx mse.console.aliyun.com, inicie sesión en la consola
Antes de configurar el proxy, veamos el efecto del inicio local:
Puede ver que los datos no están disponibles. Luego use Cloud Tookit directamente para levantarse rápidamente:
Haga clic para ver el video
En resumen, la depuración de autenticación de proxy solo debe dividirse en tres pasos:
1. Inicie sesión, obtenga cookies, sec_token (preste atención para proteger la seguridad de los datos de autenticación)
2. Abra vscode, seleccione proxy de nube, cree la configuración de proxy y pegue cookies, guarde y active el proxy
3. Copie el host proxy, reemplace la configuración del proxy webpack, simplemente inicie el proyecto
Múltiples entornos de acoplamiento y depuración conjunta
Ali PTS está diseñado para hacer una nube nube de pruebas de rendimiento de los productos, hay dos versiones de las viejas y las nuevas necesidades de desarrollo iterativo, hay una versión separada de cada entorno adelantado en línea y el medio ambiente, el desarrollo front-end con su propia representación El acoplamiento de código, la gestión y la conmutación no son convenientes.
Versión anterior: prepts.aliyun.com, pts.aliyun.com
nueva versión: pts.console.aliyun.com Cambiar entre preenvío y en línea a través de diferentes hosts
Debido a que algunas funciones especiales ahora agregan un nuevo dominio de pre-s.pts.aliyun.com, es decir, el mismo conjunto de código de ingeniería front-end puede necesitar conectarse a al menos 5 entornos de depuración conjunta, lo que en realidad es muy doloroso para el desarrollo. Pero usar el complemento Cloud Tookit tendrá una experiencia completamente diferente.
De acuerdo con el nombre de dominio correspondiente, abrimos el complemento CloutTookit para configurarlo, para distinguir el efecto, tomo cookies de diferentes cuentas
proxy1-toma la cookie completa de la cuenta de pts 1
proxy2- toma la cookie 2 de la cuenta incompletamente autorizada
Primero, use el proxy 1 para señalar prepts.aliyun.com. En este momento, la cuenta de cookies utilizada por el proxy 1 es la cuenta principal, y los datos están relativamente completos. Configuramos el proxy en el proyecto y comenzamos el proyecto para ver el efecto:
Haga clic en el video para ver el efecto.
A continuación, sin reiniciar el proyecto, cambie al segundo conjunto de pre-s.pts.aliyun.com. Este conjunto de cuentas no tiene permisos suficientes y no hay muchos datos. Abrimos proxy2 y luego realizamos una actualización del navegador directamente :
Se puede ver que el cambio del entorno de depuración conjunta es muy perfecto, y no hay necesidad de reiniciar el proyecto en el medio.
Depuración conjunta de un entorno de nube patentado
Debido a las limitaciones del entorno local, ciertas funciones del proyecto solo se pueden verificar en un entorno real. El entorno real tiene requisitos de seguridad relativamente altos, y la máquina de bastión a menudo se usa para reenviar servicios internos. En este momento, el método proxy habitual fallará, y la depuración conjunta entre local y en línea no será posible, y la eficiencia de promoción del proyecto se reducirá en gran medida.
Nota: El acceso a la máquina de bastión es más problemático, primero debe configurarlo a través del software proxy del navegador
Luego, acceda al nombre de dominio del servicio específico a través del navegador, como aa.bb.cc (también hay un enlace de inicio de sesión antes). A continuación, el navegador enviará primero la solicitud al agente designado de la máquina de bastión, y la máquina de bastión se distribuirá internamente y se comunicará al servicio específico. La depuración conjunta que desea localmente aún no puede omitir la verificación de la respuesta. Después de iniciar sesión, tome la cookie de verificación, y el siguiente paso es CloudTookit para continuar con su poder.
Primero inicie sesión en el sistema:
Visite la página oficial para obtener cookies:
Abra el complemento para configurar la dirección de servicio y la dirección de la máquina de bastión:
Luego guarde y active el proxy y reemplace la dirección del servicio de proxy local con la dirección del proxy en el proyecto:
Comience el proyecto y sea testigo de la sorpresa:
Usa el sentimiento
Durante la epidemia, realizamos un proyecto en la nube patentado (no conectado directamente a la red pública). Nos encontramos con un escenario complejo, como una máquina de bastión, y al principio no pudimos evitarlo. Después de iniciar sesión en el entorno estándar, haga clic en la página para determinar el origen del problema. SoureMap solo puede ayudarnos a localizar rápidamente el problema y no podemos verificarlo después de cambiarlo. Solo puede ver el problema en línea, y luego modificar el código y empaquetarlo y lanzarlo a los compañeros de clase del back-end para su redistribución. Por lo general, demora más de 3 horas en ir y venir. Me puedo imaginar lo ineficiente que es esto. Las empresas nos obligan a realizar dicha investigación sobre las capacidades de la agencia. Más tarde, puede conectarse directamente al entorno de nube patentado, depuración de código local, verificación de segundos cuando se encuentran problemas, la eficiencia mejora enormemente y la entrega normal del proyecto está perfectamente garantizada.
Una vez que uno de nuestros compañeros de clase me dijo que nuestro entorno de depuración conjunta ha cambiado nuevamente, ¿qué debemos hacer? Le tiré el CT directamente a él durante unos minutos para que lo hiciera.
Pasado
CloudtTookit siempre se ha comprometido a proporcionar a los desarrolladores servicios de desarrollo de alta eficiencia. La función de sus propios productos proviene de las necesidades reales de los desarrolladores. Le recomiendo sinceramente que recopile CloudTookit este pequeño complemento, ya sea que esté realizando una depuración conjunta de proyectos comunes o tenga otras necesidades de depuración conjunta, puede ayudarlo a resolver el problema perfectamente. Si tiene alguna buena sugerencia o idea, puede dárnosla. Consideraremos seriamente las buenas sugerencias. Hemos disfrutado de los servicios de la comunidad de desarrolladores antes y ahora esperamos devolverla a la comunidad de desarrolladores. Juntos para enriquecer y mejorar la infraestructura de todo el ecosistema de desarrolladores.
