목표

Angular에서 만든 SPA(싱글 페이지 애플리케이션)에 대해 Golang 웹 프레임워크인 gin을 사용하여 HTTP 액세스를 허용합니다.

왜 gin를 사용하는가?

로그를 알기 쉽기 때문에.

기사가 보이지 않았기 때문에

전제

'Angular 튜토리얼' 을 통한 것.

튜토리얼 정도의 Angular CLI를 사용할 수 있는 것.

이미 자신이 만든 Angular 프로젝트가 있다고 가정합니다.

직접 만든 Angular 프로젝트가없는 경우 :
후술하는 프로젝트 복사 의 순서를 무시해 진행해 주세요.
기본적으로 생성된 SPA를 볼 수 있습니다.

절차

프로젝트 만들기

초기 프로젝트 구성은 다음과 같습니다.

go-angular
└── main.go

go-angular 디렉토리로 이동하여 Angular 프로젝트를 만듭니다.

UHNaKZ:go-angular $ ng new view
? Would you like to add Angular routing? Yes　　　　　　// Yesを入力
? Which stylesheet format would you like to use? CSS　// CSSを選択

프로젝트의 구성은 다음과 같습니다.

go-angular
├── main.go
└── view
    ├── README.md
    ├── angular.json
    ├── e2e
    ├── karma.conf.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.spec.json
    └── tslint.json

프로젝트 복사

주의! 위의 프로젝트 작성 에서 생성한 프로젝트 외에 직접 만든 Angular 프로젝트가 없는 경우 무시하십시오.

여기서 생성된 view 디렉터리 아래의 src 디렉터리를 이미 만든 프로젝트의 src 디렉터리로 바꿉니다.

Angular 프로젝트 빌드

view 디렉토리로 이동하여 빌드합니다.

UHNaKZ:go-angular $ cd ./view
UHNaKZ:go-angular/view $ ng build

그러면

go-angular
├── main.go
└── view
    ├── README.md
    ├── angular.json
    ├── dist　　　　　　　// NEW!!
    ├── e2e
    ├── karma.conf.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.spec.json
    └── tslint.json

같아졌다고 생각합니다.

Go 빌드

go-angular/main.go 를 다음과 같이 수정합니다.

go-angular/main.go

package main
import(
    "github.com/gin-gonic/gin"
)
func main(){
    router := gin.Default()
    router.Static("/", "./view/dist/view")
    router.Run()
}

수정할 수 있으면 빌드합니다.

UHNaKZ:go-angular $ go build

마지막으로 생성된 바이너리 파일을 실행합니다.

UHNaKZ:go-angular $ ./go-angular

localhost:8080 에 액세스하면 Angular로 만든 SPA가 움직이고 있는 것을 알 수 있다고 생각합니다.

gin을 사용하지 않고 표준 패키지에서만 작성한 코드

main.go

package main
import (
    "net/http"
)
func main(){
    ang := http.FileServer(http.Dir("./view/dist/view"))
    http.Handle("/",ang)
    http.ListenAndServe(":8080",nil)
}

로그가 나오지 않습니다.
로그가 나오게 하면 조금 길어진다.

main.go

import (
    "net/http"
    "fmt"
    "time"
)
func main(){
    http.HandleFunc("/",angSF)
    fmt.Println(" Your Angular application is runnning.")
    http.ListenAndServe(":8080",nil)
}
func angSF(w http.ResponseWriter, r *http.Request){
    t := time.Now().Format("Mon Jan 2 15:04:05 -0700 MST 2006")
    fmt.Println(fmt.Sprintf("%s  Status:%v Method:%s URL:%s",t,http.StatusOK,r.Method,r.URL))
    http.ServeFile(w,r,"./view/dist/view")
}

로그 이런 느낌으로 만들면 좋을까. (상태는 번거롭기 때문에 200밖에 돌려주지 않습니다.)

요약

gin이 편하다.