Astro와 Go Fiber를 활용한 하이브리드 렌더링 아키텍처-Golang-php.cn

Astro와 Go Fiber를 활용한 하이브리드 렌더링 아키텍처

WBOY

풀어 주다： 2024-07-17 00:16:10

원래의

346명이 탐색했습니다.

Hybrid Rendering Architecture using Astro and Go Fiber

이 아키텍처에서 Astro는 정적 사이트 생성 및 자산 최적화를 담당하여 사전 렌더링된 HTML, CSS 및 JavaScript 파일을 생성합니다. 고성능과 효율적인 전달을 위해. Go Fiber는 동적 데이터 처리, API 통합, 정적 파일 제공을 처리하여 실시간 데이터 업데이트와 효율적인 서버측 라우팅 및 미들웨어 관리를 제공합니다. 이 조합은 두 기술의 장점을 활용하여 성능이 뛰어나고 확장 가능한 웹 애플리케이션을 만듭니다.

Astro 및 Go Fiber를 사용한 하이브리드 렌더링 아키텍처의 전체 예

다음은 Astro 및 Go Fiber와 함께 하이브리드 렌더링 아키텍처를 사용하여 웹 애플리케이션을 만드는 방법에 대한 단계별 가이드입니다.

1. Astro 프로젝트 설정

Astro를 설치하고 새 프로젝트를 생성하세요.

   npm create astro@latest
   cd my-astro-site

로그인 후 복사

Astro에서 페이지 만들기:

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>

로그인 후 복사

CSS 및 JS 파일 추가:

src/assets/style.css 만들기:

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

로그인 후 복사

src/assets/script.js 만들기:

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

로그인 후 복사

Astro 프로젝트 구축:

   npm run build

로그인 후 복사

2. Go Fiber 프로젝트 설정

새 Go 프로젝트를 생성하고 종속성을 설치합니다.

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

로그인 후 복사

기본 Go 파일 만들기:

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"))
   }

로그인 후 복사

3. 애플리케이션 실행

Go Fiber 서버 시작:

   go run main.go

로그인 후 복사

웹사이트 접속:

브라우저를 열고 http://localhost:3000으로 이동하세요.

요약

이 예에서 Astro는 정적 사이트 생성을 처리하여 최적화된 HTML, CSS 및 JavaScript 파일을 생성합니다. Go Fiber는 이러한 정적 파일을 제공하고 데이터를 템플릿에 동적으로 주입하여 실시간 데이터 업데이트를 가능하게 합니다. 이 하이브리드 렌더링 아키텍처는 두 기술의 장점을 활용하여 성능이 뛰어나고 확장 가능한 웹 애플리케이션을 만듭니다.

위 내용은 Astro와 Go Fiber를 활용한 하이브리드 렌더링 아키텍처의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!