LoginSignup
2
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-01-24

あらすじ

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

環境

・Mac OS
・Microsoft Azure
・Visual Studio Code

Microsoft Azure操作

アカウントの作成、またはログイン

Azure公式サイトでアカウントの作成、またはログインを行う。

Webアプリの作成

[Webアプリ]の[作成]を選択
Screen Shot 2023-01-23 at 22.00.12.png

[基本]画面の各種項目設定後、[確認および作成]ボタンクリック後、作成
例)
Screen Shot 2023-01-23 at 22.08.37.png

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

Screen Shot 2023-01-23 at 22.14.35.png

SQLデータベースの作成

Microsoft Azureの公式資料はこちら

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

Screen Shot 2023-01-23 at 22.20.23.png
一旦、データベース名まで入力
リソースグループは先ほど作成したものと同じやつ
例)
Screen Shot 2023-01-23 at 22.23.20.png
項目[サーバー]の新規作成を選択後、各種項目設定
設定完了したら[OK]選択
注)ここで設定したパスワードは使用するので覚えておく
例)
Screen Shot 2023-01-24 at 20.19.46.png

下記のように各種項目設定後、[次:ネットワーク>]を選択
Screenshot 2023-01-24 at 19-57-05 Microsoft Azure.png

接続方法を[パブリックエンドポイント]にし、ファイアウォール規則を両方とも[はい]に変更
その後、[次:セキュリティ>]を選択
Screen Shot 2023-01-24 at 20.23.34.png

Microsoft Defender for SQLを有効にする、を[無料使用版の開始]に変更
その後[確認および作成]→[作成]を選択
Screen Shot 2023-01-24 at 20.26.21 1.png

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

Screen Shot 2023-01-24 at 20.03.01.png

[全てのリソース]に移動し先ほど作成したSQL データベースを選択
Screen Shot 2023-01-24 at 20.32.34.png

[接続文字列]を選択
Screen Shot 2023-01-24 at 20.35.41.png

[Go]を選択後、16行目の変数passwordの値、<your_password>を先ほど設定したパスワードに変更する
12行目から25行目まであたりを使用
※1
Screen Shot 2023-01-24 at 20.39.34.png

以上でAzure操作は終了

Visual Studio Code操作

拡張子のインストール

Extensionsで[Azure]と入力し、[Azure Tools]をインストール
Screen Shot 2023-01-24 at 20.50.09.png

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

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

// 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

コード

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()
}

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
}

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

[Deploy]と入力し一番上の[Azure App Service: Deploy to Web App...]を選択
Screen Shot 2023-01-24 at 21.17.37.png

下記のtest~~を選択
Screen Shot 2023-01-24 at 21.23.46.png

[myTestProject12345]を選択(リソースグループ名)
Screen Shot 2023-01-24 at 21.19.15.png

前にデプロイしたのを上書きしますがよろしいですかと問われるが[Deploy]を選択
Screen Shot 2023-01-24 at 21.19.33.png

画面右下にDeploying to ~~と出てきたら5分程度待機
Screen Shot 2023-01-24 at 21.20.55.png

画面右下にDeployment to ~~ completedと表示されたら完了
Browse Website選択すると、Webアプリが立ち上がる
Screen Shot 2023-01-24 at 21.23.17.png

実行結果

このような画面が出てくる
Screen Shot 2023-01-24 at 21.34.53.png

値入力
Screen Shot 2023-01-24 at 21.36.15.png

確定選択
Screen Shot 2023-01-24 at 21.36.23.png

データベース確認

Azureにログイン後、[全てのリソース]を選択し、[SQLデータベース]選択
Screen Shot 2023-01-24 at 21.38.07.png

[クエリエディター(プレビュー)]を選択後、ログイン
Screen Shot 2023-01-24 at 21.41.19.png
]

開いたあと、テーブル>dbo.usersの右にある[・・・]をクリック
[データを編集します(プレビュー)]を選択
Screen Shot 2023-01-24 at 21.44.03.png

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

最後に

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1