Как да внедрите Go + Templ + HTMX + TailwindCSS в производствена среда

В тази статия ще ви покажа как да внедрите GoTTH стека (Go Templ htmx tailwind) в производствена среда.

Наскоро създадох свой собствен агрегатор за обмен на криптовалута, наречен cyphergoat ; той ви намира най-добрия курс за размяна на вашите крипто от различни партньорски борси.

Състои се от две части:

1. API, който взаимодейства с борсите. Написано на go и използва gin.

   
   

2. Уеб потребителският интерфейс е написан на go и използва комбинация от HTML, HTMX, tailwindcss, CSS и Javascript в templ шаблони. Известен още като GoTTH стека. Той взаимодейства с API, за да намери тарифи и т.н.

Това, което е изключително страхотно с този стек и настройка, е, че можем да произведем един двоичен файл с всичко включено за всяка част и да го изпратим до сървъра. От страна на webui това е възможно, тъй като HTML се компилира в go код с помощта на templ и след това се доставя с двоичния файл.

В тази статия ще прегледам моята настройка, за да ви улесня да направите нещо подобно.

Настройка

Използвам сървър Debian 12, който ще изложи приложението ми чрез тунели на Cloudflare. Всички статични файлове се обслужват чрез nginx, а API и двоичните файлове на уебсайта се изпълняват като системни услуги.

В това ръководство ще ви покажа как настройвам това.

Настройката

Имам една папка на моята машина за разработка, наречена cyphergoat: Тя съдържа:

 api/ web/ builds/

Папката API съдържа изходния код на API. В мрежата се съхранява изходният код на уебсайта.

И компилациите съдържат всички компилации, които са разположени на сървъра.

Попътен вятър

Първото истинско предизвикателство идва с правилното настройване на tailwindcss.

В моя уеб проект имам статична папка специално за статични файлове. В него имам два файла:

 /web styles.css tailwind.css

styles.css просто съдържа:

 @import "tailwindcss";

Файлът tailwind.css е мястото, където tailwind-cli ще запази своите неща.

За да създам нещата за попътен вятър, просто стартирам:

 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">

И файловете се обслужват с помощта на e.Static на Echo (в моя 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 }

сървър

От страна на моя сървър имам Debian 12 vm, работещ на proxmox.

В моята потребителска домашна директория имам папка със следното съдържание:

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

Статичната папка съдържа всички статични файлове (включително tailwind.css и styles.css), а уеб и API са двоичните файлове.

След това имам две системни услуги за тези изпълними файлове:

Файлът 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.

Nginx

Уебсайтът комуникира с API, но все още трябва да направя уеб интерфейса достъпен.

Настроих 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; }

Също така съм настроил certbot да има SSL сертификат.

Можете да зададете certbot, като стартирате:

 sudo apt install certbot python3-certbot-nginx -y

Генерирайте SSL сертификата:

 sudo certbot --nginx -d cyphergoat.com

Прочетете Сами хоствайте свой собствен уебсайт за по-задълбочена настройка на nginx.

Тунели Cloudflare

В момента правя уебсайта си достъпен с помощта на страници на Cloudflare. Това е изключително лесно за използване решение за пренасочване на портове.

За да направите това, ще ви трябва акаунт в 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.

Очевидно няма причина да направите своя 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, ще генерира templ файловете, ще изгради WebUI и след това ще изпрати всичко до моя сървър (включително статичната папка).

След това влизам чрез ssh в моя сървър:

ssh user@ip

След това рестартирайте услугите.

sudo systemctl restart cg-api cg-web

И това е.

Присъединете се към моя безплатен бюлетин

Свързани статии

Обикновено ограничаване на скоростта в Go (Gin)

Как да създадете програма за съкращаване на URL адреси в Go

Как да внедрите Django в продукция

© 2025 4rkal CC BY-SA АБОНИРАЙТЕ СЕ