Microsoft AzureでGo + Gin + GormのWebアプリケーションをデプロイする

# あらすじ
Microsoft Azureを使用したGo + Gin + GormのWebアプリのデプロイができたので、メモ程度に書き込みます。

## 環境
・Mac OS
・Microsoft Azure
・Visual Studio Code

# Microsoft Azure操作
## アカウントの作成、またはログイン
[Azure公式サイト](https://azure.microsoft.com/ja-jp/free/search/)でアカウントの作成、またはログインを行う。

## Webアプリの作成
[Webアプリ]の[作成]を選択
![Screen Shot 2023-01-23 at 22.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/66457293-08e3-4065-8fc9-1361014f27d5.png)

[基本]画面の各種項目設定後、[確認および作成]ボタンクリック後、作成
例）
![Screen Shot 2023-01-23 at 22.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/6261eb9e-c888-e083-7543-d34757caa086.png)

[デプロイが完了しました]と表示されたら一旦OK
**注）リソースグループは今後使うので覚えておいてください。**

![Screen Shot 2023-01-23 at 22.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/bfef4f60-361e-ed5c-cbb8-9a45db8c1599.png)

## SQLデータベースの作成

Microsoft Azureの公式資料は[こちら](https://learn.microsoft.com/ja-jp/azure/azure-sql/database/free-sql-db-free-account-how-to-deploy?view=azuresql)

[SQL Database]の[作成]を選択

![Screen Shot 2023-01-23 at 22.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/2fe664c3-6f10-e0c5-8097-9c0a36941a9d.png)
一旦、データベース名まで入力
リソースグループは先ほど作成したものと同じやつ
例）
![Screen Shot 2023-01-23 at 22.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/07ab4ce3-4341-a6c7-a0cc-a4190c408d10.png)
項目[サーバー]の新規作成を選択後、各種項目設定
設定完了したら[OK]選択
**注）ここで設定したパスワードは使用するので覚えておく**
例）
![Screen Shot 2023-01-24 at 20.19.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/764830e3-098a-9c15-90a1-f8cf4ed91d59.png)


下記のように各種項目設定後、[次：ネットワーク>]を選択
![Screenshot 2023-01-24 at 19-57-05 Microsoft Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/9f06ce3d-9b25-7dc0-7303-0a9fcc62071c.png)

接続方法を[パブリックエンドポイント]にし、ファイアウォール規則を両方とも[はい]に変更
その後、[次：セキュリティ>]を選択
![Screen Shot 2023-01-24 at 20.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/b6733aa8-8c77-b27b-8cd5-ecbb6b667c2e.png)

Microsoft Defender for SQLを有効にする、を[無料使用版の開始]に変更
その後[確認および作成]→[作成]を選択
![Screen Shot 2023-01-24 at 20.26.21 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/aa13112e-0d3b-d772-01ff-ef26b1a84f82.png)

下記画像のように[デプロイが完了しました]と表示されたらOK

![Screen Shot 2023-01-24 at 20.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/af08325f-1fe0-00b4-6bee-793ebd3a7ae2.png)

[全てのリソース]に移動し先ほど作成したSQL データベースを選択
![Screen Shot 2023-01-24 at 20.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/75a47aea-2686-4171-0e80-62089d866a10.png)

[接続文字列]を選択
![Screen Shot 2023-01-24 at 20.35.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/99793921-6af5-c123-f780-68596a04859b.png)

[Go]を選択後、16行目の変数passwordの値、\<your_password>を先ほど設定したパスワードに変更する
12行目から25行目まであたりを使用
<font color="red">※1</font>
![Screen Shot 2023-01-24 at 20.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/9ac10f5e-f32f-2879-300e-f78abff851bf.png)

以上でAzure操作は終了

# Visual Studio Code操作
## 拡張子のインストール
Extensionsで[Azure]と入力し、[Azure Tools]をインストール
![Screen Shot 2023-01-24 at 20.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/59c0a9ba-c45c-22e9-ade8-27cf9b7d1b29.png)

## Gin, Gorm, Go-MsSQLDBのインストール

フォルダ直下で下記コマンドを順に実行

```terminal
// go.modファイル作成
go mod init test

// Ginのインストール
go get -u github.com/gin-gonic/gin

// Gormのインストール
go get -u gorm.io/gorm
go get -u gorm.io/driver/sqlite
go get gorm.io/driver/sqlserver

// Go-MsSQLDBのインストール
go get github.com/microsoft/go-mssqldb
```
## ファイル構成
```
  test
    ├── main.go
    ├── models
    │     └── db.go
    ├── template
    │      └── index.html
    ├──go.mod
    └──go.sum
```

## コード
```go:main.go
package main

import (
	"net/http"
	"strconv"
	db "test/models"

	"github.com/gin-gonic/gin"
)

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("template/*.html")

	router.GET("/", func(ctx *gin.Context) {
		users := db.SelectAllUser()
		ctx.HTML(http.StatusOK, "index.html", gin.H{
			"users": users,
		})
	})

	router.POST("/", func(ctx *gin.Context) {
		name := ctx.PostForm("name")
		age, _ := strconv.Atoi(ctx.PostForm("age"))
		db.AddUser(name, age)
		ctx.Redirect(http.StatusFound, "/")
	})

	router.Run()
}

```

```go:db.go
package db

import (
	"fmt"
	"log"

	_ "github.com/microsoft/go-mssqldb"
	"gorm.io/driver/sqlite"
	"gorm.io/driver/sqlserver"
	"gorm.io/gorm"
)

const (
	DBName = "sample.db"
)

type User struct {
	gorm.Model
	Name string
	Age  int
}

// ※1の値を設定
var server = "***"
var port = 1433
var user = "myfirstserver445"
var password = "***"
var database = "***"

// データベース開く
func openDB() *gorm.DB {

	connString := fmt.Sprintf("server=%s;user id=%s;password=%s;port=%d;database=%s;",
		server, user, password, port, database)
	db, err := gorm.Open(sqlserver.Open(connString), &gorm.Config{})

	CheckError(err)
	return db
}

// エラーチェック
func CheckError(err error) {
	if err != nil {
		log.Fatalln(err)
	}
}

func init() {
	db := openDB()
	db.AutoMigrate(&User{})
}

// ユーザー追加
func AddUser(name string, age int) {
	db := openDB()
	user := User{Name: name, Age: age}
	db.Create(&user)
}

// ユーザー全取得
func SelectAllUser() []User {
	var users []User
	db := openDB()
	db.Find(&users)
	return users
}

```

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>index</title>
</head>
<body>
    <form action="/" method="post">
        名前:<input type="text" name="name"/>
        年齢:<input type="number" name="age"/>
        <input type="submit" value="確定"/>
    </form>
    <br/><br/>

    <ul>
        {{range .users}}
            <li><h3>{{.Name}} {{.Age}}歳</h3></li>
        {{end}}
    </ul>
</body>
</html>
```

# デプロイ

VSCode上で、[cmd + Shift + P]を入力すると下記画像のようになる
![Screen Shot 2023-01-24 at 21.16.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/8d7d4b7d-6126-8130-1329-a1dfebb529b6.png)

[Deploy]と入力し一番上の[Azure App Service: Deploy to Web App...]を選択
![Screen Shot 2023-01-24 at 21.17.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/7a161ca2-79b4-e6ea-9d6b-3b24c7bb3eb3.png)

下記のtest~~を選択
![Screen Shot 2023-01-24 at 21.23.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/628634ba-7c77-6c65-9b43-effd240ecb3d.png)

[myTestProject12345]を選択（リソースグループ名）
![Screen Shot 2023-01-24 at 21.19.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/d4bd8c77-41bf-fd33-7f33-24d48801e0b0.png)

前にデプロイしたのを上書きしますがよろしいですかと問われるが[Deploy]を選択
![Screen Shot 2023-01-24 at 21.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/d606fbd6-b9b7-4eca-6ae9-fd05ce809d8b.png)

画面右下にDeploying to ~~と出てきたら5分程度待機
![Screen Shot 2023-01-24 at 21.20.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/05fcaf13-e683-9e9a-8f8c-631c6fef7bc4.png)

画面右下にDeployment to ~~ completedと表示されたら完了
Browse Website選択すると、Webアプリが立ち上がる
![Screen Shot 2023-01-24 at 21.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/08e84cd6-3935-2d6a-526a-5019b6ca3cd4.png)

## 実行結果
このような画面が出てくる
![Screen Shot 2023-01-24 at 21.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/4538072c-d7d1-fe5e-f2af-65e6e6b76371.png)

値入力
![Screen Shot 2023-01-24 at 21.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/04d9061c-cb97-a63d-adf0-9770b31a465e.png)

確定選択
![Screen Shot 2023-01-24 at 21.36.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/d30fb1b2-f288-369e-98e5-92581517d2ce.png)

## データベース確認

Azureにログイン後、[全てのリソース]を選択し、[SQLデータベース]選択
![Screen Shot 2023-01-24 at 21.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/e9a5977b-62e5-6e5b-620b-68dce565c55c.png)

[クエリエディター（プレビュー）]を選択後、ログイン
![Screen Shot 2023-01-24 at 21.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/c3cb0909-1ad2-c9b2-1394-cb1723ee78a3.png)
]

開いたあと、テーブル>dbo.usersの右にある[・・・]をクリック
[データを編集します（プレビュー）]を選択
![Screen Shot 2023-01-24 at 21.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039114/8c2eb126-6243-ed73-4223-71d1ebf32668.png)

もう一度開いたあと、テーブル>dbo.usersを開くとデータが更新されている

# 最後に
VSCodeからデプロイできるのがかなり楽だと感じました。
個人的にはGCPよりも簡単かなと。
Azureを最近触り始めたばかりなので、試行錯誤してみたいと思います。