Өндіріске Go + Templ + HTMX + TailwindCSS қалай орналастыруға болады

Бұл мақалада мен сізге GoTTH стекін (Go Templ htmx tailwind) өндіріске қалай орналастыру керектігін көрсетемін.

Мен жақында Cyphergoat деп аталатын криптовалюта алмасу агрегаторымды жасадым; ол әртүрлі серіктес биржалардан крипто айырбастаудың ең жақсы бағамын табады.

Оның екі бөлігі бар:

1. Биржалармен әрекеттесетін API. Go түрінде жазылған және джинді пайдаланады.

   
   

2. Web UI go режимінде жазылған және үлгі үлгілерінде HTML, HTMX, tailwindcss, CSS және Javascript тіркесімін пайдаланады. GoTTH стекі. Ол тарифтерді табу үшін API-мен өзара әрекеттеседі және т.б.

Бұл стек пен орнатудың керемет жағы - біз әрбір бөлікке енгізілген барлық нәрселермен бір екілік файлды жасап, оны серверге жеткізе аламыз. Webui жағында бұл мүмкін, өйткені HTML templ көмегімен go кодына құрастырылады, содан кейін екілік файлмен бірге жеткізіледі.

Бұл мақалада мен сізге осындай нәрсені жасауды жеңілдету үшін орнатуды қарастырамын.

Орнату

Мен Cloudflare туннельдері арқылы қолданбамды ашатын Debian 12 серверін пайдаланамын. Барлық статикалық файлдар 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 }

Сервер

Менің сервер жағында проксмокста жұмыс істейтін 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 интерфейсімен байланысып жатыр, бірақ мен әлі де 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 орнаттым.

Сертботты іске қосу арқылы орнатуға болады:

 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 қысқартқышты қалай құруға болады

Джангоны өндіріске қалай орналастыруға болады

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