Visual Studio を使用した ASP.NET Web 配置: コード更新プログラムの配置

[アーティクル]
05/30/2024

このチュートリアルシリーズでは、Visual Studio 2012 または Visual Studio 2010 を使用して、ASP.NET Web アプリケーションを Azure App Service Web Apps またはサードパーティのホスティングプロバイダーに配置 (発行) する方法について説明します。このシリーズについては、シリーズの最初のチュートリアルをご覧ください。

概要

初期デプロイ後も、Web サイトの保守と開発の作業が続き、まもなく更新をデプロイする必要が生じます。このチュートリアルでは、アプリケーションコードに更新プログラムを配置するプロセスについて説明します。このチュートリアルで実装して配置する更新プログラムには、データベースの変更は含まれません。データベース変更の配置がどのように異なるかについては、次のチュートリアルで説明します。

リマインダー: チュートリアルの間、エラーメッセージが表示されたり、うまくいかないことがある場合は、必ずトラブルシューティングに関するページを確認してください。

コードに変更を加える

アプリケーション更新の簡単な例として、選択したインストラクターが教えるコースの一覧を Instructors ページに追加します。

Instructors ページを実行すると、グリッドにリンクの [選択] が表示されますが、行の背景を灰色にする以外の操作は行われません。

選択したインストラクタページ

次に、リンクの [選択] がクリックされたときに実行され、選択したインストラクターが教えるコースの一覧を表示するコードを追加します。

Instructors.aspxで、ErrorMessageLabel Label コントロールの直後に次のマークアップを追加します。

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

ページを実行し、インストラクターを選択します。そのインストラクターが教えるコースの一覧が表示されます。
ブラウザーを閉じます。

コード更新プログラムをテスト環境に配置する

発行プロファイルを使用して、テスト、ステージング、運用に配置する前に、データベース発行オプションを変更する必要があります。メンバーシップデータベースの許可スクリプトとデータ配置スクリプトを実行する必要がなくなりました。

ContosoUniversity プロジェクトを右クリックし、[発行] をクリックして、[Web の発行] ウィザードを開きます。
[プロファイル] ドロップダウンリストで、[テスト] プロファイルをクリックします。
[設定] タブをクリックします。
[データベース] セクションの [DefaultConnection] で、[データベースの更新] チェックボックスをオフにします。
[プロファイル] タブをクリックしてから、[プロファイル] ドロップダウンリストの [ステージング] プロファイルをクリックします。
[テスト] プロファイルに加えた変更を保存するかどうかを確認するメッセージが表示されたら、[はい] をクリックします。
ステージングプロファイルで同じ変更を行います。
プロセスを繰り返して、運用プロファイルで同じ変更を行います。
[Web の発行] ウィザードを閉じます。

テスト環境への配置は、ワンクリック発行をもう一度実行するだけで済みます。このプロセスをより迅速に行うには、[Web ワンクリック発行] ツールバーを使用できます。

[表示] メニューの [ツールバー] を選択してから、[Web の 1 クリック公開] を選択します。
ソリューションエクスプローラーで、ContosoUniversity プロジェクトを選択します。
[Web の 1 クリック公開] ツールバーで [テスト] の発行プロファイルを選択し、[Web を公開] (矢印が左と右を指しているアイコン) をクリックします。
更新されたアプリケーションが Visual Studio でデプロイされ、ブラウザーで自動的にホームページが開かれます。
Instructors ページを実行し、インストラクターを選択して、更新が正常にデプロイされたことを確認します。

通常は回帰テストも行います (つまり、サイトの残りの部分をテストして、新しい変更によって既存の機能が中断されていないことを確認します)。ただし、本チュートリアルではその手順をスキップし、ステージングと運用環境への更新プログラムの配置に進みます。

再配置すると、変更されたファイルが Web 配置によって自動的に決定され、変更されたファイルのみがサーバーにコピーされます。既定では、Web 配置は、ファイルの最終更新日を使用して、どのファイルが変更されたかを判断します。一部のソース管理システムでは、ファイルの内容を変更しない場合でも、ファイルの日付が変更されます。その場合は、ファイルチェックサムを使用して、変更されたファイルを特定するように Web 配置を構成できます。詳細については、ASP.NET 配置に関する FAQ の変更していないのにすべてのファイルが再配置される理由に関する記事を参照します。

配置中にアプリケーションをオフラインにする

