Visual Studio kullanarak Web Dağıtımı ASP.NET: Kod Güncelleştirmesi Dağıtma

tarafından Tom Dykstra

Başlangıç Projelerini İndir

Bu öğretici serisi, Visual Studio 2012 veya Visual Studio 2010 kullanarak bir ASP.NET web uygulamasını Azure App Service Web Apps veya üçüncü taraf barındırma sağlayıcısına dağıtmayı (yayımlamayı) gösterir. Seri hakkında bilgi için serideki ilk öğreticiye bakın.

Genel Bakış

İlk dağıtımdan sonra, web sitenizin bakımını ve geliştirme çalışmalarınız devam eder ve çok geçmeden bir güncelleştirme dağıtmak istersiniz. Bu öğretici, uygulama kodunuz için bir güncelleştirme dağıtma işleminde size yol gösterir. Bu öğreticide uyguladığınız ve dağıttığınız güncelleştirme bir veritabanı değişikliği içermez; Bir sonraki öğreticide veritabanı değişikliği dağıtmanın farklı yanlarını göreceksiniz.

Anımsatıcı: Öğreticide ilerlerken bir hata iletisi alırsanız veya bir şey çalışmıyorsa sorun giderme sayfasını kontrol edin.

Kod değişikliği yapma

Uygulamanıza yönelik basit bir güncelleştirme örneği olarak, Eğitmenler sayfasına seçili eğitmen tarafından öğretilen derslerin listesini ekleyeceksiniz.

Eğitmenler sayfasını çalıştırırsanız kılavuzda Seç bağlantıları olduğunu fark edersiniz, ancak satır arka planının griye dönmesi dışında bir işlem yapmazlar.

Seçilen eğitmenler sayfası

Şimdi Seç bağlantısına tıklandığında çalıştırılan ve seçilen eğitmen tarafından öğretilen derslerin listesini görüntüleyen kod ekleyeceksiniz.

  1. Instructors.aspx dosyasındaErrorMessageLabelLabel denetiminin hemen arkasına aşağıdaki işaretlemeyi ekleyin:

    <h3>Courses Taught</h3>
    <asp:ObjectDataSource ID="CoursesObjectDataSource" runat="server" TypeName="ContosoUniversity.BLL.SchoolBL"
        DataObjectTypeName="ContosoUniversity.DAL.Course" SelectMethod="GetCoursesByInstructor">
        <SelectParameters>
            <asp:ControlParameter ControlID="InstructorsGridView" Name="PersonID" PropertyName="SelectedDataKey.Value"
                Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <asp:GridView ID="CoursesGridView" runat="server" DataSourceID="CoursesObjectDataSource"
        AllowSorting="True" AutoGenerateColumns="False" SelectedRowStyle-BackColor="LightGray"
        DataKeyNames="CourseID">
        <EmptyDataTemplate>
            <p>No courses found.</p>
        </EmptyDataTemplate>
        <Columns>
            <asp:BoundField DataField="CourseID" HeaderText="ID" ReadOnly="True" SortExpression="CourseID" />
            <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
            <asp:TemplateField HeaderText="Department" SortExpression="DepartmentID">
                <ItemTemplate>
                    <asp:Label ID="GridViewDepartmentLabel" runat="server" Text='<%# Eval("Department.Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    
  2. Sayfayı çalıştırın ve bir eğitmen seçin. Bu eğitmen tarafından öğretilen derslerin listesini görürsünüz.

    Tek bir Eğitmenin vurgulandığı Eğitmenler sayfasını gösteren ve öğrettikleri dersleri gösteren ekran görüntüsü.

  3. Tarayıcıyı kapatın.

Kod güncelleştirmesini test ortamına dağıtma

Yayımlama profillerinizi kullanarak test, hazırlama ve üretime dağıtmadan önce veritabanı yayımlama seçeneklerini değiştirmeniz gerekir. Artık üyelik veritabanı için verme ve veri dağıtım betiklerini çalıştırmanız gerekmez.

  1. ContosoUniversity projesine sağ tıklayıp Yayımla'ya tıklayarak Web'i Yayımla sihirbazını açın.
  2. Profil açılan listesinde Test profiline tıklayın.
  3. Ayarlar sekmesine tıklayın.
  4. Veritabanları bölümündeki DefaultConnection altında Veritabanını güncelleştir onay kutusunu temizleyin.
  5. Profil sekmesine tıklayın ve ardından Profil açılan listesinde Hazırlama profiline tıklayın.
  6. Test profilinde yapılan değişiklikleri kaydetmek isteyip istemediğiniz sorulduğunda Evet'e tıklayın.
  7. Hazırlama profilinde de aynı değişikliği yapın.
  8. Aynı değişikliği Üretim profilinde yapmak için işlemi yineleyin.
  9. Web'i Yayımla sihirbazını kapatın.

