La primera vez que intentas desplegar una aplicación con React.js en Azure App Service es posible que pienses que no funcionan en este servicio. No es que no soporte aplicaciones con React.js, sino que es necesario modificar un poco los parámetros que vienen por defecto. En este artículo te voy a mostrar cómo desplegar una web con React.js a través de Azure DevOps en un App Service.

Definición de la build

En primer lugar, voy a crear el pipeline que hace la build de mi aplicación. Para ello me he creado las siguientes tareas:

La tarea de npm install simplemente instala todos los paquetes que has indicado en tu package.json que son necesarios para ejecutar tu aplicación. Si la has creado a través del comando npx create-react-app este define unos scripts en el archivo package.json que te ayuda a preparar los archivos que necesita tu aplicación, dependiendo de si estás en un entorno de desarrollo o preparándote para producción. En el caso de un entorno productivo necesitarás lanzar el comando npm run build, que es lo que hacemos en la segunda tarea. Este comando generará una carpeta llamada build que contiene todos los archivos que debes desplegar en App Service.

Por otro lado, para que mi aplicación React.js funcione correctamente he creado un archivo web.config que incluyo como parte del proyecto antes de desplegarlo:

<?xml version="1.0" ?>
<configuration>
	<system.webServer>
		<rewrite>
			<rules>
				<rule name="React Routes" stopProcessing="true">
					<match url=".*" />
					<conditions logicalGrouping="MatchAll">
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
						<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
					</conditions>
					<action type="Rewrite" url="/" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>

A través de la tarea Copy web.config to build folder hago justamente eso: copio el archivo de configuración de mi sitio web en la carpeta que me ha creado el comando npm run build con los archivos para mi sitio.

Una vez que ya tengo mis paquetes instalados y mi archivo web.config en la carpeta build lo que hago es comprimir todos los archivos a través de la tarea Archive files, donde especifico que lo que quiero comprimir es únicamente la carpeta build.

Por último copio mi nuevo archivo .zip en la carpeta llamada ArtifactsToBePublished.

El último paso es coger todo lo que hay dentro de esta carpeta y publicarlo como artefacto, para que pueda enlazarlo a una pipeline del tipo Release.

Definición de la release

Ahora ya estás listo para deplegar tu aplicación con React.js en tu App Service en Microsoft Azure. En el apartado de Releases de Azure DevOps tengo una definición de pipeline con una única tarea con esta configuración:

Deshabilita la generación del archivo web.config, ya que nosotros ya estamos facilitando el que queremos utilizar.

Si ejecutas todo el flujo verás que tu aplicación funciona correctamente y que el código generado en build está en la raíz del sitio, por lo que no tendrás que lidiar con configuraciones complejas y sólo subiras lo que es estrictamente necesario para que tu aplicación se ejecute en un entorno productivo.

¡Saludos!