Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber-Golang-php.cn

Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber

WBOY

Lepaskan： 2024-07-17 00:16:10

asal

351 orang telah melayarinya

Hybrid Rendering Architecture using Astro and Go Fiber

Dalam seni bina ini, Astro bertanggungjawab untuk penjanaan tapak statik dan pengoptimuman aset, mencipta fail HTML, CSS dan JavaScript yang dipra-render untuk prestasi tinggi dan penyampaian yang cekap. Go Fiber mengendalikan pemprosesan data dinamik, penyepaduan API dan menyediakan fail statik, menyediakan kemas kini data masa nyata dan penghalaan bahagian pelayan dan pengurusan perisian tengah yang cekap. Gabungan ini memanfaatkan kekuatan kedua-dua teknologi untuk mencipta aplikasi web yang berprestasi dan berskala.

Contoh Penuh Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber

Berikut ialah panduan langkah demi langkah untuk mencipta aplikasi web menggunakan Seni Bina Hibrid Rendering dengan Astro dan Go Fiber.

1. Sediakan Projek Astro

Pasang Astro dan buat projek baharu:

   npm create astro@latest
   cd my-astro-site

Salin selepas log masuk

Buat halaman di Astro:

Buat src/pages/index.astro:

   ---
   export const prerender = true;
   ---

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{Astro.props.title}</title>
     <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <h1>{Astro.props.title}</h1>
     <p>{Astro.props.message}</p>
     <script src="/assets/script.js"></script>
   </body>
   </html>

Salin selepas log masuk

Tambah fail CSS dan JS:

Buat src/assets/style.css:

   body {
     font-family: Arial, sans-serif;
     background-color: #f0f0f0;
     margin: 0;
     padding: 20px;
   }

Salin selepas log masuk

Buat src/assets/script.js:

   document.addEventListener('DOMContentLoaded', () => {
     console.log('Astro and Go Fiber working together!');
   });

Salin selepas log masuk

Bina projek Astro:

   npm run build

Salin selepas log masuk

2. Sediakan Projek Go Fiber

Buat projek Go baharu dan pasang kebergantungan:

   go mod init mysite
   go get github.com/gofiber/fiber/v2

Salin selepas log masuk

Buat fail Go utama:

Buat main.go:

   package main

   import (
       "log"
       "github.com/gofiber/fiber/v2"
       "path/filepath"
       "encoding/json"
       "io/ioutil"
       "bytes"
       "os/exec"
       "net/http"
   )

   // Function to render Astro template
   func renderAstroTemplate(templatePath string, data map[string]interface{}) (string, error) {
       cmd := exec.Command("astro", "build", "--input", templatePath)

       // Pass data to template via stdin
       jsonData, err := json.Marshal(data)
       if err != nil {
           return "", err
       }
       cmd.Stdin = bytes.NewBuffer(jsonData)

       output, err := cmd.CombinedOutput()
       if err != nil {
           return "", fmt.Errorf("failed to execute astro build: %s", string(output))
       }

       // Read generated file
       outputPath := filepath.Join("dist", "index.html")
       content, err := ioutil.ReadFile(outputPath)
       if err != nil {
           return "", err
       }

       return string(content), nil
   }

   func main() {
       app := fiber.New()

       // Serve static files from the dist directory
       app.Static("/", "./my-astro-site/dist")

       app.Get("/", func(c *fiber.Ctx) error {
           data := map[string]interface{}{
               "title":   "My Astro Site",
               "message": "Welcome to my site built with Astro and Go Fiber!",
           }

           htmlContent, err := renderAstroTemplate("./my-astro-site/src/pages/index.astro", data)
           if err != nil {
               return c.Status(http.StatusInternalServerError).SendString(err.Error())
           }

           return c.Type("html").SendString(htmlContent)
       })

       log.Fatal(app.Listen(":3000"))
   }

Salin selepas log masuk

3. Jalankan Aplikasi

Mulakan pelayan Go Fiber:

   go run main.go

Salin selepas log masuk

Akses tapak web:

Buka penyemak imbas anda dan navigasi ke http://localhost:3000.

Ringkasan

Dalam contoh ini, Astro mengendalikan penjanaan tapak statik, mencipta fail HTML, CSS dan JavaScript yang dioptimumkan. Go Fiber menyediakan fail statik ini dan menyuntik data secara dinamik ke dalam templat, membolehkan kemas kini data masa nyata. Seni bina rendering hibrid ini memanfaatkan kekuatan kedua-dua teknologi untuk mencipta aplikasi web yang berprestasi dan berskala.

Atas ialah kandungan terperinci Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!