ASP.NET implantação da Web usando o Visual Studio: implantando uma atualização de código

por Tom Dykstra

Baixar o Projeto Inicial

Esta série de tutoriais mostra como implantar (publicar) um aplicativo Web ASP.NET para Serviço de Aplicativo do Azure Aplicativos Web ou para um provedor de hospedagem de terceiros usando o Visual Studio 2012 ou o Visual Studio 2010. Para obter informações sobre a série, consulte o primeiro tutorial da série.

Visão geral

Após a implantação inicial, seu trabalho de manutenção e desenvolvimento de seu site continua e, em pouco tempo, você desejará implantar uma atualização. Este tutorial leva você pelo processo de implantação de uma atualização no código do aplicativo. A atualização que você implementa e implanta neste tutorial não envolve uma alteração de banco de dados; você verá o que há de diferente na implantação de uma alteração de banco de dados no próximo tutorial.

Lembrete: se você receber uma mensagem de erro ou algo não funcionar à medida que passar pelo tutorial, certifique-se de marcar página de solução de problemas.

Alterar um código

Como um exemplo simples de uma atualização para seu aplicativo, você adicionará à página Instrutores uma lista de cursos ministrados pelo instrutor selecionado.

Se você executar a página Instrutores , observará que há Links selecionados na grade, mas eles não fazem nada além de tornar a tela de fundo da linha cinza.

Página instrutores com seleção

Agora você adicionará o código executado quando o link Selecionar for clicado e exibirá uma lista de cursos ministrados pelo instrutor selecionado.

  1. Em Instructors.aspx, adicione a seguinte marcação imediatamente após o controle 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. Execute a página e selecione um instrutor. Você vê uma lista de cursos ministrados por esse instrutor.

    Captura de tela mostrando a página Instrutores com um único Instrutor realçado e exibindo os cursos que eles ensinam.

  3. Feche o navegador.

Implantar a atualização de código no ambiente de teste

Antes de usar seus perfis de publicação para implantar em teste, preparo e produção, você precisa alterar as opções de publicação de banco de dados. Você não precisa mais executar os scripts de concessão e implantação de dados para o banco de dados de associação.

  1. Abra o assistente Publicar Web clicando com o botão direito do mouse no projeto ContosoUniversity e clicando em Publicar.
  2. Clique no Perfil de teste na lista suspensa Perfil .
  3. Clique na guia Configurações .
  4. Em DefaultConnection na seção Bancos de dados, desmarque a caixa Atualizar banco de dados marcar.
  5. Clique na guia Perfil e, em seguida, clique no perfil preparo na lista suspensa Perfil .
  6. Quando for perguntado se deseja salvar as alterações feitas no perfil de teste , clique em Sim.
  7. Faça a mesma alteração no perfil de preparo.
  8. Repita o processo para fazer a mesma alteração no perfil de produção.
  9. Feche o assistente Publicar Web .

A implantação no ambiente de teste agora é uma questão simples de executar a publicação com um clique novamente. Para tornar esse processo mais rápido, você pode usar a barra de ferramentas Publicar do Web One Click .

  1. No menu Exibir , escolha Barras de ferramentas e, em seguida, selecione Web One Clique em Publicar.

    Selecting_One_Click_Publish_toolbar

  2. Em Gerenciador de Soluções, selecione o projeto ContosoUniversity.

  3. a barra de ferramentas Publicar web um clique , escolha o perfil De publicação de teste e clique em Publicar Web (o ícone com setas apontando para a esquerda e para a direita).

    Web_One_Click_Publish_toolbar

  4. O Visual Studio implanta o aplicativo atualizado e o navegador é aberto automaticamente na home page.

  5. Execute a página Instrutores e selecione um instrutor para verificar se a atualização foi implantada com êxito.

Normalmente, você também faria testes de regressão (ou seja, testaria o restante do site para garantir que a nova alteração não interrompesse nenhuma funcionalidade existente). No entanto, para este tutorial, você ignorará essa etapa e continuará implantando a atualização em preparo e produção.

