Introducción
Contenido
En este artículo, vamos a crear una aplicación simple para servir archivos estáticos como archivos HTML, archivos CSS e imágenes usando Nód.js. y Rápido.
Configuración del proyecto e instalación de Express
Para comenzar, creemos un nuevo proyecto de Node.js a través del init ordenar en nueva carpeta:
$ npm init
Complete la información solicitada de acuerdo con sus necesidades o simplemente configure los valores predeterminados dejando todas las líneas en blanco.
Ahora podemos instalar el marco Express ejecutando:
$ npm install --save express
¡Estamos listos, comenzamos a codificar!
Entrega de archivos con Express
Hay dos formas de entregar archivos estáticos con Express:
Te puede interesar:Cargue la gestión de archivos en Node.js con Express y Multer- Sirviendo un solo archivo configurando una ruta al recurso
- Configure un directorio público donde todos los archivos sean accesibles
Repasaremos cada uno de estos métodos en las próximas dos secciones.
Entrega de un solo archivo
Considere una situación en la que queremos crear una página de destino simple que contenga 3 documentos HTML (home.html, contact.htmly about.html), y queremos entregar estos archivos al usuario.
Suponemos que el usuario visita la ruta original (http://localhost:3000). En ese caso, queremos conocer el home.html archivo. Del mismo modo, si el usuario visita el /contacts o /about caminos, queremos conocer el contact.html y about.html archivos, respectivamente.
Para implementar esto, vamos a landing-page.js Archivo e importación exprés de la biblioteca:
const express = require('express');
Luego crearemos la aplicación Express:
const app = express();
Luego definamos el puerto en el que se ejecutará nuestro servidor, que usaremos más adelante cuando realmente ejecutemos el servidor:
Te puede interesar:Eliminar asignación de JavaScriptconst port = 3000;
Dado que estamos enviando un solo archivo, no enviaremos enlaces a ningún archivo CSS o script dentro de esos archivos HTML a menos que estén alojados en una ubicación diferente, como CDN, por ejemplo.
Nos ocuparemos de la entrega de estos archivos juntos en la siguiente sección, hasta ahora, vamos a ceñirnos a tres archivos HTML muy simples y básicos:
baile.html:
<body>
<h1>Home</h1>
</body>
contact.html:
<body>
<h1>Contact</h1>
</body>
about.html:
<body>
<h1>About Us</h1>
</body>
Ahora, volvamos y lo nuestro landing-page.js archivo para enviar archivos que correspondan a las rutas que visita el usuario, como el home.html archivo cuando el usuario visita la ruta original.
Podemos res.sendFile() método de entrega de archivos dentro de una respuesta:
app.get("https://Pharos.sh.com/", (req, res) => {
res.sendFile('./landing-page/home.html', { root: __dirname });
});
Por motivos de seguridad, es mejor utilizar una ruta estática para res.sendFile(), como se muestra arriba. Si alguna vez toma información del usuario que afecta la ruta del archivo, tenga mucho cuidado de evitar que el usuario pueda manipular la ruta del archivo y así permitirle recuperar archivos privados.
En nuestro caso, estamos arreglando la raíz de donde proviene la ruta relativa root parámetro con el método. Tenga en cuenta que hemos pasado __dirname, una variable global Node.js en la ruta del archivo que se está ejecutando actualmente.
Podemos usar el mismo método para servir nuestros otros archivos, contact.html y about.html, además:
app.get('/about', (req, res) => {
res.sendFile('./landing-page/about.html', { root: __dirname });
});
app.get('/contact', (req, res) => {
res.sendFile('./landing-page/contact.html', { root: __dirname });
});
Ahora que nuestra aplicación está lista, iniciemos el servidor y escuchemos el puerto que configuramos anteriormente:
app.listen(port, () => console.log(`listening on port ${port}!`));
Y ejecuta nuestra aplicación ejecutando:
Te puede interesar:Construyendo una API REST con Node y Express$ node landing-page.js
Abra su navegador y visite cualquiera de las rutas asignadas y debería encontrar los archivos HTML:
Establecer un directorio público
El segundo método de servir archivos estáticos es configurar un directorio público. A diferencia de enviar un archivo a través de la respuesta HTTP, donde solo se puede entregar un archivo, todos los archivos dentro de nuestra carpeta especificada estarán disponibles para los usuarios.
Creamos otro archivo, llamado server.jsy organice la carpeta con nuestros tres documentos HTML para que sea un directorio público:
const express = require('express');
const app = express();
const port = 3000;
// Setting up the public directory
app.use(express.static('landing-page'));
app.listen(port, () => console.log(`listening on port ${port}!`));
El directorio público es tan fácil como app.use() y express.static() métodos.
Ejecutemos nuestra aplicación nuevamente y verifiquemos que funciona:
Te puede interesar:Desplegando una aplicación Node.js en un Droplet de DigitalOcean con Docker$ node server.js
Abra su navegador y visite cualquiera de las rutas asignadas y debería saludar a los archivos HTML, como la última vez. Tenga en cuenta que la ruta raíz no se asigna a la home.html archivo, pero en lugar del http://localhost:3000/home.html:
Además, puede establecer un prefijo en la ruta para acceder a su directorio público pasando el prefijo como primer parámetro:
app.use('/public', express.static('landing-page'));
Ahora los archivos se encuentran en otra ruta. Por ejemplo, home.html ahora ubicado en http://localhost:3000/public/home.html.
A diferencia del primer método que aciertas /about y about.html servicio, tenga en cuenta que debe utilizar el nombre de archivo completo para recuperar el archivo aquí – /about.html, por ejemplo.
Esto también nos permite alojar otros archivos como CSS, archivos JavaScript e imágenes.
Te puede interesar:Leer y escribir YAML en un archivo en Node.js / JavaScriptPor ejemplo, si hay una imagen de gato en su carpeta pública llamada cat.png, el servidor lo servirá http://localhost:3000/public/cat.png dependiendo de su configuración y puede llamarlo fácilmente a través de una página HTML y mostrarlo.
Si planea alojar una página de destino como esta, probablemente podría ser una combinación de los dos métodos que discutimos anteriormente. Puede utilizar la respuesta para enviar un archivo HTML y un directorio público para alojar otros activos estáticos, como archivos CSS, scripts JS e imágenes.
Conclusión
El código fuente de este proyecto está disponible en GitHub como siempre. Use esto para comparar su código si alguna vez se quedó atascado en el tutorial.
¡Feliz codificación!
.
