Bagikan melalui

ASP.NET Penyebaran Web menggunakan Visual Studio: Menyebarkan Pembaruan Kode

  • Artikel

oleh Tom Dykstra

Unduh Proyek Starter

Seri tutorial ini menunjukkan kepada Anda cara menyebarkan (menerbitkan) aplikasi web ASP.NET ke Azure App Service Web Apps atau ke penyedia hosting pihak ketiga, dengan menggunakan Visual Studio 2012 atau Visual Studio 2010. Untuk informasi tentang seri ini, lihat tutorial pertama dalam seri ini.

Gambaran Umum

Setelah penyebaran awal, pekerjaan Anda memelihara dan mengembangkan situs web Anda berlanjut, dan sebelum waktu yang lama Anda ingin menyebarkan pembaruan. Tutorial ini membawa Anda melalui proses penyebaran pembaruan ke kode aplikasi Anda. Pembaruan yang Anda terapkan dan sebarkan dalam tutorial ini tidak melibatkan perubahan database; Anda akan melihat apa yang berbeda tentang menyebarkan perubahan database di tutorial berikutnya.

Pengingat: Jika Anda mendapatkan pesan kesalahan atau sesuatu tidak berfungsi saat Anda melalui tutorial, pastikan untuk memeriksa halaman pemecahan masalah.

Membuat perubahan kode

Sebagai contoh sederhana dari pembaruan untuk aplikasi Anda, Anda akan menambahkan ke halaman Instruktur daftar kursus yang diajarkan oleh instruktur yang dipilih.

Jika Anda menjalankan halaman Instruktur , Anda akan melihat bahwa ada Pilih tautan di kisi, tetapi mereka tidak melakukan apa pun selain membuat latar belakang baris menjadi abu-abu.

Halaman instruktur dengan pilihan

Sekarang Anda akan menambahkan kode yang berjalan saat tautan Pilih diklik dan menampilkan daftar kursus yang diajarkan oleh instruktur yang dipilih.

  1. Di Instruktur.aspx, tambahkan markup berikut segera setelah kontrol ErrorMessageLabelLabel :

    <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. Jalankan halaman dan pilih instruktur. Anda melihat daftar kursus yang diajarkan oleh instruktur itu.

    Cuplikan layar memperlihatkan halaman Instruktur dengan satu Instruktur disorot dan menampilkan kursus yang mereka ajarkan.

  3. Tutup browser.

Menyebarkan pembaruan kode ke lingkungan pengujian

Sebelum Anda bisa menggunakan profil penerbitan untuk disebarkan untuk menguji, penahapan, dan produksi, Anda perlu mengubah opsi penerbitan database. Anda tidak perlu lagi menjalankan skrip hibah dan penyebaran data untuk database keanggotaan.

  1. Buka wizard Terbitkan Web dengan mengklik kanan proyek ContosoUniversity dan mengklik Terbitkan.
  2. Klik profil Uji di daftar drop-down Profil .
  3. Klik tab Pengaturan.
  4. Di bawah DefaultConnection di bagian Database , kosongkan kotak centang Perbarui database .
  5. Klik tab Profil , lalu klik profil Penahapan di daftar drop-down Profil .
  6. Saat Anda ditanya apakah Anda ingin menyimpan perubahan yang dibuat ke profil Uji , klik Ya.
  7. Buat perubahan yang sama di profil Penahapan.
  8. Ulangi proses untuk membuat perubahan yang sama di profil Produksi.
  9. Tutup wizard Terbitkan Web .

Menyebarkan ke lingkungan pengujian sekarang menjadi masalah sederhana dalam menjalankan publikasi sekali klik lagi. Untuk mempercepat proses ini, Anda bisa menggunakan bilah alat Terbitkan Web One Click .

  1. Di menu Tampilan , pilih Toolbar lalu pilih Terbitkan Web One Klik.

    Selecting_One_Click_Publish_toolbar

  2. Di Penjelajah Solusi, pilih proyek ContosoUniversity.

  3. toolbar Terbitkan Klik Web One , pilih uji profil penerbitan lalu klik Terbitkan Web (ikon dengan panah menunjuk ke kiri dan kanan).

    Web_One_Click_Publish_toolbar

  4. Visual Studio menyebarkan aplikasi yang diperbarui, dan browser secara otomatis terbuka ke halaman beranda.

  5. Jalankan halaman Instruktur dan pilih instruktur untuk memverifikasi bahwa pembaruan berhasil disebarkan.

Anda biasanya juga akan melakukan pengujian regresi (yaitu, menguji situs lainnya untuk memastikan bahwa perubahan baru tidak merusak fungsionalitas yang ada). Tetapi untuk tutorial ini Anda akan melewati langkah itu dan melanjutkan untuk menyebarkan pembaruan ke penahapan dan produksi.

