Skip to main content

Command Palette

Search for a command to run...

Azure Web App 使用 Zip 進行部署

Updated
1 min read
Azure Web App 使用 Zip 進行部署

Azure Web App Deploy Zip

Azure Web App 是個好東西,提供了很多功能卻又很簡單使用,在部署的部分也提供了多種方式,最簡單的方式就是直接利用 Visual Studio 發行,或是用 Git 來進行部署,也可以用 FTP 上傳,等等方式

一般最容易使用的應該就是 FTP 方式了,不過當檔案大小不大且數量很多時,因為 FTP 的特性會導致速度很慢,現在 Azure 推出了一個新的部署方法叫做:Zip Deploy

1. 使用 FTP 軟體

如同字面上的意思,就是把應用程式壓縮成 zip 檔案後上傳,它會自動解壓縮並部署,透過包成 zip 檔可以大量減少上傳時間,下面就來介紹一下怎麼用

首先當然要有已經建好的 Azure Web App,然後開啟以下網址,注意 app_name 要改成自己的 app_name,開啟時有可能會要求登入,再用 Azure 帳號進行登入

https://<app_name>.scm.azurewebsites.net/ZipDeploy

打開後會看到以下 Kudu 畫面

Kudu

將壓縮好的檔案直接拖移到視窗上放開即會開始上傳與部署

ZipDeploy 會自動依照壓縮檔的目錄結構擺放資料夾與檔案位置

左上角會有進度條顯示進度,下面也會有文字進度說明

這樣就部署完畢,很方便吧

如果使用 Visual Studio Code,下面還有更方便的方式

Finish


2. 使用 Visual Studio Code 透過擴充功能自動壓縮與部署

Visual Studio Code 提供了一個擴充功能:Azure App Service,使擴充功能目前還在 Preview 階段,主要提供了關於 Azure App Service 的管理,其中包含了透過 ZipDeploy 的方式上傳目前的專案

安裝完 Azure App Service 擴充功能後,首先我們要先登入 Azure 帳號,點選『Sign in to Azure』進行登入動作

登入

登入完畢會列出目前此帳號底下的所有訂閱,到此登入就確認成功完成了

列出訂閱

接下來點選『中間向上箭頭符號(↑)』,開始部署動作,點選後中間上方會出現詢問要部署那個資料夾,這邊選擇想要上傳的資料夾,可以透過打字或者方向鍵進行選擇

選擇資料夾

選擇完欲上傳之資料夾後,就會要求選擇要放的訂閱

選擇訂閱

選擇要使用的 Web App

Web App

最後會要求再確認一次,避免上傳到錯誤的 Web App,蓋掉原本正確的檔案

Confirm

按下確定後即會開始部署,在輸出視窗會顯示狀態,看到『Deployment to “app-name” completed.』代表部署完畢

Complete

More from this blog

Career-Ops 安裝與設定 — 用 AI 來幫你篩職缺、客製履歷

最近在看新的工作機會,光是瀏覽職缺、比對 JD、調整履歷就花了不少時間。 後來找到 Career-Ops 這個開源專案 作者 santifer 用這套系統篩了 740 多個職缺、產出 100 多份客製化履歷,最後拿到 Head of Applied AI 的 offer。 看起來蠻有意思的,所以我就在 Windows 上實際裝了一輪,這篇就來把整個安裝和設定的過程記錄下來。 我這邊搭配的 AI 後

Apr 12, 20265 min read
Career-Ops 安裝與設定 — 用 AI 來幫你篩職缺、客製履歷

讓 LLM 自動化你的 N8N 工作流程:n8n-mcp-server 安裝指南

前言 網路上一大堆都是在介紹如何在 N8N 裡面用 MCP 來呼叫其他工具,但是更多時候我希望 LLM 能直接幫我寫好或是修改 N8N 的工作流程 所以這篇就來介紹如何設定與使用 n8n-mcp-server 來讓 LLM 幫忙操控 N8N 在 GitHub 上有不少的 n8n-mcp-server,經過一下下的簡單搜索,我決定使用這個專案: n8n-mcp-server 原因在於說這個專案的實作提供了基本上所有需要編輯工作流程的功能,以下就來記錄安裝過程 MCP Server 設定 首先當然...

May 28, 20253 min read

[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 05 - Elmah - 02

.NET Core Logging- Elmah 02 上一篇我們提到了基本的使用方式,接下來的這一篇我們就來講講要怎麼把 Log 放到不同的儲存體上,以及如何過濾 Log Log 儲存方式 我們先來看這些 Log 倒底存在哪裡,目前共有三種儲存方式,如下: MemoryErrorLog — store errors in memory 預設為使用此方式,簡單來說就是將錯誤 Log 都存在記憶體裡,所以只要應用程式一重新啟動,Log 就沒了;但是也是最方便的方式,只是要注意如果 Log 太...

Oct 20, 20182 min read
[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 05 - Elmah - 02

[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 04 - Elmah - 01

.NET Core Logging- Elmah 01 Elmah 是我最一開始使用的 Log 工具,基本上它的功能就是將應用程式所有發生的錯誤記錄下來,不需要改變程式架構,而且又有介面可以觀看,十分的方便;它從 WebForm 時代就有了,到了 MVC 也是運作的很好,那這邊就來介紹一下 Elmah 要如何在 ASP.NET Core 中使用 (.NET Core 也可使用)。 不過很可惜的,目前並沒有釋出官方的 Elmah for .NET Core,不過有一個新專案: ElmahCore...

Oct 19, 20181 min read
[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 04 - Elmah - 01

[IT 鐵人賽] Azure Data Service - Day 04 - Cognitive Service - 辨識 - Video Indexer

Azure Data Service - Day 04 - Cognitive Service - Vision - Video Indexer 前面幾篇都是介紹靜態影像的辨識與分析,那這篇就來到針對影片來做處理。 Cognitive Service 針對影片辨識的部分提供了:Video Indexer 它整合了許多功能,在這邊列出一些比較重要的功能: 語系偵測 可以自動偵測出這個影片是屬於哪個語系,目前支援: English, Spanish, French, German, Italia...

Oct 19, 20181 min read
[IT 鐵人賽] Azure Data Service - Day 04 - Cognitive Service - 辨識 - Video Indexer

BrainBurst, HeadFirst

45 posts

學習學到老,撞牆撞到腦. A lifelong quest—with forehead dents.