Test ortamına dağıtım yapmak artık tek tıklamayla yayımlamayı yeniden çalıştırmak için basit bir işlemdir. Bu işlemi daha hızlı hale getirmek için Web Tek Tıklamayla Yayımla araç çubuğunu kullanabilirsiniz.

  1. Görünüm menüsünde Araç Çubukları'nı ve ardından Web One Tıklama Yayımla'yı seçin.

    Selecting_One_Click_Publish_toolbar

  2. Çözüm Gezgini'da ContosoUniversity projesini seçin.

  3. Web One Click Publish araç çubuğu, Test yayımlama profilini seçin ve ardından Web'i Yayımla'ya tıklayın (okların sola ve sağa işaret eden simgesi).

    Web_One_Click_Publish_toolbar

  4. Visual Studio güncelleştirilmiş uygulamayı dağıtır ve tarayıcı otomatik olarak giriş sayfasına açılır.

  5. Eğitmenler sayfasını çalıştırın ve güncelleştirmenin başarıyla dağıtıldığını doğrulamak için bir eğitmen seçin.

Normalde regresyon testi de yaparsınız (yani, yeni değişikliğin mevcut işlevleri bozmadığından emin olmak için sitenin geri kalanını test edin). Ancak bu öğretici için bu adımı atlayıp güncelleştirmeyi hazırlama ve üretime dağıtmaya devam edersiniz.

Yeniden dağıttığınızda, Web Dağıtımı hangi dosyaların değiştiğini otomatik olarak belirler ve yalnızca değiştirilen dosyaları sunucuya kopyalar. Varsayılan olarak, Web Dağıtımı hangilerinin değiştiğini belirlemek için dosyalarda son değiştirilen tarihleri kullanır. Bazı kaynak denetim sistemleri, siz dosya içeriğini değiştirmeseniz bile dosya tarihlerini değiştirir. Bu durumda, hangi dosyaların değiştiğini belirlemek için Dosya sağlama toplamlarını kullanmak üzere Web Dağıtımı'nın yapılandırılmasını isteyebilirsiniz. Daha fazla bilgi için ASP.NET Dağıtım SSS bölümünde dosyalarımın tümü neden değiştirmediğim halde yeniden dağıtılsın? bölümüne bakın.

Dağıtım sırasında uygulamayı çevrimdışına alma

Şimdi dağıttığınız değişiklik, tek bir sayfada yapılan basit bir değişikliktir. Ancak bazen daha büyük değişiklikler dağıtırsınız veya hem kod hem de veritabanı değişikliklerini dağıtırsınız ve kullanıcı dağıtım tamamlanmadan önce bir sayfa isterse site yanlış davranabilir. Dağıtım devam ederken kullanıcıların siteye erişmesini önlemek için birapp_offline.htm dosyası kullanabilirsiniz. uygulamanızın kök klasörüneapp_offline.htmadlı bir dosya yerleştirdiğinizde IIS, uygulamanızı çalıştırmak yerine otomatik olarak bu dosyayı görüntüler. Bu nedenle dağıtım sırasında erişimi önlemek için app_offline.htm kök klasöre yerleştirir, dağıtım işlemini çalıştırır ve başarılı dağıtımdan sonra app_offline.htm kaldırırsınız.

Web Dağıtımı'nı, dağıtmaya başladığında sunucuya otomatik olarak varsayılan birapp_offline.htm dosyası koyacak ve tamamlandığında kaldıracak şekilde yapılandırabilirsiniz. Bunu yapmak için tek yapmanız gereken yayımlama profili (.pubxml) dosyanıza aşağıdaki XML öğesini eklemektir:

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Bu öğreticide özel bir app_offline.htm dosyası oluşturma ve kullanma hakkında bilgi edineceksiniz.

Hazırlama sitesine erişen kullanıcılarınız olmadığından, hazırlama sitesinde app_offline.htm kullanılması gerekmez. Ancak hazırlamayı kullanarak her şeyi üretimde dağıtmayı planladığınız şekilde test etmek iyi bir uygulamadır.

