Go + Templ + HTMX + TailwindCSSти өндүрүшкө кантип жайылтуу керек

Бул макалада мен сизге GoTTH стекин (Go Templ htmx tailwind) өндүрүшкө кантип орнотууну көрсөтөм.

Мен жакында эле Cyphergoat деп аталган өзүмдүн cryptocurrency алмашуу агрегаторумду түздүм; ал сизге криптоңузду ар кандай өнөктөш биржалардан алмаштыруу үчүн эң жакшы курсту табат.

Ал эки бөлүктөн турат:

1. Биржалар менен өз ара аракеттенүүчү API. Go менен жазылган жана джин колдонот.

   
   

2. Веб UI go режиминде жазылган жана HTML, HTMX, tailwindcss, CSS жана Javascriptтин айкалышын шаблондордо колдонот. Aka GoTTH стек. Ал тарифтерди табуу үчүн API менен өз ара аракеттенет.

Бул стек жана орнотуунун эң сонун жагы, биз ар бир бөлүк үчүн бардыгы камтылган бирдиктүү бинардык түзө алабыз жана аны серверге жөнөтө алабыз. Webui тарабында, бул HTML templ аркылуу go кодуна түзүлүп, андан кийин бинардык менен жөнөтүлгөндүктөн мүмкүн.

Бул макалада мен сизге ушуга окшогон нерсени жасоону жеңилдетүү үчүн орнотууларды карап чыгам.

Жайгашуу

Мен 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">

Ал эми файлдар 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 }

Server

Менин сервер тарабымда проксмокста иштеген 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

Экөө тең www-data тобуна таандык (бул API үчүн зарыл эмес), nginx аркылуу тейлөөнү жеңилдетүү үчүн.

Nginx

Вебсайт API менен байланышууда, бирок мен дагы эле web-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'ни жалпыга ачык кылууга эч кандай себеп жок.

Жайгаштыруу

Экилик файлдарымды жайылтуу үчүн, мен алдыга чыгып, тез баш сценарийин түздүм:

 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 кыскарткычты кантип куруу керек

Джангону кантип өндүрүшкө жайылтуу керек

© 2025 4rkal CC BY-SA ЖАЗЫЛУУ