Jak nasadit Go + Templ + HTMX + TailwindCSS do produkce

V tomto článku vám ukážu, jak nasadit GoTTH stack (Go Templ htmx tailwind) do produkce.

Nedávno jsem vytvořil svůj vlastní burzovní agregátor kryptoměn s názvem cyphergoat ; najde vám nejlepší kurz pro výměnu kryptoměn z různých partnerských burz.

Má dvě části:

1. API, které komunikuje s burzami. Napsáno in go a používá gin.

   
   

2. Webové uživatelské rozhraní je napsáno in go a používá kombinaci HTML, HTMX, tailwindcss, CSS a Javascript v šablonách templ. Známý jako GoTTH stack. Interaguje s API, aby našel sazby atd.

Co je na tomto stohu a nastavení extrémně cool, je to, že jsme schopni vytvořit jeden binární soubor se vším, co je součástí každého dílu, a poslat ho na server. Na straně webu je to možné, protože HTML je zkompilováno do kódu go pomocí templ a poté odesláno s binárním kódem.

V tomto článku projdu své nastavení, abych vám usnadnil vytvoření něčeho takového.

Nastavení

Používám server Debian 12, který zpřístupní moji aplikaci prostřednictvím tunelů Cloudflare. Všechny statické soubory jsou obsluhovány prostřednictvím nginx a binární soubory API a webových stránek jsou spuštěny jako služby systemd.

V této příručce vám ukážu, jak jsem to nastavil.

Nastavení

Na svém dev stroji mám jedinou složku s názvem cyphergoat: Obsahuje:

 api/ web/ builds/

Složka API obsahuje zdrojový kód API. Web obsahuje zdrojový kód webu.

A sestavení obsahuje všechna sestavení, která jsou nasazena na server.

Zadní vítr

První opravdová výzva přichází se správným nastavením tailwindcss.

Ve svém webovém projektu mám statickou složku speciálně pro statické soubory. Uvnitř mám dva soubory:

 /web styles.css tailwind.css

styles.css jednoduše obsahuje:

 @import "tailwindcss";

Soubor tailwind.css je místo, kam tailwind-cli uloží své věci.

Abych vytvořil věci na zadní vítr, jednoduše spustím:

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

(za předpokladu, že máte nainstalovaný tailwind-cli)

V mém souboru header.templ (záhlaví všech stránek) mám nahoře:

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

A soubory jsou obsluhovány pomocí Echo's e.Static (v mém souboru 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 }

Server

Na straně mého serveru mám Debian 12 vm běžící na proxmox.

V domovském adresáři uživatelů mám složku s následujícím obsahem:

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

Statická složka obsahuje všechny statické soubory (včetně tailwind.css a styles.css) a web a API jsou binární soubory.

Pak mám dvě služby systemd pro tyto spustitelné soubory:

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

A 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

Oba jsou ve vlastnictví skupiny www-data (to pravděpodobně není nutné pro API), aby bylo snazší je obsluhovat přes nginx.

Nginx

Web komunikuje s API, ale stále potřebuji zpřístupnit webové rozhraní.

Nastavil jsem web nginx s následující konfigurací: /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; }

Také jsem nastavil certbota, aby měl certifikát SSL.

Certbota můžete nastavit spuštěním:

 sudo apt install certbot python3-certbot-nginx -y

Vygenerujte certifikát SSL:

 sudo certbot --nginx -d cyphergoat.com

Pro podrobnější nastavení nginx si přečtěte článek Vlastní hostování vlastního webu .

Tunely Cloudflare

V současné době zpřístupňuji svůj web pomocí stránek Cloudflare. Je to extrémně snadno použitelné řešení přesměrování portů.

K tomu budete potřebovat účet Cloudflare a doménu směřující na Cloudflare.

Nejprve přejděte na panel Zero Trust Dashboard .

V části Networks klikněte na Tunnels, a poté Create a tunnel.

Po vytvoření byste měli Install and run a connector ; postupujte podle pokynů na stránce pro konkrétní nastavení.

Po spuštění konektoru byste měli kliknout na kartu Public Hostname a Add a public hostname .

Nyní byste měli vidět něco takového:

Vyplňte informace, jak mám já. Typ služby by měl být HTTP a adresa URL by měla být 127.0.0.1:80 nebo localhost:80.

Je zřejmé, že není důvod zpřístupňovat vaše API veřejnosti při nasazování vašeho webu.

Nasazení

Abych nasadil své binární soubory, pokračoval jsem a vytvořil rychlý bash skript:

 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/

Skript vytvoří API, vygeneruje soubory templ, vytvoří WebUI a poté vše odešle na můj server (včetně statické složky).

Poté ssh na svůj server:

ssh user@ip

A potom restartujte služby.

sudo systemctl restart cg-api cg-web

A je to.

Připojte se k mému bezplatnému newsletteru

Související články

Jednoduché omezení rychlosti v Go (Gin)

Jak vytvořit zkracovač URL v Go

Jak nasadit Django do výroby

© 2025 4rkal CC BY-SA PŘEDPLATIT