از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرویس فایل‌های استاتیک با Node و Express.jsدر این مقاله، ما قصد داریم یک اپلیکیشن ساده برای ارائه فایل‌های استاتیک مانند فایل‌های HTML، فایل‌های CSS و تصاویر با استفاده از Node.js و Express بسازیم. پیکربندی پروژه و نصب Express برای شروع، بیایید با اجرای دستور init در یک پروژه Node.js جدید ایجاد کنیم.
سرفصلهای مطلب
معرفی
در این مقاله قصد داریم یک اپلیکیشن ساده بسازیم تا فایل‌های استاتیک مانند فایل‌های HTML، فایل‌های CSS و تصاویر را با استفاده از آن ارائه کنیم. Node.js و بیان.
پیکربندی پروژه و نصب Express
برای شروع، اجازه دهید یک پروژه Node.js جدید با اجرای آن ایجاد کنیم init دستور در یک پوشه جدید:
$ npm init
اطلاعات درخواستی را مطابق با نیاز خود پر کنید یا فقط با خالی گذاشتن هر خط مقادیر پیش فرض را تنظیم کنید.
اکنون می توانیم فریم ورک Express را با اجرای زیر نصب کنیم:
$ npm install --save express
ما آماده ایم، بیایید شروع به کدنویسی کنیم!
ارائه فایل ها با Express
دو راه برای ارائه فایل های استاتیک با استفاده از Express وجود دارد:
- ارائه یک فایل واحد با پیکربندی مسیری به منبع
- تنظیم دایرکتوری عمومی که در آن همه فایل ها در دسترس هستند
در دو بخش بعدی به بررسی هر یک از این روش ها خواهیم پرداخت.
ارائه یک فایل واحد
زمانی که می خواهیم یک فرود ساده ایجاد کنیم، سناریویی را در نظر بگیرید page که از 3 سند HTML تشکیل شده است (home.html، contact.html، و about.html) و ما می خواهیم این فایل ها را به کاربر ارائه دهیم.
بیایید فرض کنیم که کاربر از root مسیر (http://localhost:3000). در آن صورت، ما می خواهیم به آن خدمت کنیم home.html فایل. به طور مشابه، اگر کاربر از /contacts یا /about مسیرها، ما می خواهیم به آنها خدمت کنیم contact.html و about.html فایل ها به ترتیب
برای پیاده سازی این، اجازه دهید یک را ایجاد کنیم landing-page.js فایل و import کتابخانه اکسپرس:
const express = require('express');
سپس، ما برنامه Express را ایجاد می کنیم:
const app = express();
سپس پورت را تعریف می کنیم روی سرور ما در حال اجرا خواهد بود، که بعداً وقتی سرور را اجرا می کنیم از آن استفاده خواهیم کرد:
const port = 3000;
از آنجایی که ما در حال ارسال یک فایل هستیم، پیوندی به هیچ فایل CSS یا اسکریپتی در آن فایل‌های HTML اضافه نمی‌کنیم، مگر اینکه در مکان دیگری میزبانی شوند، مانند CDN، مثلا.
ما در بخش بعدی به ارائه این فایل‌ها با هم خواهیم پرداخت، بنابراین فعلاً، اجازه دهید به سه فایل HTML بسیار ساده و بدون ساختار بپردازیم:
home.html:
<body>
<h1>Home</h1>
</body>
contact.html:
<body>
<h1>Contact</h1>
</body>
about.html:
<body>
<h1>About Us</h1>
</body>
حالا بیایید به عقب برگردیم و خود را ویرایش کنیم landing-page.js فایل برای ارسال فایل های مربوط به مسیرهایی که کاربر بازدید می کند، مانند ارسال home.html فایل زمانی که کاربر از root مسیر.
ما می توانیم استفاده کنیم res.sendFile() روش برای ارائه یک فایل در یک پاسخ:
app.get('/', (req, res) => {
res.sendFile('./landing-page/home.html', { root: __dirname });
});
به دلایل امنیتی، بهتر است از یک مسیر ثابت استفاده کنید res.sendFile()، همانطور که در بالا نشان داده شده. اگر تا به حال از ورودی های کاربر استفاده می کنید که بر مسیر فایل تأثیر می گذارد، بسیار مراقب باشید تا کاربر نتواند مسیر فایل را دستکاری کند و در نتیجه به آنها اجازه بازیابی فایل های خصوصی را بدهید.
در مورد ما، ما در حال تنظیم root برای اینکه مسیر نسبی با عبور از کجاست root پارامتر به روش توجه داشته باشید که ما گذشتیم __dirname، که یک متغیر جهانی Node.js در مسیر فایل در حال اجرا است.
ما می توانیم از همین روش برای سرویس دادن به فایل های دیگر خود استفاده کنیم، contact.html و about.html، همچنین:
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 });
});
اکنون که برنامه ما آماده کار است، بیایید سرور را راه اندازی کنیم و به پورتی که قبلا تنظیم کرده بودیم گوش دهیم:
app.listen(port, () => console.log(`listening روی port ${port}!`));
و برنامه ما را با اجرای:
$ node landing-page.js
مرورگر خود را باز کنید و از هر یک از مسیرهای نگاشت شده بازدید کنید و باید با فایل(های) HTML استقبال کنید:
راه اندازی دایرکتوری عمومی
روش دوم ارائه فایل‌های استاتیک، راه‌اندازی یک فهرست عمومی است. بر خلاف ارسال یک فایل از طریق پاسخ HTTP، که در آن فقط یک فایل می تواند ارائه شود، تمام فایل های داخل پوشه مشخص شده ما برای کاربران در دسترس خواهد بود.
بیایید یک فایل دیگر به نام ایجاد کنیم server.jsو پوشه با سه سند HTML ما را به عنوان یک فهرست عمومی تنظیم کنید:
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 روی port ${port}!`));
عمومی کردن یک دایرکتوری به آسانی استفاده از آن است app.use() و express.static() مواد و روش ها.
بیایید دوباره برنامه خود را اجرا کنیم و بررسی کنیم که کار می کند:
$ node server.js
مرورگر خود را باز کنید و از هر یک از مسیرهای نقشه برداری شده بازدید کنید و مانند دفعه قبل باید با فایل های HTML مورد استقبال قرار بگیرید. به خاطر داشته باشید که این بار، root مسیر به نگاشت نشده است home.html فایل، بلکه http://localhost:3000/home.html:
همچنین، می توانید با وارد کردن پیشوند به عنوان اولین پارامتر، یک پیشوند برای مسیر دسترسی به فهرست عمومی خود تنظیم کنید:
app.use('/public', express.static('landing-page'));
در حال حاضر، فایل ها قرار دارند روی مسیر دیگری برای مثال، home.html اکنون در http://localhost:3000/public/home.html.
بر خلاف روش اول که در آن ضربه می زدید /about و about.html ارائه می شود، توجه داشته باشید که برای بازیابی فایل در اینجا باید از نام کامل فایل استفاده کنید – /about.htmlبه عنوان مثال
این به ما اجازه می دهد host فایل های دیگر مانند CSS، فایل های جاوا اسکریپت و تصاویر نیز.
به عنوان مثال، اگر تصویر گربه وجود دارد روی پوشه عمومی شما تماس گرفت cat.png، سرور به آن سرویس می دهد روی http://localhost:3000/public/cat.png بسته به روی پیکربندی شما و شما به راحتی می توانید آن را از طریق یک HTML فراخوانی کنید page و آن را نمایش دهید.
اگر قصد دارید host یک فرود page مانند این، به احتمال زیاد می تواند ترکیبی از هر دو روشی باشد که در بالا مورد بحث قرار گرفتیم. می توانید از یک پاسخ برای ارسال یک فایل HTML و یک فهرست عمومی به آن استفاده کنید host سایر دارایی های ثابت مانند فایل های CSS، اسکریپت های JS و تصاویر.
نتیجه
کد منبع این پروژه موجود است روی GitHub مثل همیشه. اگر در طول آموزش گیر کردید از این برای مقایسه کد خود استفاده کنید.
کد نویسی مبارک!
منتشر شده در 1403-01-24 12:51:02
