さくらのレンタルサーバ×さくらのVPS×さくらのクラウドで廉価にWebアプリを構築する
はじめに
少しずつ機能拡張が進んできたさくらのクラウドですが、AppRunが正式リリースされたことで、マネージドサービスだけでもサービス構築ができるようになりました(参考記事)。一方で、スモールスタートしたい場合には、やや高価になる場合があるのも事実です。
今回は、コストパフォーマンスの高いさくらのレンタルサーバとさくらのVPSを組み合わせることで、比較的低コストでWebアプリケーションを構築する方法を検証しました。ともに固定料金のサービスであることから、見積もりも容易になります。
本記事は、Linuxおよびネットワークの基本的な知識を有する方を対象としています。
アプリケーションの内容は上記参考記事と同じ、撮影計画を支援するスケジューリングアプリです。
構成図は以下の通りです。

シングルページアプリケーション(SPA)をさくらのレンタルサーバでホストし、APIサーバはさくらのVPSで動かします。
さくらのVPSをブリッジ接続を用いてデータベースアプライアンス(MariaDB)に閉域接続することで、クエリを投げられるようにしています。データベースの認証情報は、シークレットマネージャから取得します。
利用が増えてきたらさくらのVPSをスケールアップしたり、AppRun専有型に移行したりできる、拡張性の高いアーキテクチャにしました。
さくらのクラウド基盤構築
まずさくらのクラウドの基盤を構築していきます。
要素が多いため、今回はIaCツールの1つであるTerraformを用います。昨年12月にv3にメジャーアップデートされたので、本記事ではこのバージョンを利用します。
Terraformについてもさくナレに参考記事がありますので、よければ参考にしてみてください。
Terraform実行
以下のようなTerraformソースを準備しました。フルバージョンはGitHubのリポジトリをご覧ください。
resource "sakura_kms" "database_key" {
name = "データベース暗号化キー"
description = "データベースディスクを暗号化するためのKMSキー。"
key_origin = "generated"
}
resource "sakura_secret_manager" "database_secret" {
name = "データベース認証情報シークレット"
description = "データベース認証情報を格納するためのSecret Managerシークレット。"
kms_key_id = sakura_kms.database_key.id
}
resource "sakura_secret_manager_secret" "database_secret_value" {
name = "database_secret_value"
vault_id = sakura_secret_manager.database_secret.id
value_wo = jsonencode({
database_name = var.database_username
host = var.database_ip
port = var.database_port
username = var.database_username
password = var.database_password
})
value_wo_version = 1
}
resource "sakura_bridge" "bridge_for_vps" {
name = "VPS接続用ブリッジ"
description = "VPSとデータベースを接続するためのブリッジ。"
}
resource "sakura_vswitch" "switch_for_database" {
name = "データベース接続用スイッチ"
description = "VPSとデータベースを接続するためのスイッチ。"
bridge_id = sakura_bridge.bridge_for_vps.id
icon_id = var.database_icon
zone = var.zone
}
resource "sakura_database" "movie_scheduler_database" {
name = "撮影計画支援電算処理システムDB"
description = "撮影計画支援電算処理システム用のMariaDB。"
backup = {
days_of_week = ["mon"]
time = "04:00"
}
network_interface = {
vswitch_id = sakura_vswitch.switch_for_database.id
ip_address = var.database_ip
netmask = 24
gateway = var.database_gateway
port = var.database_port
source_ranges = var.database_source_ranges
}
username = var.database_username
password_wo = var.database_password
password_wo_version = 1
database_type = "mariadb"
database_version = "10.11"
disk = {
encryption_algorithm = "aes256_xts"
kms_key_id = sakura_kms.database_key.id
}
icon_id = var.database_icon
monitoring_suite = {
enabled = true
}
# 基盤が弱いため、キャッシュはOFFにする
parameters = {
event_scheduler = "OFF"
innodb_buffer_pool_size = 134217728
log_warnings = 2
long_query_time = 10
max_allowed_packet = 16777216
max_connections = 100
query_alloc_block_size = 8192
query_cache_limit = 1048576
query_cache_min_res_unit = 4096
query_cache_size = 536870912
query_cache_type = 0
query_cache_wlock_invalidate = "OFF"
query_prealloc_size = 8192
slow_query_log = "ON"
sort_buffer_size = 2097152
sql_mode = "STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"
tmpdir = "/tmp"
}
plan = "10g"
zone = var.zone
}
このソースを反映することで、以下が構築されます(モニタリングスイートは、先にストレージだけ作成しておく必要があります)。

実際に構築します。以下のコマンドを実行します。
terraform init
terraform apply

しばらく待つと、無事基盤が構築されました。