配置する変更は、1 つのページに対する単純な変更です。ただし、大規模な変更を配置したり、コードとデータベースの両方の変更を配置したりする場合もあります。配置が完了する前にユーザーがページを要求すると、サイトが正しく動作しない可能性があります。配置の進行中にユーザーがサイトにアクセスできないようにするには、app_offline.htm ファイルを使用できます。アプリケーションのルートフォルダーに app_offline.htm という名前のファイルを配置すると、IIS はアプリケーションを実行せずに、そのファイルを自動的に表示します。そのため、配置中にアクセスできないようにするには、ルートフォルダーに app_offline.htm を配置し、配置プロセスを実行し、配置の成功後に app_offline.htm を削除します。

配置の開始時に既定の app_offline.htm ファイルをサーバーに自動的に配置し、配置終了時にそれを削除するよう、Web 配置を構成することができます。これを行うには、発行プロファイル (.pubxml) ファイルに次の XML 要素を追加するだけです。

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

本チュートリアルでは、カスタム app_offline.htm ファイルを作成して使用する方法について説明します。

ステージングサイトにアクセスしているユーザーがいないため、ステージングサイトで app_offline.htm を使用する必要はありません。ただし、ステージングを使用して、運用環境での配置を計画する方法をすべてテストすることをお勧めします。

app_offline.htm の作成

ソリューションエクスプローラーでソリューションを右クリックし、[追加] をクリックしてから [新しい項目] をクリックします。
app_offline.htm という名前の HTML ページを作成します (Visual Studio が既定で作成する .html 拡張子から、最後の「l」を削除します)。

テンプレートマークアップを次のマークアップに置き換えます。

<!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>

ファイルを保存して閉じます。

app_offline.htm を Web サイトのルートフォルダーにコピーします。

任意の FTP ツールを使用すれば、ファイルを Web サイトにコピーすることができます。スクリーンショットに表示されている FileZilla は一般的な FTP ツールです。

FTP ツールを使用するには、FTP URL、ユーザー名、パスワードの 3 つが必要です。

URL は Azure 管理ポータルの Web サイトのダッシュボードページに表示されており、FTP のユーザー名とパスワードについては、以前にダウンロードした .publishsettings ファイルを参照してください。これらの値を取得する方法を、次の手順に示します。

Azure 管理ポータルで、[Web サイト] タブをクリックし、ステージング Web サイトをクリックします。
[ダッシュボード] ページで下にスクロールし、[概要] セクションで FTP ホスト名を見つけます。
メモ帳または別のテキストエディターでステージング .publishsettings ファイルを開きます。
FTP プロファイルの publishProfile 要素を検索します。
userName と userPWD の値をコピーします。
FTP ツールを開き、FTP URL にログオンします。
ソリューションフォルダーからステージングサイトの /site/wwwroot フォルダーに app_offline.htm をコピーします。
ステージングサイトの URL に移動します。ホームページではなく app_offline.htm ページが表示されています。

これで、ステージングに配置する準備ができました。

コード更新プログラムをステージングおよび運用に配置する

[Web ワンクリック発行] ツールバーで、[ステージング] 発行プロファイルを選択してから、[Web の発行] をクリックします。

更新されたアプリケーションが Visual Studio よって配置され、ブラウザーでサイトのホームページが開かれます。 app_offline.htm ファイルが表示されます。テストを行って配置が成功したことを確認するには、app_offline.htm ファイルを削除する必要があります。
FTP ツールに戻り、ステージングサイトから app_offline.htm を削除します。
ブラウザーでステージングサイトの Instructors ページを開き、[インストラクター] を選択して、更新プログラムが正常に配置されたことを確認します。
運用環境の場合も、ステージングに行ったのと同じ手順に従います。

変更の確認と特定のファイルの配置

Visual Studio 2012 では、個々のファイルを配置することもできます。選択したファイルの場合、ローカルバージョンと配置されたバージョンの違いを表示したり、ファイルをターゲット環境に配置したり、ターゲット環境からローカルプロジェクトにファイルをコピーしたりできます。チュートリアルのこのセクションでは、これらの機能の使用方法について説明します。

配置を変更する

Content/Site.css を開き、body タグのブロックを見つけます。

background-color の値を #fff から 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;
}

[発行プレビュー] ウィンドウで変更を表示する

[Web の発行] ウィザードを使用してプロジェクトを発行する場合、[プレビュー] ウィンドウでファイルをダブルクリックすると、発行される変更を確認できます。

