前言

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

同步發表於個人點部落 - [鐵人賽Day27] ASP.Net Core MVC 進化之路 - 工具篇(1) / 將網站發布到Azure上

Azure

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

Azure是微軟推出的雲端運算服務平台，
我們會應用AppService中的WebApp快速部署一個網站。
如果你還沒有註冊過Azure帳號的朋友，
可以到官方申請一個免費試用(1年)的帳號，
首月份會贈送6100點數供您使用。

Web App

註冊完之後我們使用Visual Studio 2017建立一個ASP.Net Core的範本專案，
編譯後在方案名稱點選右鍵。

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

之後點選建立新的AppService。

接著會請你輸入AppService需要的相關訂用帳號資訊，
這邊應用程式名稱可以修改為你想要的網站名稱，
筆者就直接使用預設的網站名稱。
如果是第一次使用它會請你建立資源群組即訂用帳戶資訊，
地區的話建議可以選地緣較近的「東南亞」或「東亞」。
主控方案的部分請記得檢查是否為F1(定價層:free)，
筆者一剛開始接觸時沒特別留意就噴了好幾千塊$$。

好了之後點選建立，
之後左下方就會出現正在部署的圈圈。

然後你就可以去隔壁超商買個蜂蜜檸檬水，
回來之後就已經部署完畢了。
通常第一次使用會耗費較多時間在建立資源群組跟主控方案，
後面部署速度就會快一些。

SQL Database

接著介紹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的介紹就到這邊。