Publicar en Azure Websites desde repositorio Github

Una de las novedades introducidas en Azure Websites es la posibilidad de publicar directamente desde repositorios de código, favoreciendo así escenarios de integración contínua. Cada vez  que realicemos cambios se publicarán en nuestro website automáticamente. En este post vamos a explicar cómo hacerlos desde Github.

Vamos a empezar publicando una web creada con MVC4 con Visual Studio y alojando el proyecto en un repositorio en GitHub, desde donde publicaremos en nuestro website de Azure.

 

Preparación: creando nuestro website y enlazándolo al repositorio remoto

Lo primero que necesitamos es un repositorio en GitHub, y este lo podemos crear desde su web seleccionando la opción Create a repository. Simplemente establecemos un nombre para el repositorio y, opcionalmente, una descripción. Pulsamos Create repository y nos llevará a la página de código de nuestro repositorio, de momento vacío.

Como lo que queremos es publicar en nuestro website de Azure directamente con cada push (es decir, la orden para integrar en un repositorio remoto los cambios de un repositorio local) que hagamos a nuestro repositorio en GitHub, tenemos que enlazarlo. Para ello vamos a nuestro portal de Azure y creamos un nuevo WebSite:

clip_image002[7]

Una vez creado, entramos en este website y pulsamos Set up Git publishing

clip_image004[4]

Tras unos momentos nos aparecerá una pantalla como la siguiente, en la que tendremos que seleccionar la opción de desplegar nuestra web desde un repositorio de GitHub y, pulsando en el enlace que aparece al desplegarlo otorgaremos permisos a Azure para acceder a nuestro repositorio:

clip_image006[4]

Se nos pedirán en este momento nuestras credenciales de GitHub, y cuando nos hayamos autenticado correctamente se nos permitirá elegir el repositorio desde el que queremos publicar

clip_image008[4]

Si nuestro repositorio está vacío no se publicará nada todavía, si no cuando realicemos el primer push. Pero si nuestro repositorio ya contenía datos, se empieza a publicar automáticamente:

clip_image010[4]

 

Creación de nuestra aplicación web

Como nuestro repositorio, de momento, estaba vacío vamos a introducir una aplicación web para publicarla. Creamos un proyecto nuevo de Aplicación web de ASP .NET MVC 4 utilizando .NET Framework 4 () y establecemos que sea una Aplicación de internet.

clip_image012[4]

clip_image014[4]

 

Creación de la copia local de nuestro repositorio

Una vez tengamos nuestro proyecto creado, abrimos la consola de comandos o la consola GitBash y nos posicionamos en el directorio de nuestra aplicación web, para inicializar la copia local del repositorio en ese directorio con el comando git init. Una vez hecho esto, introducimos el comando git gui para abrir la herramienta que nos permite gestionar nuestro repositorio de forma “más amigable” (evitando los comandos de consola). Hasta el momento llevamos algo como esto:

clip_image016[4]

 

Enviando los cambios a nuestro repositorio remoto

Ahora vamos a confirmar los cambios a realizar y enlazar nuestra copia local del repositorio con el repositorio que hemos creado en GitHub. Para ello, en Git Gui pulsamos Stage changed para efectuar los cambios que tenemos preparados, confirmamos y en el popup que se nos abre indicando un error pulsamos Continue.

clip_image018[4]

clip_image020[4]

Ya podemos realizar nuestro primer commit (es decir, envío de cambios), confirmando los cambios. Escribimos un mensaje que lo describa y pulsamos Commit

clip_image022[4]

Una vez hecho esto, vamos a Remote > Add y establecemos el nombre que queremos darle a nuestro repositorio remoto (puede ser el que queramos, en este caso github) y la URL de nuestro repositorio en GitHub. Esta URL se encuentra en la sección de código de nuestro repositorio en GitHub:

clip_image024[4]

La copiamos y la pegamos en el cuadro de texto de Location:

clip_image025[4]

 

Publicando los cambios en nuestro website

Solo nos quedaría hacer push a nuestro repositorio remoto en GitHub para publicar automáticamente en nuestro website de Azure. Para ello, simplemente pulsamos el botón Push, establecemos que el destino sea nuestro repositorio remoto en GitHub y volvemos a pulsar Push.

clip_image027[4]

Se nos pedirá usuario y contraseña de GitHub y, tras introducirlo, se realizará correctamente el push.

clip_image029[4]

En ese momento, desde el portal de Azure, podremos ver como se publica automáticamente en nuestro website

clip_image031[4]

A partir de ahora, cada vez que realicemos un push a nuestro repositorio remoto en GitHub se publicará en nuestro website de Azure

clip_image033[4]

Para comprobar que todos los cambios realizados se han publicado correctamente, simplemente pulsamos en Browse para ver nuestro website

clip_image035[4]

 

Resumiendo

Preparación

Publicar desde repositorio en GitHub

  • Crear cuenta en GitHub
  • Crear repositorio en GitHub
  • Enlazar repositorio local con repositorio remoto en GitHub
  • Enlazar el repositorio de GitHub con nuestro website de Azure
  • Realizar push de los archivos al repositorio remoto en GitHub para publicar automáticamente en Azure websites

 

Por último, recuerda que puedes ponerte en contacto con nosotros cuando quieras o estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

 

Un saludo,

Gorka Madariaga (@Gk_8)