Go + Templ + HTMX + TailwindCSS-ni ishlab chiqarishga qanday joylashtirish kerak

Ushbu maqolada men sizga GoTTH stekini (Go Templ htmx tailwind) ishlab chiqarishga qanday joylashtirishni ko'rsataman.

Men yaqinda cyphergoat deb nomlangan o'zimning kriptovalyuta almashish agregatorimni yaratdim; u sizga kriptongizni turli sherik birjalardan almashtirish uchun eng yaxshi kursni topadi.

U ikki qismdan iborat:

1. Birjalar bilan o'zaro aloqada bo'lgan API. Go'da yozilgan va jin ishlatadi.

   
   

2. Web UI go rejimida yozilgan va andozalarda HTML, HTMX, tailwindcss, CSS va Javascript kombinatsiyasidan foydalanadi. GoTTH to'plami. Tariflarni topish uchun API bilan o'zaro ishlaydi va hokazo.

Ushbu stek va o'rnatishning ajoyib tomoni shundaki, biz har bir qism uchun hamma narsani o'z ichiga olgan bitta ikkilik faylni ishlab chiqarishimiz va uni serverga yuborishimiz mumkin. Webui tomonida bu mumkin, chunki HTML templ yordamida go kodiga kompilyatsiya qilinadi va keyin ikkilik bilan jo'natiladi.

Ushbu maqolada men sizga shunga o'xshash narsalarni qilishni osonlashtirish uchun o'z sozlamalarimni ko'rib chiqaman.

Sozlash; o'rnatish

Men Cloudflare tunnellari orqali ilovamni ochib beradigan Debian 12 serveridan foydalanmoqdaman. Barcha statik fayllar nginx orqali xizmat ko'rsatmoqda va API va veb-sayt ikkiliklari tizim xizmatlari sifatida ishlaydi.

Ushbu qo'llanmada men buni qanday sozlashimni ko'rsataman.

O'rnatish

Mening ishlab chiqaruvchi mashinamda cyphergoat deb nomlangan bitta papka bor: Unda:

 api/ web/ builds/

API papkasida API manba kodi mavjud. Veb-sayt manba kodini o'z ichiga oladi.

Qurilishlar esa serverga o'rnatilgan barcha tuzilmalarni o'z ichiga oladi.

Orqa shamol

Birinchi haqiqiy qiyinchilik tailwindcss-ni to'g'ri sozlash bilan birga keladi.

Mening veb-loyihamda statik fayllar uchun maxsus statik papkam bor. Uning ichida menda ikkita fayl bor:

 /web styles.css tailwind.css

styles.css faqat quyidagilarni o'z ichiga oladi:

 @import "tailwindcss";

tailwind.css fayli tailwind-cli o'z ma'lumotlarini saqlaydi.

Quyruq shamolini yaratish uchun men oddiygina ishlayman:

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

(sizda tailwind-cli o'rnatilgan deb hisoblasangiz)

Mening header.templ faylimda (barcha sahifalar sarlavhasi), yuqori qismida menda:

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

Va fayllar Echo ning e.Static (mening main.go faylimda) yordamida taqdim etilmoqda.

 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

Mening server tomonimda proxmox-da ishlaydigan Debian 12 vm bor.

Mening foydalanuvchilarning uy katalogida menda quyidagi tarkibga ega papka bor:

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

Statik papka barcha statik fayllarni (jumladan, tailwind.css va styles.css) o'z ichiga oladi va web va API ikkilik fayllardir.

Keyin menda ushbu bajariladigan fayllar uchun ikkita tizim xizmati bor:

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

Va 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

Ikkalasi ham www-data guruhiga tegishli (bu API uchun kerak emas), nginx orqali ularga xizmat ko'rsatishni osonlashtirish uchun.

Nginx

Veb-sayt API bilan aloqa o'rnatmoqda, lekin men hali ham web-ui-dan foydalanish mumkin bo'lishim kerak.

Men quyidagi konfiguratsiyaga ega nginx saytini o'rnatdim: /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; }

Men SSL sertifikatiga ega bo'lish uchun certbotni ham o'rnatdim.

Siz certbot-ni ishga tushirish orqali sozlashingiz mumkin:

 sudo apt install certbot python3-certbot-nginx -y

SSL sertifikatini yarating:

 sudo certbot --nginx -d cyphergoat.com

Chuqurroq nginx sozlanishi uchun oʻz veb-saytingizni oʻz-oʻzidan hostingni oʻqing.

Cloudflare tunnellari

Men hozirda Cloudflare sahifalari yordamida veb-saytimga kirish imkoniyatini yaratmoqdaman. Bu foydalanish uchun juda oson portni yo'naltirish yechimidir.

Buning uchun sizga Cloudflare hisob qaydnomasi va Cloudflare-ga ishora qiluvchi domen kerak bo'ladi.

Birinchidan, "Zero Trust Dashboard" ga o'ting.

Networks ostida Tunnels, bosing va keyin Create a tunnel.

Yaratilgandan so'ng siz Install and run a connector kerak; maxsus sozlashingiz uchun sahifadagi ko'rsatmalarga amal qiling.

Ulagich ishga tushirilgandan so'ng, Public Hostname yorlig'ini bosing va Add a public hostname .

Endi siz shunga o'xshash narsani ko'rishingiz kerak:

Menda mavjud bo'lgan ma'lumotlarni to'ldiring. Xizmat turi HTTP bo'lishi kerak va URL manzili 127.0.0.1:80 yoki localhost:80.

Shubhasiz, veb-saytingizni joylashtirishda API-ni hammaga ochiq qilish uchun hech qanday sabab yo'q.

Joylashtirish

Ikkilik fayllarimni joylashtirish uchun men oldinga bordim va tezkor bash skriptini yaratdim:

 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 API-ni yaratadi, templ fayllarini ishlab chiqaradi, WebUI-ni yaratadi va keyin hamma narsani mening serverimga yuboradi (shu jumladan statik jild).

Keyin serverimga ssh ni kiritaman:

ssh user@ip

Va keyin xizmatlarni qayta ishga tushiring.

sudo systemctl restart cg-api cg-web

Va shunday.

Mening bepul axborot byulletenimga qo'shiling

Tegishli maqolalar

Go'da oddiy tarifni cheklash (Jin)

Go'da URL qisqartiruvchini qanday yaratish mumkin

Django-ni ishlab chiqarishga qanday joylashtirish kerak

© 2025 4rkal CC BY-SA OBUNA BO'LING