Cara Menyebarkan Go + Templ + HTMX + TailwindCSS ke Produksi

Dalam artikel ini, saya akan menunjukkan kepada Anda cara menyebarkan tumpukan GoTTH (Go Templ htmx tailwind) ke produksi.

Baru-baru ini saya membuat agregator pertukaran mata uang kripto saya sendiri yang disebut cyphergoat ; alat ini menemukan nilai tukar terbaik untuk menukar kripto Anda dari berbagai bursa mitra.

Ini memiliki dua bagian:

1. API yang berinteraksi dengan bursa. Ditulis dalam bahasa go dan menggunakan gin.

   
   

2. UI Web ditulis dalam bahasa Go dan menggunakan kombinasi HTML, HTMX, tailwindcss, CSS, dan Javascript dalam templat templ. Alias tumpukan GoTTH. Berinteraksi dengan API untuk menemukan tarif, dsb.

Yang sangat keren dengan tumpukan dan pengaturan ini adalah kita dapat menghasilkan satu biner tunggal dengan semua yang disertakan untuk setiap bagian dan mengirimkannya ke server. Di sisi webui, ini dimungkinkan karena HTML dikompilasi menjadi kode go menggunakan templ dan kemudian dikirimkan dengan biner.

Dalam artikel ini, saya akan membahas pengaturan saya untuk memudahkan Anda membuat sesuatu seperti ini.

Pengaturan

Saya menggunakan server Debian 12 yang akan mengekspos aplikasi saya melalui terowongan Cloudflare. Semua berkas statis disajikan melalui nginx dan API serta biner situs web dijalankan sebagai layanan systemd.

Dalam panduan ini, saya akan menunjukkan cara mengaturnya.

Pengaturan

Saya memiliki satu folder di mesin pengembangan saya yang disebut cyphergoat: Folder ini berisi:

 api/ web/ builds/

Folder API menyimpan kode sumber API. Web menyimpan kode sumber situs web.

Dan build tersebut menampung semua build yang diterapkan ke server.

Angin belakang

Tantangan nyata pertama datang dari pengaturan tailwindcss yang benar.

Dalam proyek web saya, saya memiliki folder statis khusus untuk file-file statis. Di dalamnya, saya memiliki dua file:

 /web styles.css tailwind.css

styles.css hanya berisi:

 @import "tailwindcss";

Berkas tailwind.css adalah tempat tailwind-cli menyimpan datanya.

Untuk membangun hal yang menguntungkan, saya cukup menjalankan:

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

(dengan asumsi Anda telah menginstal tailwind-cli)

Dalam file header.templ saya (header semua halaman), di bagian atas saya memiliki:

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

Dan berkas-berkas tersebut disajikan menggunakan e.Static Echo (dalam berkas main.go saya).

 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 }

Pelayan

Di sisi server saya, saya memiliki vm Debian 12 yang berjalan pada proxmox.

Di direktori home pengguna saya, saya memiliki folder dengan konten berikut:

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

Folder statis berisi semua file statis (termasuk tailwind.css dan styles.css), dan web serta API adalah binernya.

Saya kemudian memiliki dua layanan systemd untuk eksekusi ini:

Layanan 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

Dan 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

Keduanya dimiliki oleh grup www-data (ini mungkin tidak diperlukan untuk API) untuk memudahkan penyajiannya melalui nginx.

Bahasa Inggris Nginx

Situs web berkomunikasi dengan API, tetapi saya masih perlu membuat antarmuka pengguna web dapat diakses.

Saya telah menyiapkan situs nginx dengan konfigurasi berikut: /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; }

Saya juga telah menyiapkan certbot untuk memiliki sertifikat SSL.

Anda dapat mengatur certbot dengan menjalankan:

 sudo apt install certbot python3-certbot-nginx -y

Hasilkan sertifikat SSL:

 sudo certbot --nginx -d cyphergoat.com

Baca Hosting sendiri situs web Anda untuk pengaturan nginx yang lebih mendalam.

Terowongan Cloudflare

Saat ini saya membuat situs web saya dapat diakses menggunakan halaman Cloudflare. Ini adalah solusi penerusan porta yang sangat mudah digunakan.

Untuk melakukan ini, Anda memerlukan akun Cloudflare dan domain yang diarahkan ke Cloudflare.

Pertama, buka Dashboard Zero Trust .

Di bawah Networks klik Tunnels, lalu Create a tunnel.

Setelah dibuat, Anda harus Install and run a connector ; ikuti petunjuk pada halaman untuk pengaturan spesifik Anda.

Setelah konektor berjalan, Anda harus mengeklik tab Public Hostname dan Add a public hostname .

Sekarang, Anda akan melihat sesuatu seperti ini:

Isi info seperti yang saya miliki. Jenis layanan harus HTTP , dan URL harus 127.0.0.1:80 atau localhost:80.

Jelas tidak ada alasan untuk membuat API Anda dapat diakses publik saat menyebarkan situs web Anda.

Penyebaran

Untuk menerapkan biner saya, saya lanjutkan dan buat skrip bash cepat:

 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/

Skrip tersebut akan membangun API, menghasilkan file-file templ untuk membangun WebUI, dan kemudian mengirimkan semuanya ke server saya (termasuk folder statis).

Saya kemudian ssh ke server saya:

ssh user@ip

Dan kemudian mulai ulang layanannya.

sudo systemctl restart cg-api cg-web

Dan selesailah sudah.

Bergabunglah dengan buletin gratis saya

Artikel Terkait

Pembatasan Laju Sederhana dalam Go (Gin)

Cara membuat pemendek URL di Go

Cara menyebarkan Django ke produksi

© 2025 4rkal CC BY-SA BERLANGGANAN