Quando você reimplanta, a Implantação da Web determina automaticamente quais arquivos foram alterados e copia apenas arquivos alterados para o servidor. Por padrão, a Implantação da Web usa datas alteradas nos arquivos para determinar quais foram alteradas. Alguns sistemas de controle do código-fonte alteram as datas dos arquivos mesmo quando você não altera o conteúdo do arquivo. Nesse caso, talvez você queira configurar a Implantação da Web para usar somas de verificação de arquivo para determinar quais arquivos foram alterados. Para obter mais informações, consulte Por que todos os meus arquivos são reimplantados, embora eu não os tenha alterado? nas perguntas frequentes sobre implantação do ASP.NET.

Leve o aplicativo offline durante a implantação

A alteração que você está implantando agora é uma alteração simples em uma única página. Mas, às vezes, você implanta alterações maiores ou implanta alterações de código e banco de dados, e o site pode se comportar incorretamente se um usuário solicitar uma página antes que a implantação seja concluída. Para impedir que os usuários acessem o site enquanto a implantação está em andamento, você pode usar um arquivo app_offline.htm . Quando você coloca um arquivo chamado app_offline.htm na pasta raiz do aplicativo, o IIS exibe automaticamente esse arquivo em vez de executar seu aplicativo. Portanto, para impedir o acesso durante a implantação, você coloca app_offline.htm na pasta raiz, executa o processo de implantação e, em seguida, remove app_offline.htm após a implantação bem-sucedida.

Você pode configurar a Implantação da Web para colocar automaticamente um arquivo deapp_offline.htm padrão no servidor quando ele começar a implantá-lo e removê-lo quando ele for concluído. Para fazer isso, basta adicionar o seguinte elemento XML ao arquivo de perfil de publicação (.pubxml):

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Para este tutorial, você verá como criar e usar um arquivo deapp_offline.htm personalizado.

O uso deapp_offline.htm no site de preparo não é necessário, pois você não tem usuários acessando o site de preparo. Mas é uma boa prática usar o preparo para testar tudo da maneira como você planeja implantar em produção.

Criar app_offline.htm

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse na solução, clique em Adicionar e clique em Novo Item.

  2. Crie uma página HTML chamada app_offline.htm (exclua o "l" final na extensão .html que o Visual Studio cria por padrão).

  3. Substitua a marcação de modelo pela seguinte marcação:

    <!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. Salve e feche o arquivo.

Copiar app_offline.htm para a pasta raiz do site

Você pode usar qualquer ferramenta FTP para copiar arquivos para o site. FileZilla é uma ferramenta FTP popular e é mostrada nas capturas de tela.

Para usar uma ferramenta FTP, você precisa de três coisas: a URL ftp, o nome de usuário e a senha.

A URL é mostrada na página dashboard do site no Portal de Gerenciamento do Azure e o nome de usuário e a senha do FTP podem ser encontrados no arquivo .publishsettings que você baixou anteriormente. As etapas a seguir mostram como obter esses valores.

  1. No Portal de Gerenciamento do Azure, clique na guia Sites e clique no site de preparo.

  2. Na página Painel , role para baixo para encontrar o nome do host FTP na seção Olhar Rápido .

    Nome do host FTP

  3. Abra o arquivo .publishsettings de preparo no Bloco de Notas ou em outro editor de texto.

  4. Localize o publishProfile elemento para o perfil FTP.

  5. Copie os userName valores e userPWD .

    Credenciais de FTP

  6. Abra a ferramenta FTP e faça logon na URL do FTP.

  7. Copie app_offline.htm da pasta da solução para a pasta /site/wwwroot no site de preparo.

    Copiar app_offline

  8. Navegue até a URL do site de preparo. Você verá que a páginaapp_offline.htm agora é exibida em vez de sua home page.

    app_offline.htm na janela do navegador

Agora você está pronto para implantar no preparo.

Implantar a atualização de código para preparo e produção

  1. Na barra de ferramentas Publicar do Web One Click , escolha o perfil De publicação de preparo e clique em Publicar Web.

    O Visual Studio implanta o aplicativo atualizado e abre o navegador na home page do site. O arquivo app_offline.htm é exibido. Antes de testar para verificar a implantação bem-sucedida, você deve remover o arquivo app_offline.htm .

  2. Retorne à ferramenta FTP e exclua app_offline.htm do site de preparo.

  3. No navegador, abra a página Instrutores no site de preparo e selecione um instrutor para verificar se a atualização foi implantada com êxito.

  4. Siga o mesmo procedimento para produção que você fez para preparo.