Ketika Anda menyebarkan ulang, Web Deploy secara otomatis menentukan file mana yang telah berubah dan hanya menyalin file yang diubah ke server. Secara default, Web Deploy menggunakan tanggal terakhir diubah pada file untuk menentukan mana yang telah berubah. Beberapa sistem kontrol sumber mengubah tanggal file bahkan ketika Anda tidak mengubah konten file. Dalam hal ini, Anda mungkin ingin mengonfigurasi Web Deploy untuk menggunakan checksum file untuk menentukan file mana yang telah berubah. Untuk informasi selengkapnya, lihat Mengapa semua file saya disebarkan ulang meskipun saya tidak mengubahnya? di FAQ Penyebaran ASP.NET.

Membuat aplikasi offline selama penyebaran

Perubahan yang Anda sebarkan sekarang adalah perubahan sederhana pada satu halaman. Tetapi terkadang Anda menyebarkan perubahan yang lebih besar, atau Anda menyebarkan perubahan kode dan database, dan situs mungkin bertingkah salah jika pengguna meminta halaman sebelum penyebaran selesai. Untuk mencegah pengguna mengakses situs saat penyebaran sedang berlangsung, Anda dapat menggunakan file app_offline.htm . Saat Anda meletakkan file bernama app_offline.htm di folder akar aplikasi Anda, IIS secara otomatis menampilkan file tersebut alih-alih menjalankan aplikasi Anda. Jadi untuk mencegah akses selama penyebaran, Anda menempatkan app_offline.htm di folder akar, menjalankan proses penyebaran, lalu menghapus app_offline.htm setelah penyebaran berhasil.

Anda dapat mengonfigurasi Web Deploy untuk secara otomatis menempatkan file app_offline.htm default di server saat mulai menyebarkan dan menghapusnya setelah selesai. Untuk melakukan itu semua yang harus Anda lakukan adalah menambahkan elemen XML berikut ke file profil penerbitan (.pubxml):

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Untuk tutorial ini, Anda akan melihat cara membuat dan menggunakan file app_offline.htm kustom.

Menggunakan app_offline.htm di situs penahapan tidak diperlukan, karena Anda tidak memiliki pengguna yang mengakses situs penahapan. Tetapi ini adalah praktik yang baik untuk menggunakan penahapan untuk menguji semua cara Yang Anda rencanakan untuk disebarkan dalam produksi.

Membuat app_offline.htm

  1. Di Penjelajah Solusi, klik kanan solusi dan klik Tambahkan, lalu klik Item Baru.

  2. Buat Halaman HTML bernama app_offline.htm (hapus "l" akhir di ekstensi .html yang dibuat Visual Studio secara default).

  3. Ganti markup templat dengan markup berikut:

    <!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. Simpan dan tutup file.

Salin app_offline.htm ke folder akar situs web

Anda dapat menggunakan alat FTP apa pun untuk menyalin file ke situs web. FileZilla adalah alat FTP populer dan ditampilkan dalam cuplikan layar.

Untuk menggunakan alat FTP, Anda memerlukan tiga hal: URL FTP, nama pengguna, dan kata sandi.

URL ditampilkan di halaman dasbor situs web di Portal Manajemen Azure, dan nama pengguna dan kata sandi untuk FTP dapat ditemukan di file .publishsettings yang Anda unduh sebelumnya. Langkah-langkah berikut menunjukkan cara mendapatkan nilai-nilai ini.

  1. Di Portal Manajemen Azure, klik tab Situs Web lalu klik situs web penahapan.

  2. Pada halaman Dasbor , gulir ke bawah untuk menemukan nama host FTP di bagian Sekilas .

    Nama host FTP

  3. Buka file .publishsettings penahapan di Notepad atau editor teks lainnya.

  4. publishProfile Temukan elemen untuk profil FTP.

  5. Salin nilai userName dan userPWD .

    Kredensial FTP

  6. Buka alat FTP Anda dan masuk ke URL FTP.

  7. Salin app_offline.htm dari folder solusi ke folder /site/wwwroot di situs penahapan.

    Salin app_offline

  8. Telusuri URL situs penahapan Anda. Anda melihat bahwa halaman app_offline.htm sekarang ditampilkan alih-alih halaman beranda Anda.

    app_offline.htm di jendela browser

Anda sekarang siap untuk menyebarkan ke penahapan.

Menyebarkan pembaruan kode ke penahapan dan produksi

  1. Di toolbar Terbitkan Klik Web One , pilih profil penerbitan Penahapan lalu klik Terbitkan Web.

    Visual Studio menyebarkan aplikasi yang diperbarui dan membuka browser ke halaman beranda situs. File app_offline.htm ditampilkan. Sebelum dapat menguji untuk memverifikasi keberhasilan penyebaran, Anda harus menghapus file app_offline.htm .

  2. Kembali ke alat FTP Anda, dan hapus app_offline.htm dari situs penahapan.

  3. Di browser, buka halaman Instruktur di situs penahapan, dan pilih instruktur untuk memverifikasi bahwa pembaruan berhasil disebarkan.

  4. Ikuti prosedur yang sama untuk produksi seperti yang Anda lakukan untuk penahapan.

