بررسی و استفاده از فایل های استاتیک در ASP.NET Core

بررسی و استفاده از فایل های استاتیک در ASP.NET Core

در این پست از وبسایت پرووید، در رابطه با بررسی و استفاده از فایل های استاتیک در ASP.NET Core صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از سری آموزش کامل ASP.NET Core از وب سایت پرووید در رابطه با سرو کردن فایلهای Static از قبیل HTML و Java Script و CSS و یا حتی فایلهای مربوط به تصاویر بر روی HTTP Request های مختلف صحبت خوهیم کرد. این کار بدون نیاز به هر گونه پردازش سمت سروری انجام خواهد شد. بطور پیش فرض برنامه هایی که با فریم ورک ASP.NET Core ساخته می شوند قادر به سرو کردن فایلهای Static نیستند. بمنظور انجام اینکار باید یک Middleware با نام Microsoft.AspNetCore.StaticFiles را به Request Pipeline مربوط به ASP.NET Core اضافه کنیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET Core و React

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET Core و React دیدن کنید.

نصب StaticFiles Middleware

در ابتدا باید بگوئیم که در برنامه هایی که با ASP.NET Core 2.0x ساخته می شوند پکیج Microsoft.AspNetCore.StaticFiles بصورت پیش فرض در پکیج Microsoft.AspNetCore.All قرار گرفته است بنابراین نیازی نیست که آن را بصورت جداگانه نصب کنیم. اما برای نصب این Middleware در برنامه هایی که با ASP.NET Core 1.0x ساخته شده اند به راحتی می توانید با استفاده از NuGet Package Manager اقدام به نصب کردن این Middleware کنید. در رابطه با این موضوع می توانید از آموزش ویدئویی NuGet در دات نت استفاده کنید. به منظور انجام این کار بر روی پروژه راست کلیک کرده و سپس گزینۀ Manage NuGet Packages را انتخاب کنید. در پنجرۀ باز شده عبارت Microsoft.AspNetCore.StaticFiles را جستجو کرده و همانطور که در تصویر زیر نشان داده شده است آن را نصب کنید.

پس از نصب شدن پکیج Microsoft.AspNetCore.StaticFiles، جزئیات مربوط به آن بصورت خودکار در فایل Project.json قرار داده خواهد شد. این موضوع در تصویر زیر نشان داده شده است.

استفاده کردن از StaticFiles Middleware

بطور پیش فرض تمامی فایلهای Static مربوط به یک Web Application باید در Root Folder برنامه که همان wwwroot نام دارد قرار داده شود. برای درک هر چه بهتر این موضوع یک فایل ساده با نام default.html را ساخته و در درون این فولدر قرار می دهیم. مختویات این فایل در تصویر زیر نشان داده شده است.

حال برای سرو کردن فایل default.html بعنوان یک فایل Static باید StaticFiles بعنوان یک Middleware به متد Configure از کلاس Startup اضافه شود. این موضوع در کد زیر نشان داده شده است.

public class Startup
{
    public Startup()
    {
    } 
 
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseStaticFiles();

        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World");
        });
    }
}

همانطور که در قسمت بالا مشاهده می کنید. متد app.UseStaticFiles اقدام به اضافه کردن این Middleware به Request Pipeline مربوط به ASP.NET Core می کند. در واقع UseStaticFiles بعنوان یک Extension Method در درون StaticFiles Middleware قرار داده شده است و براحتی قابل پیکربندی می باشد.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

حال می توانید مرورگر خود را باز کرده و یک HTTP Request به آدرس http://localhost:/default.html ارسال کنید. این موضوع باعث می شود که فایل default.html در Response شبیه به تصویر زیر نشان داده شود.

به این طریق ما می توانیم هر فایل دیگری که در درون فولدر wwwroot قرار داده شده و یا هر زیر فولدری از آن را سرور کنیم. برای مثال فرض کنید که یک فایل test.js را شبیه به تصویر زیر در فولدر wwwroot قرار داده ایم.

