[golang] vue와 golang echo framework 연동하기

이번 게시글에서는 golang echo framework와 spa 프레임워크의 연동방법에 대해 정리합니다.

 

해당방법은 nginx, appach, IIS 등의 웹서버를 사용하지 않고

백엔드 애플리케이션에서 spa 프레임워크가 만들어준 하나의 html을 내려주는 방식입니다.

 

스케일 아웃에는 좋지 않고 랜더링 방식 자체는 웹서버가 아닌 애플리케이션까지 오는 ssr에 가깝지만,

하나의 바이너리, 하나의 컨테이너, 하나의 포트로 프론트엔드와 백엔드를 관리할 수 있다는 장점이 있습니다.

 

전체 소스코드는 아래 깃헙레포에서 확인하실 수 있습니다.

https://github.com/jaeho310/golang-echo-vue

GitHub - jaeho310/golang-echo-vue

프로젝트 구조

|-- frontend
|   |-- package.json
|   `-- vue.config.js
|-- static
|   `-- index.html
`-- main.go

main.go

package main

import (
	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
)

func main() {
	e := echo.New()
	e.Use(middleware.Logger())
	e.Use(middleware.Recover())

        // /static/html에 spa 프레임워크가 만들어준 하나의 html을 넣어주고
        // "/" 요청에 해당파일을 내려줍니다.
	e.File("/", "static/index.html")
    
    	// static 파일을 찾는 루트경로를 static으로 설정합니다.
	e.Static("/", "static")
	
    	// vue router를 사용하려는 요청이 백엔드에 넘어왔다면 404에러처리하면 안됩니다.
    	// 백엔드에서 404에러가 발생한경우 프론트엔드로 넘깁니다.
	echo.NotFoundHandler = func(c echo.Context) error {
		return c.File("static/index.html")
	}
	e.Logger.Fatal(e.Start(":8083"))
}

백엔드 소스코드입니다.

 

1. html 내려주기

웹백엔드 애플리케이션에서 html을 내리는 방법은 크게 두가지입니다.

• 프레임워크의 템플릿엔진 사용하기
• html파일만 내려주기

spa 프레임워크를 사용하면 템플릿엔진(spring의 경우 jsp, thymeleaf 등)을 사용하지 않아도 되므로
e.Render이 아닌 e.File로 직접 파일을 내려줘도 정상 동작합니다.

// /static/html에 spa 프레임워크가 만들어준 하나의 html을 넣어주고
// "/" 요청에 해당파일을 내려줍니다.
e.File("/", "static/index.html")

vue.config.js 파일에서 npm yarn 빌드의 경로를 해당위치로 설정해주면 편리합니다.

// vue.config.js
const path = require("path");
module.exports = {
  outputDir: path.resolve(__dirname, "../static"),
  indexPath: path.resolve(__dirname, "../static/index.html"),
}

 

2. static 경로 설정

GET /css/chunk-vendors.12eeff44.css 404 Laency[ 151.3µs ]
GET /js/app.55164cf6.js 404 Laency[ 0s ]
GET /js/chunk-vendors.a4511fbe.js 404 Laency[ 0s ]

그대로 실행해보면
html이 사용하는 css, js 파일을 echo framework가 내려주지 못합니다.

/js, /css 는 static/js, static/css에 들어있으므로 echo framework가 static 자원을 찾는 경로를 변경해줍니다.

// static 파일을 찾는 루트경로를 static으로 설정합니다.
e.Static("/", "static")

 

3. vue router 이슈

사용자가 메뉴를 클릭해 vue router를 이용했다면 상관없지만
url을 그대로 복사해서 붙여넣기하면 echo framework는 해당 정보를 가지고있지 않기에 404 에러를 뱉습니다.

 

아래 코드를 추가하여 echo framework에 등록되지 않은 요청이 왔을때(vue router를 이용해야 하는경우)

index.html파일만 리턴해서 프론트엔드단으로 보내면 vue router가 동작합니다.

// vue router를 사용하려는 요청이 백엔드에 넘어왔다면 404에러처리하면 안됩니다.
// 백엔드에서 404에러가 발생한경우 프론트엔드로 넘깁니다.
echo.NotFoundHandler = func(c echo.Context) error {
    return c.File("static/index.html")
}

 

vue router에도 없는 요청은 아래와 같이 핸들링합니다.

Vue.use(Router)
export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: "Home",
            component: Home
        }
        ,{
            path: '/test',
            name: 'Test',
            component: Test
        },
        {
            path: '*',
            name: 'Error',
            component: Error
        }
    ]
})

"*" 요청에 에러핸들링 컴포넌트를 위치시켜 404페이지를 랜더링 시킵니다.

(vue router에 존재하지 않는 내용)