[鐵人賽Day27] ASP.Net Core MVC 進化之路 - 工具篇(1) / 將網站發布到Azure上

本文將介紹如何透過Azure AppService將網站發布到雲端平台上。

Azure

「Azure Appservice web」的圖片搜尋結果

(圖片來源:https://aspblogs.blob.core.windows.net/media/scottgu/WindowsLiveWriter/AnnouncingthenewAzureAppService_122D1/image_4.png)

 

Azure是微軟推出的雲端運算服務平台,

我們會應用AppService中的WebApp快速部署一個網站。

如果你還沒有註冊過Azure帳號的朋友,

可以到官方申請一個免費試用(1年)的帳號,

首月份會贈送6100點數供您使用。

 

註冊完之後我們使用Visual Studio 2017建立一個ASP.Net Core的範本專案,

編譯後在[方案名稱] 點選右鍵 。

點選發行後會跳出發佈目標的視窗。

 

之後點選建立新的AppService。

接著會請你輸入AppService需要的相關訂用帳號資訊,

這邊應用程式名稱可以修改為你想要的網站名稱,

筆者就直接使用預設的網站名稱。

如果是第一次使用它會請你建立資源群組即訂用帳戶資訊,

地區的話建議可以選地緣較近的「東南亞」或「東亞」。

主控方案的部分請記得檢查是否為F1(定價層:free),

筆者一剛開始接觸時沒特別留意就噴了好幾千塊$$。

好了之後點選[建立],

之後左下方就會出現正在部署的圈圈。

然後你就可以去隔壁超商買個蜂蜜檸檬水,

回來之後就已經部署完畢了。

通常第一次使用會耗費較多時間在建立資源群組跟主控方案,

後面部署速度就會快一些。

接著介紹Azure資料庫建置,

我們回到Azure Portal網站上。

點選[CreateResource] - [SQL Database]

之後輸入一些資料庫的基本資料,

如Database name, Server name, Server admin login, Password, Location等等,

右下角有一個[Allow Azure services to access server]記得打勾,

這樣等一下才能跟上面在Azure建立的WebApp作溝通,

定價層部分雖然官方有提到首年度有250GB的容量免費,

但網路傳輸的部分還是會收費,

如果你只是想試用看看雲端的solution

那你可以選擇[Basic]層級即可(150$/月)。

好了之後先按右下的[Select] -> [Create]。

之後它會開始建立資料庫,

約莫兩分鐘後再觀察右上方的通知視窗即可,

我們點選[Go to resource]前往資料庫的管理介面。

因為等等需要使用本機端與Azure SQL Database溝通,

但Azure SQL Database防火牆預設會把其他IP擋掉,

所以要點選[Set server firewall]在規則中加入本機端的IP。

通常在家使用到的不一定是真正對外的IP,

可能只是路由器的對內IP(10.x.x.x, 172.x.x.x, 192.x.x.x),

透過[Add client IP]會自動偵測你對外的IP並加到下方的規則列表中,

好了之後記得按下[Save]儲存設定。

接著我們回到VS2017中,

在[檢視]中選取[SQL Server物件總管],

點選中間的icon[加入 SQL Server]。

點選[Azure]後選擇剛才我們建立的資料庫並輸入帳號密碼進行連接。

接著點選[右鍵] -> [屬性] 查看連接字串

 

最後我們要使用Code First的方式進行建立,

有興趣的讀者可參考筆者前面的文章

首先在Models資料夾中加入Book.cs

public class Book
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
    public string ISBN { get; set; }
    public DateTime PublishDate { get; set; }
}

 

然後新增一個MyAzureDbContext

public class MyAzureDbContext : DbContext
{
    public MyAzureDbContext(DbContextOptions<MyAzureDbContext> options) : base(options)
    {
    }

    public DbSet<Book> Blogs { get; set; }
}

 

appsettings.json中新增我們剛才的那段連接字串(密碼記得要填),

連接字串名稱可自訂(筆者使用MyAzureDbConnectionString)。

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MyAzureDbConnectionString": "Data Source=db-server-aspnetcoreweb.database.windows.net;Initial Catalog=AspNetCoreWeb;User ID=aspcoreweb_admin;Password=xxxxxxxx;Connect Timeout=30;Encrypt=True;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"
  }
}

 

Startup.cs中加入設定連接字串。

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<MyAzureDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("MyAzureDbConnectionString")));

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}

 

接著使用Nuget安裝[Microsoft.EntityFrameworkCore.SqlServer]套件,

並打開套件管理器主控台(Package Manager Console)。

//1.啟用Code First
Enable-Migrations

//2.加入Migration(name = Init)
Add-Migration Init

//3.依連接字串更新資料庫
Update-Database

 

好了之後再觀察一下我們的[SQL Server物件總管]

看到我們新增的Blogs就大功告成了!

最後再把這段程式碼部署上Azure即可。

Azure App Service的介紹就到這邊。