حال می توانیم براحتی با ارسال یک Request به آدرس  http://localhost:/test.js این فایل را شبیه به تصویر زیر دریافت کنیم.

حال فرض کنید که قصد دارید فایلهایی را سرو کنید که بیرون از فولدر wwwroot هستند. برای مثال فرض کنید که تعدادی فایل تصویر دارید که شبیه به تصویر زیر در فولدر Images از پروژه قرار داده شده اند.

می توانید بعنوان پارامتر متد UseStaticFiles از یک Object از UseStaticFilesOptions استفاده کنید تا بتوانید عکسهایی که در فولدر Images نیز قرار داده شده اند را سرور کنید. این موضوع در کد زیر نشان داده شده است.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles(); // For the wwwroot folder

    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(
                            Path.Combine(Directory.GetCurrentDirectory(), @"Images")),
                            RequestPath = new PathString("/app-images")
    });
}

همانطور که در کد بالا مشاهده می کنید ما از FileProvider بمنظور مشخص کردن فولدر Images که حاوی فایل های Static می باشند استفاده کرده ایم. علاوه بر این RequestPath مشخص کننده ی مسیر نسبی و یا Relative Path است که به فولدر حاوی عکسها نگاشت می شود. حال اگر یک Request به آدرس http://localhost/app-images/MyImage.png ارسال شود فایل MyImage.png در Response سرو خواهد شد.

تنظیم کردن فایل پیش فرض

همانطور که در قسمت بالا مشاهده کردیم فایلهای default.html و یا test.js بر اساس Request هایی که به آنها ارسال می شد به سمت Client سرو می شدند. اما اگر بخواهیم یک فایل پیش فرض HTML بر روی Request ای که به ریشه ی اپلیکیشن ما و یا Root آن ارسال می شود سرو شود چه؟ در حال حاضر زمانیکه یک Request به آدرس http://localhost: ارسال می شود، یک متد این Request را هندل کرده و پیامی شبیه به تصویر زیر را در مرورگر نشان می دهد.

به منظور سرو کردن فایل default.html در پاسخ به Request ای که به آدرس http://localhost: ارسال می شود یکبار دیگر می توانید از یک متد دیگر با نام UseDefaultFiles() استفاده کنید. این متد باید قبل از متد UseStaticFiles قرار داده شود. مکان قرار دادن این متد نیز متد Configure از کلاس Startup می باشد این موضوع در کد زیر نشان داده شده است.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();

    app.Run(async (context) =>
    {
            await context.Response.WriteAsync("Hello World");
    });
}

متد UsedDefaultFiles به منظور پیکر بندی DefaultFiles بعنوان یک Middleware مورد استفاده قرار می گیرد. شاید جالب باشد بدانید که DefaultFiles بخشی از StaticFiles بعنوان یک Middleware بزرگتر می باشد. این متد باعث می شود که یک فایل HTML به نام default.html و یا default.htm و یا index.html و index.htm در پاسخ به Request هایی که به آدرس http://localhost: ارسال می شوند سرور بشود. در مثال بالا زمانیکه یک Request به آدرس http://localhost: ارسال می شود فایل default.html شبیه به تصویر زیر برای Client ارسال می شود.

نکته ی بسیار مهم دیگر ترتیب استفاده کردن از Middleware ها می باشد. دقت کنید که app.UseDefaultFiles باید قبل از app.UseStaticFiles به Request Pipeline اضافه بشود.

بررسی FileServer

یک Middleware دیگر با نام FileServer می تواند عملیات انجام شده توسط Middleware های UseDefaultFiles و UseStaticFiles را ترکیب کند. به عبارت دیگر بجای استفاده کردن از هر دوی این Middleware ها، می توانید به راحتی از UseFileServer در متد Configure استفاده کنید. این موضوع در کد زیر نشان داده شده است.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseFileServer();

    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World");
    });
}

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک ASP.NET Core استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل توسعه وب اپلیکیشن با ASP.NET Core مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت