lagosta

라고스타

Lagosta는 Krill의 사용자 인터페이스입니다.

이 프로젝트는 Vue.js를 Javascript 프레임워크로 사용하고 Element를 UI 프레임워크로 사용합니다.

요구사항

• Node.js
• 원사 또는 npm

Yarn은 추가 종속성을 설치해야 하는 반면 npm은 node.js에 포함되어 있습니다. OTOH npm을 사용하는 경우 package-lock.json 저장소에 커밋해야 합니다.

프로젝트 설정

필요한 모든 js 라이브러리를 가져오려면 다음을 실행하세요.

yarn install

또는

npm install

개발 서버 실행

Vue는 webpack과 webpack-dev-server를 사용하여 자동 컴파일, 핫 리로드 가능한 개발 서버를 실행하며 Krill도 예외는 아닙니다.

다음을 실행하여 개발 서버를 시작할 수 있습니다.

npm run serve

개발 서버에 대한 대부분의 설정은 /vue.config.js 파일에 지정되어 있습니다.

Krill 개발 서버를 실행할 IP 주소와 포트를 선택할 수 있습니다.

    port: "3003",
    https: true

webpkack-dev-server에 대한 proxy 설정을 사용하여 HTTP 요청을 로컬 Krill 인스턴스로 다시 라우팅할 수 있습니다. proxy 옵션을 지정하여 /vue.config.js 파일을 편집합니다.

그러면 특정 엔드포인트에 대한 요청이 로컬 Krill 인스턴스로 전달됩니다. /api , /auth 및 /stats 엔드포인트를 Krill로 다시 라우팅해야 합니다.

예를 들어:

...
  devServer : {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy : {
      "/api" : { target : "https://localhost:3000" } ,
      "/auth" : { target : "https://localhost:3000" } ,
      "/stats" : { target : "https://localhost:3000" }
    } ,
...

이 예에서 로컬 Krill 인스턴스는 https://localhost:3000 (krill 구성의 기본값)에서 실행되고 있습니다.

여기에서 webpack-dev-server에 대한 자세한 내용을 읽을 수 있습니다.

배포용 빌드 만들기

/dist 폴더에서 모든 것을 컴파일하고 축소하려면 다음을 실행하세요.

 yarn run build

또는

 npm run build

그러면 모든 JS와 CSS가 컴파일되고 축소됩니다. 다시 말하지만 Vue는 webpack을 사용하므로 빌드 프로세스에 대한 많은 설정을 수정할 수 있습니다.

https://webpack.js.org/concepts/를 참조하세요.

프로덕션에서 API 요청 라우팅

프로덕션 환경에서 앱을 실행하는 방법에는 두 가지가 있습니다.

• /api , /stats 및 /auth 에 대한 모든 호출을 Krill 데몬으로 프록시하도록 웹 서버를 구성하세요.
• 제공된 'server.js'를 사용하여 API 호출을 프록시하는 간단한 HTTP 서버를 가동하세요(권장되지 않음).

후자를 사용하려면 먼저 환경에 맞는 매개변수를 사용하여 .env 파일을 생성하세요.

 PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

그런 다음 실행

 node server.js

Docker 컨테이너에서 빌드

한 번만 Docker 이미지를 로컬로 빌드합니다.

 docker build -t lagosta-builder .

일단 그렇게 하면 다음을 수행할 수 있습니다.

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

이제 Docker 이미지와 로컬 Lagosta 빌드 디렉터리가 준비되었으므로 앞으로는 다음과 같이 yarn build 실행할 수 있습니다.

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

출력은 호스트의 ${PWD}/dist 폴더에 있습니다.