Revisão de alterações e implantação de arquivos específicos

O Visual Studio 2012 também oferece a capacidade de implantar arquivos individuais. Para um arquivo selecionado, você pode exibir diferenças entre a versão local e a versão implantada, implantar o arquivo no ambiente de destino ou copiar o arquivo do ambiente de destino para o projeto local. Nesta seção do tutorial, você verá como usar esses recursos.

Fazer uma alteração para implantar

  1. Abra Content/Site.css e localize o bloco para a body marca.

  2. Altere o valor de #fff de para background-colordarkblue.

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

Exibir a alteração na janela Publicar Visualização

Ao usar o assistente Publicar Web para publicar o projeto, você pode ver quais alterações serão publicadas clicando duas vezes no arquivo na janela Visualização .

  1. Clique com o botão direito do mouse no projeto ContosoUniversity e clique em Publicar.

  2. Na lista suspensa Perfil , selecione o Perfil de publicação de teste .

  3. Clique em Visualizar e, em seguida, clique em Iniciar Visualização.

  4. No painel Visualização , clique duas vezes em Site.css.

    Clique duas vezes em Site.css

    A caixa de diálogo Visualizar alterações mostra uma visualização das alterações que serão implantadas.

    Visualizar alterações em Site.css

    Se você clicar duas vezes no arquivo Web.config , a caixa de diálogo Visualizar alterações mostrará o efeito das transformações de configuração de build e as transformações de perfil de publicação. Neste ponto, você não fez nada que faria com que o arquivo Web.config no servidor fosse alterado, portanto, você espera não ver nenhuma alteração. No entanto, a janela Visualizar alterações mostra incorretamente duas alterações. Parece que dois elementos XML serão removidos. Esses elementos são adicionados pelo processo de publicação quando você seleciona Executar Migrações do Code First no início do aplicativo para uma classe de contexto Code First. A comparação é feita antes que o processo de publicação adicione esses elementos, portanto, parece que eles estão sendo removidos, embora não sejam removidos. Esse erro será corrigido em uma versão futura.

  5. Clique em fechar

  6. Clique em Publicar.

  7. Quando o navegador abrir para a home page do site de teste, pressione CTRL+F5 para causar uma atualização difícil para ver o efeito da alteração do CSS.

    Efeito da alteração do CSS

  8. Feche o navegador.

Publicar arquivos específicos de Gerenciador de Soluções

Suponha que você não goste do plano de fundo azul e queira reverter à cor original. Nesta seção, você restaurará as configurações originais publicando um arquivo específico diretamente de Gerenciador de Soluções.

  1. Abra Content/Site.css e restaure a background-color configuração para #fff.

  2. Em Gerenciador de Soluções, clique com o botão direito do mouse no arquivo Content/Site.css.

    O menu de contexto mostra três opções de publicação.

    Opções de publicação de Gerenciador de Soluções

  3. Clique em Visualizar alterações em Site.css.

    Uma janela é aberta para mostrar as diferenças entre o arquivo local e a versão dele no ambiente de destino.

    Diff-Content/Site.css

  4. Em Gerenciador de Soluções, clique com o botão direito do mouse em Site.css novamente e clique em Publicar Site.css.

    A janela Atividade de Publicação da Web mostra que o arquivo foi publicado.

    Janela Atividade de Publicação da Web

  5. Abra um navegador na http://localhost/contosouniversity URL e pressione CTRL+F5 para causar uma atualização difícil para ver o efeito da alteração do CSS.

    Home page com CSS normal

  6. Feche o navegador.

Resumo

Agora você viu várias maneiras de implantar uma atualização de aplicativo que não envolve uma alteração de banco de dados e viu como visualizar as alterações para verificar se o que será atualizado é o que você espera. A página Instrutores agora tem uma seção Cursos Ensinados .

Captura de tela mostrando a página Instrutores e os cursos ministrados por um Instrutor específico.

O próximo tutorial mostra como implantar uma alteração de banco de dados: você adicionará um campo de data de nascimento ao banco de dados e à página Instrutores.