Meninjau Perubahan dan Menyebarkan File Tertentu

Visual Studio 2012 juga memberi Anda kemampuan untuk menyebarkan file individual. Untuk file yang dipilih, Anda dapat melihat perbedaan antara versi lokal dan versi yang disebarkan, menyebarkan file ke lingkungan tujuan, atau menyalin file dari lingkungan tujuan ke proyek lokal. Di bagian tutorial ini Anda akan melihat cara menggunakan fitur-fitur ini.

Membuat perubahan untuk disebarkan

  1. Buka Content/Site.css, dan temukan blok untuk body tag.

  2. Ubah nilai untuk background-color dari #fff ke darkblue.

    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;
}

Menampilkan perubahan di jendela Pratinjau Terbitkan

Saat Anda menggunakan panduan Terbitkan Web untuk menerbitkan proyek, Anda bisa melihat perubahan apa yang akan diterbitkan dengan mengklik ganda file di jendela Pratinjau .

  1. Klik kanan proyek ContosoUniversity dan klik Terbitkan.

  2. Dari daftar drop-down Profil , pilih profil Publikasi pengujian .

  3. Klik Pratinjau, lalu klik Mulai Pratinjau.

  4. Di panel Pratinjau , klik dua kali Site.css.

    Klik dua kali Site.css

    Dialog Pratinjau perubahan memperlihatkan pratinjau perubahan yang akan disebarkan.

    Pratinjau perubahan ke Site.css

    Jika Anda mengklik dua kali file Web.config , dialog Pratinjau perubahan menunjukkan efek transformasi konfigurasi build Anda dan menerbitkan transformasi profil. Pada titik ini Anda belum melakukan apa pun yang akan menyebabkan file Web.config di server berubah, jadi Anda berharap tidak melihat perubahan. Namun, jendela Pratinjau perubahan salah menunjukkan dua perubahan. Sepertinya dua elemen XML akan dihapus. Elemen-elemen ini ditambahkan oleh proses penerbitan saat Anda memilih Jalankan Migrasi Pertama Kode pada aplikasi dimulai untuk kelas konteks Kode Pertama. Perbandingan dilakukan sebelum proses penerbitan menambahkan elemen-elemen tersebut, sehingga sepertinya elemen tersebut dihapus meskipun tidak akan dihapus. Kesalahan ini akan dikoreksi dalam rilis mendatang.

  5. Klik Tutup.

  6. Klik Terbitkan.

  7. Saat browser terbuka ke beranda situs Uji, tekan CTRL+F5 untuk menyebabkan refresh keras untuk melihat efek perubahan CSS.

    Efek perubahan CSS

  8. Tutup browser.

Menerbitkan file tertentu dari Penjelajah Solusi

Misalkan Anda tidak menyukai latar belakang biru dan ingin kembali ke warna asli. Di bagian ini Anda akan memulihkan pengaturan asli dengan menerbitkan file tertentu langsung dari Penjelajah Solusi.

  1. Buka Content/Site.css dan pulihkan pengaturan ke background-color#fff.

  2. Di Penjelajah Solusi, klik kanan file Content/Site.css .

    Menu konteks memperlihatkan tiga opsi penerbitan.

    Menerbitkan opsi dari Penjelajah Solusi

  3. Klik Pratinjau perubahan pada Site.css.

    Jendela terbuka untuk menunjukkan perbedaan antara file lokal dan versinya di lingkungan tujuan.

    Diff-Content/Site.css

  4. Di Penjelajah Solusi, klik kanan Site.css lagi dan klik Terbitkan Site.css.

    Jendela Aktivitas Penerbitan Web menunjukkan bahwa file telah diterbitkan.

    Jendela Aktivitas Penerbitan Web

  5. Buka browser ke http://localhost/contosouniversity URL, lalu tekan CTRL+F5 untuk menyebabkan refresh keras untuk melihat efek perubahan CSS.

    Halaman beranda dengan CSS normal

  6. Tutup browser.

Ringkasan

Anda sekarang telah melihat beberapa cara untuk menyebarkan pembaruan aplikasi yang tidak melibatkan perubahan database, dan Anda telah melihat cara mempratinjau perubahan untuk memverifikasi bahwa apa yang akan diperbarui adalah apa yang Anda harapkan. Halaman Instruktur sekarang memiliki bagian Kursus Yang Diajarkan .

Cuplikan layar memperlihatkan halaman Instruktur dan kursus yang diajarkan oleh Instruktur tertentu.

Tutorial berikutnya menunjukkan kepada Anda cara menyebarkan perubahan database: Anda akan menambahkan bidang tanggal lahir ke database dan ke halaman Instruktur.

SebelumnyaBerikutnya