Go + Templ + HTMX + TailwindCSS-ийг үйлдвэрлэлд хэрхэн байрлуулах вэ

Энэ нийтлэлд би GoTTH стекийг (Go Templ htmx tailwind) үйлдвэрлэлд хэрхэн байрлуулахыг харуулах болно.

Би саяхан Cyphergoat нэртэй криптовалютын солилцооны агрегаторыг бүтээсэн; Энэ нь өөр өөр түншийн биржүүдээс криптогоо солих хамгийн сайн ханшийг олох болно.

Энэ нь хоёр хэсэгтэй:

1. Биржүүдтэй харьцдаг API. Go дээр бичигдсэн бөгөөд жин хэрэглэдэг.

   
   

2. Вэб UI нь go горимд бичигдсэн бөгөөд HTML, HTMX, tailwindcss, CSS, Javascript-ийн хослолыг загвар загварт ашигладаг. GoTTH стек гэж нэрлэнэ. Энэ нь ханш гэх мэтийг олохын тулд API-тай харилцдаг.

Энэхүү стек ба тохиргооны хамгийн гайхалтай зүйл бол бид хэсэг тус бүрт багтсан бүх зүйлийг агуулсан нэг хоёртын файлыг гаргаж, серверт хүргэх боломжтой юм. Webui тал дээр HTML-г templ ашиглан go код болгон хөрвүүлж, хоёртын файлтай хамт илгээдэг тул энэ нь боломжтой юм.

Энэ нийтлэлд би танд иймэрхүү зүйлийг хийхэд хялбар болгохын тулд тохиргоогоо хийх болно.

Тохиргоо

Би Debian 12 сервер ашиглаж байгаа бөгөөд энэ нь миний програмыг Cloudflare туннелээр дамжуулан харуулах болно. Бүх статик файлуудыг nginx-ээр дамжуулж байгаа бөгөөд API болон вэб сайтын хоёртын файлуудыг системийн үйлчилгээ болгон ажиллуулдаг.

Энэ гарын авлагад би үүнийг хэрхэн тохируулахаа харуулах болно.

Тохиргоо

Миний dev машин дээр 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">

Мөн файлуудыг 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

Статик хавтас нь бүх статик файлуудыг (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

Хоёуланг нь nginx-ээр дамжуулан үйлчлэхэд хялбар болгох үүднээс www-data групп эзэмшдэг (энэ нь API-д шаардлагагүй байж магадгүй).

Nginx

Вэбсайт нь API-тай холбогдож байгаа ч би вэб-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 тохиргоог хийхийн тулд өөрийн вэбсайтыг өөрөө зохион байгуулна уу.

Cloudflare туннель

Би одоогоор Cloudflare хуудсуудыг ашиглан вэбсайтаа ашиглах боломжтой болгож байна. Энэ нь ашиглахад маш хялбар порт дамжуулах шийдэл юм.

Үүнийг хийхийн тулд танд Cloudflare данс болон Cloudflare руу чиглэсэн домэйн хэрэгтэй болно.

Эхлээд Zero Trust хяналтын самбар руу очно уу.

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-д энгийн ханшийг хязгаарлах (Жин)

Go дээр URL богиносгогчийг хэрхэн бүтээх вэ

Django-г үйлдвэрлэлд хэрхэн нэвтрүүлэх вэ

© 2025 4rkal CC BY-SA SUBSCRIBE