Zenn
🌎

CaddyでWebアプリを動かす（Django, Sveltekit, PostgreSQL）

2024/06/19に公開
django
PostgreSQL
VPS
SvelteKit
Caddy
tech

言語習得のために発音を反復練習するアプリを作成しました。

VPSサーバにはローカルPCから、rsyncでアプリのディレクトリを同期しています。
rsyncに関してはこちらの記事に記載しています。

環境

フロントエンド：Sveltekit
バックエンド：Django, Django Rest Framework, gunicorn
データベース：PostgreSQL

サーバー：さくらのVPS Debian Linux 12 amd64
HTTPSサーバー：Caddy
Github

VPSサーバにssh接続

USER_NAME: ssh接続先ログインユーザー名
HOST: ssh接続先ホスト

$ ssh -l {USER_NAME} {HOST}

postgreSQL構築

pythonとpostgreSQLをインストール

sudo apt install python3 python3-pip
sudo apt install postgresql postgresql-contrib

debian上でpostgreSQL用の新しいユーザーを作成

$ sudo adduser newusername
$ sudo awk -F':' '{ print $1}' /etc/passwd # ユーザー一覧を表示

新しいデータベースを作成

$ su -u postgres # ログイン
$ su createdb newdb

先ほど作ったユーザーを、新しいデータベースのオーナーにする

$ psql
postgres=# alter database newdb owner to newusername;

Django構築

django用のユーザーを作成し、ログインする。

$ sudo adduser djangouser
$ sudo usermod -aG sudo djangouser # sudoユーザーにする
$ sudo su - djangouser # ログイン

poetryをインストール。公式ドキュメントに沿って行う。

$ cd /srv/django-app
$ poetry shell # virtual envを開く
$ poetry install
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py createsuperuser
$ python manage.py collectstatic

こちらのチュートリアルを参考にしました。
今回の開発ではpoetryを使っていますが、チュートリアルのままvenvで開発してもいいと思います。
nginxのチュートリアル部分は使わないです。代わりに後述のCaddyでreverse_proxyなどの指定をします。
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu

Sveltekit

SSGで生成されたbuildファイルを使います。Static site generation

  • adaptor-staticをインストール
  • SPAモードのため、fallback.htmlが必要。Caddyfileで指定が必要になる。

src/routes/+layout.ts

export const prerender = true;
export const ssr = false;
export const trailingSlash = "always";

svelte.config.js

import adapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      pages: "build",
      assets: "build",
      fallback: "fallback.html",
      precompress: false,
      strict: true,
    }),
  },
};

export default config;

.env.production

VITE_API_BASE_URL="https://example.com"

buildファイルを生成して、rsyncでVPSに複製する。

$ npm install
$ npm run build

この後、rsyncで複製！参考
Github repo

  • 追記
    rsyncでバックエンドを更新した時
$ sudo systemctl daemon-reload
$ sudo systemctl restart gunicorn

Caddy

nginxの代わりに、CaddyでWeb serverを立てます。(https://caddyserver.com/)
TLSを設定と更新をしてくれます・・、すごい。
SPAアプリのフォールバックの指定などではまったので、設定を残しておきます。
参考

hostname {
	@svelte {
		not path /api/v1/*
		not path /api-auth/*
		not path /media/*
	}
	handle_path /media/* {
            # django media static files
		root * /srv/hatsuon-app/media
		file_server
	}
	handle {
		reverse_proxy unix//run/gunicorn.sock
	}
	handle @svelte {
		root * /srv/hatsuon-app/svelte-kit/build
		try_files {path} {path}/ fallback.html
		file_server
	}
	log {
		output stdout
	}
}

systemd Caddy servicefile

以下の記事を参考にしました。
How To Host a Website with Caddy on Ubuntu 18.04

  • 追記
    rsyncでフロントエンドを更新した時
$ sudo systemctl reload caddy

Discussion