ContosoUniversity プロジェクトを右クリックし、[発行] をクリックします。
[プロファイル] ドロップダウンリストから、[テスト] の発行プロファイルを選択します。
[プレビュー] をクリックしてから、[プレビューの開始] をクリックします。
[プレビュー] ペインで Site.css をダブルクリックします。

[変更のプレビュー] ダイアログには、配置される変更のプレビューが表示されます。

Web.config ファイルをダブルクリックすると、[変更のプレビュー] ダイアログに、ビルド構成変換と発行プロファイル変換の効果が表示されます。この時点で、サーバー上で Web.config ファイルが変更される原因となる処理は行っていないので、変更は表示されません。ただし、[変更のプレビュー] ウィンドウに 2 つの変更が誤って表示されます。 2 つの XML 要素が削除されるように見えます。これらの要素は、Code First コンテキストクラスに対してアプリケーション起動時に [Code First Migrations の実行] を選択すると、発行プロセスによって追加されます。発行プロセスがこれらの要素を追加する前に比較が行われるので、削除されないのに削除されているように見えます。このエラーは、今後のリリースで修正されます。
閉じるをクリックします。
[発行] をクリックします。
ブラウザーがテストサイトのホームページに表示されたら、Ctrl キーを押しながら F5 キーを押して、CSS の変更の効果を確認するためにハード更新を実行します。
ブラウザーを閉じます。

ソリューションエクスプローラーから特定のファイルを発行する

青の背景が気に入らないため、元の色に戻したいとします。このセクションでは、特定のファイルをソリューションエクスプローラーから直接発行して、元の設定を復元します。

Content/Site.css を開き、background-color の設定を #fff に復元します。
ソリューションエクスプローラーで、Content/Site.css ファイルを右クリックします。

コンテキストメニューには、3 つの発行オプションが表示されます。
[Site.css への変更内容のプレビュー] をクリックします。

ウィンドウが開き、ローカルファイルと配置先環境でのバージョンとの違いが表示されます。
ソリューションエクスプローラーで、もう一度 Site.css を右クリックし、[Site.css の発行] をクリックします。

[Web 発行アクティビティ] ウィンドウに、ファイルが発行されたことが表示されます。
ブラウザーを開いて URL http://localhost/contosouniversity を開き、Ctrl キーを押しながら F5 キーを押して、CSS の変更の効果を確認するためにハード更新を行います。
ブラウザーを閉じます。

まとめ

データベースの変更を伴わないアプリケーション更新プログラムを配置する方法をいくつか見てきました。また、変更内容をプレビューして、更新内容が期待したとおりであることを確認する方法を確認しました。 Instructors ページに担当したコースのセクションが表示されるようになりました。

$[Instructors]$インストラクター$ ページと、特定のインストラクターによって教えられたコースを示すスクリーンショット。$

次のチュートリアルでは、データベースの変更を配置する方法について説明します。生年月日フィールドをデータベースと Instructors ページに追加します。

前へ次へ

次の方法で共有

Visual Studio を使用した ASP.NET Web 配置: コード更新プログラムの配置

概要

コードに変更を加える

コード更新プログラムをテスト環境に配置する

配置中にアプリケーションをオフラインにする

app_offline.htm の作成

app_offline.htm を Web サイトのルートフォルダーにコピーします。

コード更新プログラムをステージングおよび運用に配置する

変更の確認と特定のファイルの配置

配置を変更する

[発行プレビュー] ウィンドウで変更を表示する

ソリューションエクスプローラーから特定のファイルを発行する

まとめ

フィードバック

その他のリソース

次の方法で共有

Visual Studio を使用した ASP.NET Web 配置: コード更新プログラムの配置

概要

コードに変更を加える

コード更新プログラムをテスト環境に配置する

配置中にアプリケーションをオフラインにする

app_offline.htm の作成

app_offline.htm を Web サイトのルート フォルダーにコピーします。

コード更新プログラムをステージングおよび運用に配置する

変更の確認と特定のファイルの配置

配置を変更する

[発行プレビュー] ウィンドウで変更を表示する

ソリューション エクスプローラーから特定のファイルを発行する

まとめ

フィードバック

その他のリソース

app_offline.htm を Web サイトのルートフォルダーにコピーします。

ソリューションエクスプローラーから特定のファイルを発行する