Go + Templ + HTMX + TailwindCSS を本番環境にデプロイする方法

この記事では、GoTTH スタック (Go Templ htmx tailwind) を本番環境にデプロイする方法を説明します。

私は最近、 cyphergoatという独自の暗号通貨交換アグリゲーターを作成しました。これは、さまざまな提携取引所から暗号通貨を交換するための最適なレートを見つけます。

2つの部分から構成されています:

1. 取引所とやりとりする API。Go で書かれており、Gin を使用します。

   
   

2. Web UI は Go で記述されており、テンプレートでは HTML、HTMX、tailwindcss、CSS、Javascript の組み合わせを使用します。別名、GoTTH スタック。料金などを見つけるために API と対話します。

このスタックとセットアップの非常に優れた点は、各パーツのすべてを含んだ単一のバイナリを作成し、それをサーバーに送ることができることです。WebUI 側では、HTML が templ を使用して Go コードにコンパイルされ、バイナリとともに送られるため、これが可能になります。

この記事では、このようなものを簡単に作成できるように、私のセットアップについて説明します。

設定

私は、Cloudflare トンネル経由でアプリケーションを公開する Debian 12 サーバーを使用しています。すべての静的ファイルは nginx 経由で提供され、API と Web サイトのバイナリは systemd サービスとして実行されます。

このガイドでは、これをどのように設定するかを説明します。

セットアップ

私の開発マシンには cyphergoat という 1 つのフォルダーがあります。その中には次のものが含まれています。

 api/ web/ builds/

API フォルダーには API ソース コードが格納されます。Web には Web サイトのソース コードが格納されます。

ビルドには、サーバーにデプロイされたすべてのビルドが格納されます。

追い風

最初の本当の課題は、tailwindcss を正しく設定することです。

私の Web プロジェクトには、静的ファイル専用の static フォルダーがあります。その中には、次の 2 つのファイルがあります。

 /web styles.css tailwind.css

styles.cssには次の内容が含まれます。

 @import "tailwindcss";

tailwind.css ファイルは、tailwind-cli が内容を保存する場所です。

Tailwind のものを構築するには、次のコマンドを実行するだけです:

 npx @tailwindcss/cli -i ./static/styles.css -o ./static/tailwind.css --watch

(tailwind-cli がインストールされていることを前提としています)

私の header.templ ファイル (すべてのページのヘッダー) の上部には次の内容があります。

 <link href="/static/tailwind.css" rel="stylesheet"> <link href="/static/styles.css" rel="stylesheet">

そして、ファイルは Echo の e.Static (main.go ファイル内) を使用して提供されています。

 func main(){ e := echo.New() e.Use(middleware.Logger()) e.Use(middleware.Recover()) e.Use(middleware.Secure()) e.Static("/static", "static") // Serves content from static folder. // Rest of the handlers }

サーバ

私のサーバー側では、proxmox 上で Debian 12 VM を実行しています。

ユーザーのホーム ディレクトリに、次の内容のフォルダーがあります。

 cyphergoat/ ├── api ├── static/ └── web

static フォルダーにはすべての静的ファイル (tailwind.css および styles.css を含む) が含まれ、 WebとAPI はバイナリです。

これらの実行可能ファイルには 2 つの systemd サービスがあります。

cg-api.service /etc/systemd/system/cg-api.service

 [Unit] Description=CypherGoat API After=network.target [Service] User=arkal Group=www-data WorkingDirectory=/home/arkal/cyphergoat ExecStart=/home/arkal/cyphergoat/api Restart=always RestartSec=1 [Install] WantedBy=multi-user.target

そしてcg-web.service /etc/systemd/system/cg-web.service

 [Unit] Description=CypherGoat Web After=network.target [Service] User=arkal Group=www-data WorkingDirectory=/home/arkal/cyphergoat ExecStart=/home/arkal/cyphergoat/web [Install] WantedBy=multi-user.target

両方ともwww-dataグループによって所有されており (API ではおそらくこれは不要)、nginx 経由での提供が容易になります。

エンギンクス

ウェブサイトは API と通信していますが、Web UI にアクセスできるようにする必要があります。

私は次の設定で nginx サイトをセットアップしました: /etc/nginx/sites-available/cg

 server { server_name cyphergoat.com; location / { proxy_pass http://127.0.0.1:4200; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /var/www/static/; expires 30d; } # Optional robots.txt location = /robots.txt { root /var/www/static; access_log off; log_not_found off; } listen 80; }

SSL 証明書を取得するために certbot も設定しました。

次のコマンドを実行して certbot を設定できます。

 sudo apt install certbot python3-certbot-nginx -y

SSL 証明書を生成します:

 sudo certbot --nginx -d cyphergoat.com

より詳細な nginx 設定については、「独自の Web サイトをセルフホストする」をお読みください。

Cloudflare トンネル

現在、私は Cloudflare ページを使用して自分の Web サイトにアクセスできるようにしています。これは非常に使いやすいポート転送ソリューションです。

これを行うには、Cloudflare アカウントと Cloudflare を指すドメインが必要になります。

まず、ゼロ トラスト ダッシュボードに移動します。

Networksの下でTunnels, Create a tunnel.

作成したら、 Install and run a connector必要があります。特定のセットアップについては、ページの指示に従ってください。

コネクタが実行されたら、 Public Hostnameタブをクリックして、 Add a public hostname 。

すると、次のような画面が表示されます。

私が入力した情報と同じ情報を入力してください。サービス タイプはHTTP 、URL は127.0.0.1:80またはlocalhost:80.

当然ですが、Web サイトを展開するときに API をパブリックにアクセス可能にする必要はありません。

展開

バイナリを展開するために、簡単な bash スクリプトを作成しました。

 cd api go build -o ../builds/ . cd ../web templ generate && go build -o ../builds/web cmd/main.go cd .. rsync -urvP ./builds/ user@SERVER:/home/user/cyphergoat rsync -urvP ./web/static user@SERVER:/home/user/cyphergoat/ rsync -urvP ./api/coins.json user@SERVER:/user/user/cyphergoat/

スクリプトは API を構築し、テンプレート ファイルを生成して WebUI を構築し、すべてをサーバーに送信します (静的フォルダーを含む)。

次にサーバーにSSHで接続します。

ssh user@ip

その後、サービスを再起動します。

sudo systemctl restart cg-api cg-web

以上です。

無料のニュースレターにご登録ください

関連記事

Go でのシンプルなレート制限 (Gin)

Go で URL 短縮サービスを構築する方法

Django を本番環境にデプロイする方法

© 2025 4rkal CC BY-SA購読する