app_offline.htm oluşturma

  1. Çözüm Gezgini'da çözüme sağ tıklayın, Ekle'ye ve ardından Yeni Öğe'ye tıklayın.

  2. app_offline.htm adlı bir HTML Sayfası oluşturun (Visual Studio'un varsayılan olarak oluşturduğu .html uzantısındaki son "l" öğesini silin).

  3. Şablon işaretlemesini aşağıdaki işaretlemeyle değiştirin:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Contoso University - Under Construction</title>
    </head>
    <body>
      <h1>Contoso University</h1>
      <h2>Under Construction</h2>
      <p>The Contoso University site is temporarily unavailable while we upgrade it. Please try again later.</p>
    </body>
    </html>
    
  4. Dosyayı kaydedin ve kapatın.

app_offline.htm web sitesinin kök klasörüne kopyalama

Dosyaları web sitesine kopyalamak için herhangi bir FTP aracını kullanabilirsiniz. FileZilla popüler bir FTP aracıdır ve ekran görüntülerinde gösterilir.

FTP aracı kullanmak için üç şeye ihtiyacınız vardır: FTP URL'si, kullanıcı adı ve parola.

URL, Web sitesinin Azure Yönetim Portalı'ndaki pano sayfasında gösterilir ve FTP kullanıcı adı ve parolası daha önce indirdiğiniz .publishsettings dosyasında bulunabilir. Aşağıdaki adımlarda bu değerleri nasıl edineceğiniz gösterilir.

  1. Azure Yönetim Portalı'nda Web Siteleri sekmesine ve ardından hazırlama web sitesine tıklayın.

  2. Pano sayfasında, Hızlı Bakış bölümünde FTP ana bilgisayar adını bulmak için aşağı kaydırın.

    FTP ana bilgisayar adı

  3. Hazırlama .publishsettings dosyasını Not Defteri'nde veya başka bir metin düzenleyicisinde açın.

  4. publishProfile FTP profili için öğesini bulun.

  5. userName ve userPWD değerlerini kopyalayın.

    FTP kimlik bilgileri

  6. FTP aracınızı açın ve FTP URL'sinde oturum açın.

  7. app_offline.htm çözüm klasöründen hazırlama sitesindeki /site/wwwroot klasörüne kopyalayın.

    app_offline Kopyala

  8. Hazırlama sitenizin URL'sine göz atın. Artık giriş sayfanız yerineapp_offline.htmsayfasının görüntülendiğini görürsünüz.

     Tarayıcı penceresindeapp_offline.htm

Artık hazırlamaya dağıtmaya hazırsınız.

Kod güncelleştirmesini hazırlama ve üretime dağıtma

  1. Web Tek Tıkla Yayımla araç çubuğunda Hazırlama yayımlama profilini seçin ve Web'i Yayımla'ya tıklayın.

    Visual Studio güncelleştirilmiş uygulamayı dağıtır ve tarayıcıyı sitenin giriş sayfasına açar. app_offline.htm dosyası görüntülenir. Dağıtımın başarılı olup olmadığını test etmeden önce app_offline.htm dosyasını kaldırmanız gerekir.

  2. FTP aracınıza dönün ve hazırlama sitesinden app_offline.htm silin.

  3. Tarayıcıda hazırlama sitesindeki Eğitmenler sayfasını açın ve güncelleştirmenin başarıyla dağıtıldığını doğrulamak için bir eğitmen seçin.

  4. Üretim için hazırlama işlemiyle aynı yordamı izleyin.

Değişiklikleri Gözden Geçirme ve Belirli Dosyaları Dağıtma

Visual Studio 2012 ayrıca tek tek dosyaları dağıtmanızı sağlar. Seçili bir dosya için yerel sürümle dağıtılan sürüm arasındaki farkları görüntüleyebilir, dosyayı hedef ortama dağıtabilir veya dosyayı hedef ortamdan yerel projeye kopyalayabilirsiniz. Öğreticinin bu bölümünde bu özelliklerin nasıl kullanılacağını göreceksiniz.

Dağıtmak için değişiklik yapma

  1. Content/Site.css dosyasını açın ve etiketin bloğunu body bulun.

  2. için background-color değerini olarak #fffdarkbluedeğiştirin.

    body {
        background-color: darkblue;
        border-top: solid 10px #000;
        color: #333;
        font-size: .85em;
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        margin: 0;
        padding: 0;
    }
    

Önizlemeyi Yayımla penceresinde değişikliği görüntüleme

Projeyi yayımlamak için Web'i Yayımla sihirbazını kullandığınızda, Önizleme penceresinde dosyaya çift tıklayarak hangi değişikliklerin yayımlandığını görebilirsiniz.

  1. ContosoUniversity projesine sağ tıklayın ve Yayımla'ya tıklayın.

  2. Profil açılan listesinden Yayımlama profilini test et'i seçin.

  3. Önizleme'ye ve ardından Önizlemeyi Başlat'a tıklayın.

  4. Önizleme bölmesinde Site.css dosyasına çift tıklayın.

    Site.css dosyasına çift tıklayın

    Değişiklikleri önizle iletişim kutusunda dağıtılacak değişikliklerin önizlemesi gösterilir.

    Site.css'de yapılan değişiklikleri önizleme

    Web.config dosyasına çift tıklarsanız, Değişiklikleri önizleme iletişim kutusu derleme yapılandırma dönüşümlerinizin ve yayımlama profili dönüşümlerinizin etkisini gösterir. Bu noktada, sunucudaki Web.config dosyasının değişmesine neden olacak bir şey yapmadınız, bu nedenle hiçbir değişiklik görmeyi beklemeniz gerekir. Ancak, Değişiklikleri önizle penceresi yanlış iki değişiklik gösteriyor. İki XML öğesi kaldırılacak gibi görünüyor. Bu öğeler, Code First bağlam sınıfı için uygulama başlangıcında Code First Migrations yürüt'i seçtiğinizde yayımlama işlemi tarafından eklenir. Karşılaştırma, yayımlama işlemi bu öğeleri eklemeden önce yapılır, bu nedenle kaldırılmasalar da kaldırılıyor gibi görünürler. Bu hata gelecek bir sürümde düzeltilecektir.

  5. Kapat’a tıklayın.

  6. Yayımla’ya tıklayın.

  7. Tarayıcı Test sitesinin giriş sayfasında açıldığında, CSS değişikliğinin etkisini görmek için CTRL+F5 tuşlarına basarak sıkı bir yenilemeye neden olur.

    CSS değişikliğinin etkisi

  8. Tarayıcıyı kapatın.

Çözüm Gezgini belirli dosyaları yayımlama

Mavi arka planı sevmediğinizi ve özgün renge geri dönmek istediğinizi varsayalım. Bu bölümde, doğrudan Çözüm Gezgini belirli bir dosyayı yayımlayarak özgün ayarları geri yükleyeceksiniz.

  1. Content/Site.css dosyasını açın ve ayarını olarak #fffgeri yükleyinbackground-color.

  2. Çözüm Gezgini'daContent/Site.css dosyasına sağ tıklayın.

    Bağlam menüsünde üç yayımlama seçeneği gösterilir.

    Çözüm Gezgini yayımlama seçenekleri

  3. Değişiklikleri Site.css'de önizle'ye tıklayın.

    Hedef ortamda yerel dosya ile sürümü arasındaki farkları gösteren bir pencere açılır.

    Diff-Content/Site.css

  4. Çözüm Gezgini yeniden Site.css'ye sağ tıklayın ve Site.css'yi Yayımla'ya tıklayın.

    Web Yayımlama Etkinliği penceresinde dosyanın yayımlandığı gösterilir.

    Web Yayımlama Etkinliği penceresi

  5. URL'nin tarayıcısını açın ve CSS değişikliğinin http://localhost/contosouniversity etkisini görmek için CTRL+F5 tuşlarına basarak sıkı bir yenilemeye neden olun.

    Normal CSS içeren giriş sayfası

  6. Tarayıcıyı kapatın.

Özet

Artık veritabanı değişikliği içermeyen bir uygulama güncelleştirmesini dağıtmanın çeşitli yollarını gördünüz ve güncelleştirilecek değişikliklerin beklediğiniz gibi olduğunu doğrulamak için değişikliklerin önizlemesini nasıl görüntüleyebileceğinizi gördünüz. Eğitmenler sayfasında artık Bir Öğretilen Kurslar bölümü vardır.

Eğitmenler sayfasını ve belirli bir Eğitmen tarafından öğretilen kursları gösteren ekran görüntüsü.

Sonraki öğreticide veritabanı değişikliğinin nasıl dağıtılacağı gösterilmektedir: Veritabanına ve Eğitmenler sayfasına bir doğum tarihi alanı ekleyeceksiniz.