Paano I-deploy ang Go + Templ + HTMX + TailwindCSS sa Production

Sa artikulong ito, ipapakita ko sa iyo kung paano i-deploy ang GoTTH stack (Go Templ htmx tailwind) sa produksyon.

Kamakailan ay nilikha ko ang aking sariling cryptocurrency exchange aggregator na tinatawag na cyphergoat ; hahanapin ka nito ang pinakamahusay na rate upang ipagpalit ang iyong crypto mula sa iba't ibang pinagsosyong palitan.

Ito ay may dalawang bahagi:

1. Isang API na nakikipag-ugnayan sa mga palitan. Nakasulat sa go at gumagamit ng gin.

   
   

2. Ang Web UI ay nakasulat sa go at gumagamit ng kumbinasyon ng HTML, HTMX, tailwindcss, CSS, at Javascript sa mga template ng templ. Aka ang GoTTH stack. Nakikipag-ugnayan ito sa API upang makahanap ng mga rate atbp.

Ang napaka-cool sa stack at setup na ito ay nagagawa naming gumawa ng isang binary na kasama ang lahat para sa bawat bahagi at ipadala ito sa server. Sa panig ng webui, posible ito dahil ang HTML ay pinagsama-sama sa go code gamit ang templ at pagkatapos ay ipinadala kasama ang binary.

Sa artikulong ito, susuriin ko ang aking pag-setup upang gawing mas madali para sa iyo na gumawa ng ganito.

Setup

Gumagamit ako ng Debian 12 server na maglalantad sa aking aplikasyon sa pamamagitan ng Cloudflare tunnels. Ang lahat ng mga static na file ay inihahatid sa pamamagitan ng nginx at ang API at mga binary ng website ay pinapatakbo bilang mga serbisyo ng systemd.

Sa gabay na ito, ipapakita ko sa iyo kung paano ko ito ise-set up.

Ang Setup

Mayroon akong isang folder sa aking dev machine na tinatawag na cyphergoat: Naglalaman ito ng:

 api/ web/ builds/

Nasa folder ng API ang source code ng API. Nasa web ang source code ng website.

At ang mga build ay naglalaman ng lahat ng mga build na na-deploy sa server.

Hangin ng buntot

Ang unang tunay na hamon ay dumating sa tamang pag-set up ng tailwindcss.

Sa aking proyekto sa web, mayroon akong isang static na folder na partikular para sa mga static na file. Sa loob nito, mayroon akong dalawang file:

 /web styles.css tailwind.css

Ang styles.css ay naglalaman lamang ng:

 @import "tailwindcss";

Ang tailwind.css file ay kung saan ise-save ng tailwind-cli ang mga bagay nito.

Upang bumuo ng mga bagay na tailwind, tumakbo lang ako:

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

(ipagpalagay na mayroon kang naka-install na tailwind-cli)

Sa aking header.templ file (ang header ng lahat ng mga pahina), sa itaas mayroon akong:

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

At ang mga file ay inihahatid gamit ang Echo's e.Static (sa aking main.go file).

 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

Sa aking server side, mayroon akong Debian 12 vm na tumatakbo sa proxmox.

Sa home directory ng aking mga user, mayroon akong folder na may mga sumusunod na nilalaman:

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

Ang static na folder ay naglalaman ng lahat ng mga static na file (kabilang ang tailwind.css at styles.css), at ang web at API ay ang mga binary.

Mayroon akong dalawang systemd services para sa mga executable na ito:

Ang 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

At 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

Parehong pag-aari ng pangkat na www-data (malamang na hindi ito kailangan para sa API) upang gawing mas madali ang pagsilbi sa kanila sa pamamagitan ng nginx.

Nginx

Ang website ay nakikipag-ugnayan sa API, ngunit kailangan ko pa ring gawing accessible ang web-ui.

Nag-set up ako ng isang nginx site na may sumusunod na configuration: /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; }

Nag-set up din ako ng certbot para magkaroon ng SSL cert.

Maaari mong itakda ang certbot sa pamamagitan ng pagpapatakbo:

 sudo apt install certbot python3-certbot-nginx -y

Bumuo ng SSL cert:

 sudo certbot --nginx -d cyphergoat.com

Basahin ang Self host ng iyong sariling website para sa mas malalim na pag-setup ng nginx.

Mga Cloudflare Tunnel

Kasalukuyan kong ginagawang naa-access ang aking website gamit ang mga pahina ng Cloudflare. Ito ay isang napakadaling gamitin na solusyon sa port-forwarding.

Upang gawin ito, kakailanganin mo ng Cloudflare account at isang domain na nakaturo sa Cloudflare.

Una, pumunta sa Zero Trust Dashboard .

Sa ilalim ng Networks mag-click sa Tunnels, at pagkatapos ay Create a tunnel.

Kapag nalikha na, dapat kang Install and run a connector ; sundin ang mga tagubilin sa page para sa iyong partikular na setup.

Pagkatapos tumakbo ang connector, dapat kang mag-click sa tab na Public Hostname at Add a public hostname .

Ngayon, dapat kang makakita ng ganito:

Punan ang impormasyon tulad ng mayroon ako. Ang uri ng serbisyo ay dapat HTTP , at ang URL ay dapat na 127.0.0.1:80 o localhost:80.

Malinaw, walang dahilan upang gawing naa-access ng publiko ang iyong API kapag nagde-deploy ng iyong website.

Deployment

Upang mai-deploy ang aking mga binary, nagpatuloy ako at gumawa ng mabilis na script ng 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/

Ang script ay bubuo ng API, bubuo ng mga templ na file na bubuo ng WebUI, at pagkatapos ay ipapadala ang lahat sa aking server (kabilang ang static na folder).

Pagkatapos ay nag-ssh ako sa aking server:

ssh user@ip

At pagkatapos ay i-restart ang mga serbisyo.

sudo systemctl restart cg-api cg-web

At ayun na nga.

Sumali sa aking libreng newsletter

Mga Kaugnay na Artikulo

Simpleng Paglilimita sa Rate sa Go (Gin)

Paano bumuo ng isang URL shortener sa Go

Paano i-deploy ang Django sa produksyon

© 2025 4rkal CC BY-SA SUBSCRIBE