آیا اغلب از خود می پرسید: من یک ASP .Net Core Web Application ساخته ام، حالا چه؟ چگونه می توانم آن را با استفاده از ابزارها و پلتفرم هایی مانند GitHub، Docker، CI/CD و Microsoft Azure با برنامه خود به سطح بعدی برسانم؟
اگر پاسخ "بله" است، شما در جای درستی هستید!
معرفی
این مقاله اولین مقاله از سری است که در آن قصد داریم یک برنامه وب ساده ASP .Net Core بسازیم، آن را با Docker کانتینری کنیم و روی هاست محلی اجرا کنیم. و ما همه چیز را برای استفاده بعدی به GitHub منتقل می کنیم.
در پستهای بعدی، خط لوله Microsoft Azure DevOps Build را راهاندازی میکنیم تا فرآیند ساخت و انتقال تصویر Docker به Docker Hub را خودکار کند. در مرحله بعد، از خط لوله انتشار Azure DevOps برای استقرار برنامه خود در سرویس وب Azure Web App به عنوان یک کانتینر استفاده خواهیم کرد.
بنابراین، با من بمانید -- چیزهای زیادی برای پوشش دادن وجود دارد. بیا شروع کنیم!
سه قسمت پشت سر هم
یک مخزن GitHub راه اندازی کنید
اولین قدم این است که یک مخزن در GitHub راه اندازی کنید که در آن تمام کدهای خود را قرار دهید. این مورد ضروری است، زیرا در مرحله بعد، Azure را برای راه اندازی یک ساخت و انتشار، هر بار که یک فشار به مخزن خود انجام می دهید، راه اندازی می کنید.
بنابراین به حساب GitHub خود وارد شوید و یک مخزن ایجاد کنید.
هنگامی که یک مخزن ایجاد کردید، وقت آن است که آن را به سیستم محلی خود برسانید و شروع به هک کنید. اما قبل از انجام این کار، لطفاً مطمئن شوید که Git را روی سیستم خود نصب کرده اید، اگر نه، به صفحه دانلود Git بروید و آن را راه اندازی کنید. آسان است!
اکنون، در GitHub، مخزنی را که به تازگی ایجاد کرده اید انتخاب کنید. در سمت راست باید دکمه "Clone or download" را ببینید، روی آن کلیک کنید و URL برای کلون کردن مخزن خود دارید.
![با استفاده از Microsoft Azure، اولین برنامه وب هسته دات نت خود را به عنوان کانتینر داکر بسازید و استقرار دهید](http://pezhvak24.ir/dl/10kcor/cscd/article/build-and-deploy-an-asp-net-core-web-application-as-docker-container-using-micr/Images/Build And Deploy Your First .NET Core Web App As Docker Container Using Microsoft Azure.jpg)
یک جلسه ترمینال یا پاورشل را باز کنید، به دایرکتوری که می خواهید مخزن را کلون کنید بروید و دستور را اجرا کنید:
- $ git clone <repository-clone-url>
با این مجموعه، ما آماده شروع توسعه برنامه خود هستیم.
یک ASP .Net Core Web Application ایجاد کنید
برای ایجاد برنامه باید .Net Core (نسخه >= 2.0) را نصب کنید. به صفحه دانلود Net Core بروید و SDK سازگار با سیستم اصلی را نصب کنید.
حال، اگر در ویندوز هستید، ویژوال استودیو را باز کنید و یک ASP .Net Core Web Application Project جدید ایجاد کنید.
![با استفاده از Microsoft Azure، اولین برنامه وب هسته دات نت خود را به عنوان کانتینر داکر بسازید و استقرار دهید](http://pezhvak24.ir/dl/10kcor/cscd/article/build-and-deploy-an-asp-net-core-web-application-as-docker-container-using-micr/Images/Build And Deploy Your First .NET Core Web App As Docker Container Using Microsoft Azure1.jpg)
پروژه جدید ASP .Net Core Web Application در صفحه بعد، الگوی Web Application (Model-View-Controller) را انتخاب کنید و مطمئن شوید که علامت "Configure for HTTPS" را بردارید. فقط آن را ساده نگه دارید. روی OK کلیک کنید.
اگر از Linux یا Mac OS استفاده می کنید، یک ترمینال را باز کنید و به فهرست کلون بروید. می توانید با استفاده از دستور زیر یک برنامه وب .Net Core MVC ایجاد کنید:
- $ dotnet new mvc --name <your-project-name>
پس از اتمام، اکنون می توانید از ویرایشگر مورد علاقه خود برای ایجاد تغییرات مورد نیاز استفاده کنید.
برای یادگیری بیشتر یا حل یک مشکل، به شدت توصیه میکنم فهرست پخش ویدیوی YouTube من درباره شروع کار با Net Core در Linux یا Mac OS را بررسی کنید .
در این مرحله، به شما خواننده عزیز می سپارم که ایده ای از برنامه ساده خود داشته باشید و آن را زنده کنید. یا می توانید تا زمانی که من تغییراتی را در برنامه خود ایجاد می کنم، دنبال کنید.
من در حال ساخت یک وبلاگ ساده هستم که لیستی از آخرین مقالات را نمایش می دهد. لطفاً برای دریافت آخرین کد منبع و همه منابع استفاده شده، مخزن GitHub من را شبیه سازی کنید.
افزودن پیوند مقالات به نوار ناوبری
یک برنامه وب ASP .Net Core با یک الگوی از پیش تعریف شده ارائه می شود. برای بهروزرسانی نوار پیمایش، Views/Shared/_Layout.cshtml را باز کنید. در بخش body>nav پیوندی برای مقالات اضافه کنید:
- ...
- <nav class="navbar navbar-inverse navbar-fixed-top">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Docker WebApp</a>
- </div>
- <div class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
- <li><a asp-area="" asp-controller="Home" asp-action="Articles">Articles</a></li>
- </ul>
- </div>
- </div>
- </nav>
- ...
اکنون وقتی روی پیوند مقالات کلیک میکنیم، یک درخواست HTTP GET در کنترلکننده Home ارسال میشود که هنوز بهروزرسانی نشده است.
اضافه کردن مدل های مورد نیاز
در پوشه Models، یک فایل .cs ArticlesViewModel.cs اضافه کنید که دارای کلاس های مدل مورد نیاز است:
- using System;
- using System.Collections.Generic;
- namespace WebApp.Models
- {
- public class ArticlesViewModel
- {
- public List<Article> Articles { get; set; }
- public ArticlesViewModel()
- {
- Articles = new List<Article>();
- }
- }
- public class Article
- {
- public int Id { get; set; }
- public string Title { get; set; }
- public string Author { get; set; }
- public DateTime PublishedOn { get; set; }
- public string Content { get; set; }
- }
- }
در مرحله بعد، بیایید با استفاده از ArticleRepository.cs مقداری داده ثابت به وبلاگ خود اضافه کنیم:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using WebApp.Models;
- namespace WebApp
- {
- public class ArticleRepository
- {
- private List<Article> articles = new List<Article>
- {
- new Article
- {
- Id = 1,
- Title = "What is Lorem Ipsum?",
- Author= "Gaurav Gahlot",
- PublishedOn = new DateTime(2019, 01, 20),
- Content = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
- },
- }
- public List<Article> GetLatest()
- {
- return articles;
- }
- }
- }
به روز رسانی کنترلر خانه
کنترلکننده Home باید عملکردی داشته باشد که بتواند درخواستهایی را که برای فهرستی از آخرین مقالات ارسال میشوند، مدیریت کند. در اینجا کنترلر جدید با اکشن Articles برای درخواست های GET آمده است:
- using Microsoft.AspNetCore.Mvc;
- using System.Collections.Generic;
- using System.Net.Http;
- using WebApp.Models;
- namespace WebApp.Controllers
- {
- public class HomeController : Controller
- {
- public IActionResult Index()
- {
- return View();
- }
- public IActionResult Articles()
- {
- var model = new ArticlesViewModel();
- model.Articles = new ArticleRepository().GetLatest();
- return View(model);
- }
- }
- }
آخرین کاری که باید انجام دهیم این است که یک View اضافه کنیم که داده های ما را رندر کند. بنابراین، یک نمای مقاله در قسمت Views/Home/ با کد زیر اضافه کنید تا آخرین مقالات ارائه شود.
- @{
- ViewData["Title"] = "Articles";
- }
- <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="~/images/docker.png" alt="Docker" class="img-responsive" />
- <div class="carousel-caption" role="option">
- <p style="font-size:xx-large; color:darkslategrey">
- If you see me swim, your application is up and running in Docker.
- </p>
- </div>
- </div>
- </div>
- </div>
کد خود را به GitHub فشار دهید
پس از انجام تغییرات کد، زمان آن رسیده است که کد خود را در GitHub فشار دهید. یک ترمینال را باز کنید و به دایرکتوری پروژه بروید.
با استفاده از دستور می توانید وضعیت مخزن محلی خود را بررسی کنید
- $ git status
شما باید تمام فایل ها و دایرکتوری ها را در حال اضافه یا به روز رسانی ببینید. اکنون برای مرحله بندی تمام تغییرات در مخزن خود دستور را اجرا کنید.
- $ git add .
بیایید تغییرات را با یک پیام معنادار کوتاه انجام دهیم،
- $ git commit -m "your-commit-message"