SvelteとGoでWebアプリ開発環境を構築してみた

[sst_book]
aws_access_key_id={Access Key}
aws_secret_access_key={Secret Access Key}

$ curl https://get.volta.sh | bash

export VOLTA_HOME=$HOME/.volta
export PATH=$PATH:$VOLTA_HOME/bin

$ source ~/.bashrc

$ volta --version
Volta 1.1.1

$ volta install node@18.18.2

$ node --version
v18.18.2

$ npm install -g pnpm

$ pnpm --version
8.9.0

$ brew install go

export GOPATH=$HOME/go
export PATH=$GOPATH/bin:$PATH

$ go install golang.org/dl/go1.21.3@latest
$ go1.21.3 download

export PATH=$(go1.21.3 env GOROOT)/bin:$PATH

$ go version
go version go1.21.3 darwin/arm64

$ pnpx create-sst@latest click_count

$ cd click_count
$ pnpm install

$ volta pin node@18.18.2

$ pnpx create-svelte@latest packages/frontend

$ cd packages/frontend
$ pnpm install
$ volta pin node@18.18.2
$ cd ../..

$ rm -rf packages/functions/*

$ cd packages/functions
$ go mod init counter
$ cd ../../

$ mkdir packages/functions/handlers

package main

import (
	"context"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
)

// 処理を行うハンドラー
func handler(ctx context.Context) (events.APIGatewayProxyResponse, error) {
	// API Gatewayのレスポンスとして、ステータスコード200と文字列を返す
	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       "Hello, World!",
	}, nil
}

// main関数
func main() {
	// ハンドラーを登録して実行
	lambda.Start(handler)
}

$ cd packages/functions
$ go mod tidy
$ cd ../../

import {Api, StackContext, Table, SvelteKitSite} from "sst/constructs";


export function ExampleStack({ stack }: StackContext) {
    // DynamoDB テーブルを作成
    const table = new Table(stack, "counter", {
        fields: {
            counter: "string",
        },
        primaryIndex: {partitionKey: "counter"}, // パーティションキーを設定
    });

    // API GatewayエンドポイントとLambdaを作成
    const api = new Api(stack, "api", {
        // 全Lambda関数の共通設定
        defaults: {
            function: {
                bind: [table], // DynamoDBテーブルをバインド
                runtime: "go", // ランタイムをGoに設定
            },
        },
        // APIエンドポイントの設定
        routes: {
            "GET /hello": "packages/functions/handlers/hello.go",
        },
    });

    // SvelteKitのデプロイ設定
    const site = new SvelteKitSite(stack, "SvelteSite", {
        path: "packages/frontend", // デプロイするディレクトリを指定
        environment: {
           PUBLIC_API_ENDPOINT: api.url, // APIエンドポイントを環境変数に設定
        },
    });

    // 値の出力
    stack.addOutputs({
        SiteUrl: site.url, // フロントエンドのURL
        ApiEndpoint: api.url, // APIエンドポイントのURL
    });
};

import { SSTConfig } from "sst";
import {ExampleStack} from "./stacks/ExampleStack";

export default {
  config(_input) {
    return {
      name: "click-count",
      region: "ap-northeast-1", // us-east-1からap-northeast-1に変更
    };
  },
  stacks(app) {
    app.stack(ExampleStack); // ExampleStackに変更
  }
} satisfies SSTConfig;

$ AWS_PROFILE=sst_book pnpm sst deploy --stage=prod

$ curl https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/hello
Hello, World!

package counter

import (
	"os"
    
	"github.com/pkg/errors"

	"github.com/aws/aws-sdk-go/aws"
	"github.com/aws/aws-sdk-go/aws/session"

	"github.com/guregu/dynamo"
)

// 環境変数からテーブル名を取得。環境変数名はSSTで定義されている命名規則に従う
// https://docs.sst.dev/resource-binding#how-it-works
func tableName() string {
	return os.Getenv("SST_Table_tableName_counter")
}

// DynamoDBに接続する処理
func connect() dynamo.Table {
	sess := session.Must(session.NewSession())
	db := dynamo.New(sess, &aws.Config{Region: aws.String("ap-northeast-1")})
	return db.Table(tableName())
}

$ cd packages/functions
$ go mod tidy

// 追記

// Clicks DynamoDBのデータ構造を表す構造体
type Clicks struct {
	Counter string `dynamo:"counter"` // パーティションキー
	Count   uint64 `dynamo:"count"`   // カウント値
}

// GetCount カウント値を取得する
func GetCount() (uint64, error) {
	// DynamoDBに接続
	table := connect()

	// パーティションキーが"clicks"のデータを取得
	var result Clicks
	err := table.Get("counter", "clicks").One(&result)
	if err != nil {
		if !errors.Is(err, dynamo.ErrNotFound) {
			return 0, err
		}
		result.Count = 0
	}

	// カウント値を返す
	return result.Count, nil
}

package counter

import (
	"context"
	"encoding/json"

	"github.com/aws/aws-lambda-go/events"
)

// Response レスポンスのBodyに入れるデータ構造を定義する
type Response struct {
	Count uint64 `json:"count"` // クリックカウント値
}

// HandlerGet クリックカウント値を返すLambdaハンドラ
func HandlerGet(ctx context.Context) (events.APIGatewayProxyResponse, error) {
	// クリックカウント値を取得
	count, err := GetCount()
	if err != nil {
		return events.APIGatewayProxyResponse{}, err
	}

	// クリックカウント値を含んだJSONレスポンス
	body, err := json.Marshal(Response{
		Count: count,
	})
	if err != nil {
		return events.APIGatewayProxyResponse{}, err
	}

	// API Gateway用のレスポンス
	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       string(body),
	}, nil
}

package main

import (
	"counter"

	"github.com/aws/aws-lambda-go/lambda"
)

func main() {
	lambda.Start(counter.HandlerGet)
}

// UpdateCount カウント値を更新する
func UpdateCount() error {
	// DynamoDBに接続
	table := connect()

	// カウント値を取得
	count, err := GetCount()
	if err != nil {
		return err
	}

	// カウント値を更新
	err = table.Put(Clicks{Counter: "clicks", Count: count + 1}).Run()
	if err != nil {
		return err
	}

	return nil
}

// HandlerUpdate クリックカウント値を更新するLambdaハンドラ
func HandlerUpdate(ctx context.Context) (events.APIGatewayProxyResponse, error) {
	// クリックカウント値を更新
	err := UpdateCount()
	if err != nil {
		return events.APIGatewayProxyResponse{}, err
	}

	// クリックカウント値を取得
	count, err := GetCount()
	if err != nil {
		return events.APIGatewayProxyResponse{}, err
	}

	// クリックカウント値を含んだJSONレスポンス
	body, err := json.Marshal(Response{
		Count: count,
	})
	if err != nil {
		return events.APIGatewayProxyResponse{}, err
	}

	// API Gateway用のレスポンス
	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       string(body),
	}, nil
}

package main

import (
	"counter"

	"github.com/aws/aws-lambda-go/lambda"
)

func main() {
	lambda.Start(counter.HandlerUpdate)
}

routes: {
  "GET /hello": "packages/functions/handlers/hello.go",
  "GET /count": "packages/functions/handlers/get.go", // 追加: カウント取得API
  "POST /count": "packages/functions/handlers/update.go", // 追加: カウント更新API
},

$ AWS_PROFILE=sst_book pnpm sst deploy --stage=prod

$ export ENDPOINT=https://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com
$ curl ${ENDPOINT}/count
{"count":0}

$  curl -XPOST ${ENDPOINT}/count
{"count":1}

import {PUBLIC_API_ENDPOINT} from "$env/static/public";

const endpoint = () => `${PUBLIC_API_ENDPOINT}/count`;

// カウントAPIのレスポンスの型
type ResponseCount = {
    count: number;
};

// カウント取得APIの実行関数
export const getCount = async (): Promise<ResponseCount> => {
    // fetch関数を使ってAPIを実行
    const res = await fetch(endpoint(), {
        method: 'GET',
        mode: 'cors',
    });
    // レスポンスJSONを返す
    return res.json();
};

// カウント更新APIの実行関数
export const updateCount = async (): Promise<ResponseCount> => {
    // fetch関数を使ってカウント更新APIを実行
    const res = await fetch(endpoint(), {
        method: 'POST',
        mode: 'cors',
    });
    // レスポンスJSONを返す
    return res.json();
}

import type { PageLoad } from './$types';
import {getCount} from "$lib";

// load関数は、SvelteKitの機能により、コンポーネントがレンダリングされる前に実行される
export const load: PageLoad = async () => {
    // カウント取得APIでカウントを取得
    return await getCount();
};

<script lang="ts">
    // このコンポーネントで実行される処理を記述する

    import type { PageData } from './$types';
    import {updateCount} from "$lib";

    // +page.tsで定義されたload関数の返り値がここに入る
    // クリックカウント値がこの中に含まれている(data.count)
    export let data: PageData;

    // ボタンがクリックされた場合の処理
    const onClick = async () => {
        // クリックカウント更新APIの実行
        const cnt = await updateCount();
        // クリックカウント値を更新
        data.count = cnt.count;
    };
</script>

<div class="App">
    {#if data.count}<p>You clicked me {data.count} times.</p>{/if}
    <button on:click={onClick}>Click Me!</button>
</div>

<style>
    .App {
        text-align: center;
    }
    p {
        margin-top: 0;
        font-size: 20px;
    }
    button {
        font-size: 48px;
    }
</style>

$ AWS_PROFILE=sst_book pnpm sst deploy --stage=prod

$ AWS_PROFILE=sst_book pnpm sst remove --stage=prod