استقرار انگولار و دات نت کور بروی سرور

در این مقاله قراره پروژه Angular را به همراه پروژه Asp.Net Core بروی یک هاست دیپلوی کنیم

در این روش ما برای توسعه راحت تر و بهتر از ویرایشگر Vs Code برای بخش فرانت اند خود یعنی انگولار و برای بخش بک اند خود از Visual Studio استفاده می کنیم که همین مدل توسعه، کار را برای مستقر کردن پروژه خود بروی یک هاست با مشکل روبرو میکند که من با این مشکل دسته پنجه نرم کردم و با سرچ های زیاد در سایت هایی خارجی به نتیجه رسیدم.

نمیدونم آیا مطلب یا مقاله فارسی در این بابت وجود دارد یا خیر، به هر حال من کار خودمو میکنم و امیدوارم مشکل شما با این روش حل بشه.

گام اول :

خب طبیعتا ما برای تکرار نکردن آدرس سرور در انگولار، این آدرس را در فایل های پوشه environment ذخیره میکنیم که با فقط فراخوانی نام آن به آدرس سرور برای ارسال درخواست های http دست پیدا کنیم(قطعا خودتون میدونید چی میگم)، نکته ای که این بخش داره اینه که آدرس سرور در زمان توسعه و دیپلوی فرق داره و برای همین در دو فایلی که در پوشه environment قرار داره باید به شکل زیر عمل کنیم :

گام دوم :

اگر قرار به توسعه هر دو بخش بصورت همزمان با ویژال استودیو بود این بخش بصورت پیشفرض در پروژه دات نت ما وجود داشت ولی چون اینگونه نیست پس باید این گام را انجام دهیم.

اول این پکیج را از nuget نصب کنید :

Microsoft.AspNetCore.SpaServices.Extensions

بعد باید تنظیماتی در فایل Startup انجام دهیم

1- در ConfigureServices کد زیر را قرار میدهیم :

  services.AddSpaStaticFiles(configuration =>

            {

                configuration.RootPath = &quotClientApp/dist&quot

            });

به RootPath توجه داشته باشید! جلو تر لازممونه

2- در Configure هم کدهای زیر :

  app.UseStaticFiles();

            if (env.IsProduction())

            {

                app.UseSpaStaticFiles();

            }

 app.UseSpa(spa =>

            {

                spa.Options.SourcePath = &quotClientApp&quot

            });

خب این دو گام اصلی بود و دیگه نزدیک به نتیجه ایم.

هر دو پروژه را publish کنید در دو فایل جدا و هر کدام را به فایل زیپ تبدیل کنید تا بریم واسه آپلود

بعد از آپلود...

گام اول :

فایل های پروژه دات نت خود را از حالت زیپ خارج کنید.

گام دوم :

باید آدرسی که به RootPath در بالاتر داده بودیم را در روت هاست بسازیم، یعنی یک پوشه به نام ClientApp و یک پوشه به نام dist در درون آن.

گام سوم :

فایل های پروژه انگولار خود را درون پوشه dist اکسترکت کنید

گام چهارم :

فایلی با نام "web.config" در پوشه پروژه انگولار خود بسازید و کد های زیر را در آن قرار دهید :

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>

<configuration>

  <location path=&quot.&quot inheritInChildApplications=&quotfalse&quot>

  <system.webServer>

  <rewrite>

    <rules>

      <rule name=&quotAngular Routes&quot stopProcessing=&quottrue&quot>

        <match url=&quot.*&quot />

        <conditions logicalGrouping=&quotMatchAll&quot>

          <add input=&quot{REQUEST_FILENAME}&quot matchType=&quotIsFile&quot negate=&quottrue&quot />

          <add input=&quot{REQUEST_FILENAME}&quot matchType=&quotIsDirectory&quot negate=&quottrue&quot />

        </conditions>

        <action type=&quotRewrite&quot url=&quot/index.html&quot />

      </rule>

    </rules>

  </rewrite>

</system.webServer>

  </location>

</configuration>

در نهایت باید ساختار فایل های هاست ما اینگونه بشود :

خب دیگه تمومه کار!

اگرم دیتابیسی دارین یا نیاز به تنظیمات خاصی دارین که میتونید اعمال کنید، مثل یه سایت معمولی!!

این اولین مقاله من در ویرگول است و به نظر خودم که مقاله بسیار مهم و لازمیه و امیدوارم مشکلتون حل بشه، چون مال منکه حل شد و دقیقا بعداز کلی سرچ که به این نتیجه رسیدم این مقاله رو نوشتم از سر ذوق!