Terraformでは反映できない部分について、一部修正をしていきます。
データベースのWeb UI有効化
データベースのWeb UIを有効化します。コントロールパネルにアクセスし、データベース設定欄を開きます。

設定情報を編集、Web UIを有効化し、反映します。

いったんさくらのクラウドの操作は以上です。後程ブリッジ接続を設定します。
さくらのVPS基盤構築
次に、さくらのVPSを構築していきます。1Gプランで、OSはUbuntu 24.04を選択しました。SSHキーは任意のものを登録します。

スタートアップスクリプトは、「Setup and update」の利用を推奨します。基本的な設定を一通り実施できます。1GBではややメモリが少ないので、このスタートアップスクリプトを用いて1GBのスワップも作成しました。

パケットフィルタの設定では、SSHとWeb向けのポートを開放します。SSHのポートは、送信元IPアドレスを運用担当者のグローバルIPアドレスに絞ることを推奨します。

続けてスイッチを作成します。さくらのクラウド側のスイッチからブリッジ接続するためのものです。

作成後、さくらのVPSのネットワークインターフェースのNIC2にそのスイッチを接続します。

さくらのクラウドの画面に戻り、ブリッジ接続にVPSスイッチ接続を設定します。

ネットワーク接続は確立されました。ただし、この状態ではまださくらのVPSのNIC2にIPアドレスが付与されていないため、データベースとは通信できません。データベースは192.168.1.12からのリクエストのみを受け付けるように設定しています。
そこでTeraTermを用いてさくらのVPSにSSH接続し、99-private-network.yamlを作成、IPアドレス設定を反映させました。
sudo nano /etc/netplan/99-private-network.yaml
network:
version: 2
ethernets:
ens4:
addresses:
- 192.168.1.12/24
sudo netplan apply
これで、以下が構築できました。

試しに、さくらのVPSにSSH接続し、さくらのVPS経由でデータベースを操作します。
以下のコマンドをローカル端末で実行します。
ssh -i "SSHログイン用秘密鍵のパス" -L 7777:192.168.1.11:443 -p SSHポート VPSのOSユーザID@VPSのグローバルIPアドレス
続けて、ブラウザでlocalhost:7777を呼び出すと……

最初警告は出ますが、無事データベースに接続できました。アプリケーションに必要なテーブルやユーザは、ここで操作することができます。
ドメイン設定
最後に、さくらのVPSにドメインでアクセスできるようにします。さくらのVPS操作画面のネットワークタブからIPアドレスを取得します。

続けてドメインを発行、ネームサーバのAおよびAAAAレコードにさくらのVPSのIPアドレスを設定します。
今回はレンタルサーバで筆者が契約しているドメインのサブドメインを発行し、レコード設定もレンタルサーバのコントロールパネル上で行いました。


これでネットワークレイヤーはほぼ完成です。

HTTPS対応とnginx+SiteGuard Server Editionのインストールも続けて行いました。nginxでHTTPSリクエストを受け付け、パスベースでDockerコンテナのポートに振り分けるような設定も行っています。
詳細は本記事の範囲外のため割愛します。Qiitaの方で記事にしましたので、よければご覧ください。
最後、VPS上でDockerをインストールします。
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
サーバ用のソースをWinSCPで転送し、

転送したディレクトリ上で以下のコマンドを実行しました。
sudo docker compose up -d
無事Dockerコンテナが起動します。

/healthで疎通できるようにサーバーロジックを設定しているので、念のためブラウザで疎通確認します。

無事、インターネットからリクエストを受け付けられる状態になりました。さくらのVPSの設定は以上です。
さくらのレンタルサーバ
最後にSPAをレンタルサーバでホストします。
さくらのVPSの時同様にサブドメインを発行しました。ただし、今回はもう1手間加えます。HTTPS対応です。
レンタルサーバの操作画面で、発行したサブドメインにSSL証明書を登録します。今回は個人でホストするだけなので、Let's Encryptで十分です。

発行できたら、あとはドメイン設定でSSLの利用を有効化するだけです。

ドメインに対応させるディレクトリは任意に設定し、WinSCPを用いてWebページの資源を転送します。

ブラウザでそのドメインを叩くと、いよいよページが表示されました。

データを入力してボタンを押下すると無事API経由でデータベースと疎通し、IDが発行されました。これで完成です!

まとめ
今回はさくらのレンタルサーバ×さくらのVPS×さくらのクラウドを組み合わせ、Webアプリケーションを構築してみました。
フルマネージド版の記事にも書きましたが、この構成であればさくらのクラウドでフルマネージドで組むより7割ほど安く構築することができます。
さくらインターネットでは、さくらのクラウド以外にも様々なサービスを展開しています。横断的に利用することで幅広いユースケースに対応できますので、ぜひ前向きにご検討ください。