Dockerize Vue JS前端和Spring Boot后端并在kubernetes集群上部署 [英] Dockerize vue js front end and spring boot backend and deploy on kubernetes cluster

问题描述

我已经开发了Spring Boot后端和vue js前端，我可以成功部署Spring Boot应用程序并为Spring Boot应用程序创建集群ip服务，但是我从未在docker和.在本地测试后端和前端时，我在Axios中也遇到了问题，我为axios给出了(localhost:backendport/endpoint)，如何将其适应于kubernetes.如果应该，我应该给集群ip服务名称而不是localhost:port/endpoint -> clusteripservice/endpoint吗?如何外部化配置以及如何部署这两个应用程序?

I have developed spring boot backend and vue js front end I could successfully deploy the spring boot app and create cluster ip service for spring boot app but I have never work with NPM project on docker and kubernetes. I also have problem in Axios when I locally testing backend and frontend I give (localhost:backendport/endpoint) for axios and how can I adapt it to kubernetes. should I give cluster ip service name instead of localhost:port/endpoint -> clusteripservice/endpoint if so how can I externalize the configurations and how can I deploy both app.

这是Axios通话

import axios from 'axios'


const API_URL = 'http://localhost:8084'
//const API_URL = '/'


class UserDataService {


    retrieveAllUsers() {

        return axios.get(`${API_URL}/user/getall`);
    }


}

export default new UserDataService()  

推荐答案

想法是将nginx用作您的应用容器，并将代理传递给后端代理.因此，您需要为您的api定义位置，即/api并代理该位置.

Idea is to use nginx as your app container and proxy pass to proxy to back-end. So you need to define location for your api, i.e. /api and proxy that.

然后，如果您使用的是axios，则将调用相对路径上的所有后端端点，即

Then if you are using axios, you would call all back-end endpoints on relative path, i.e.

axios.get('/api/v1/myApiPath')

因此，您无需担心后端调用中的主机名.

So you do not need to worry about hostname in calls to back-end.

另外，对于开发而言，您同样可以使用vue.js开发设置通过npm代理后端.

Also, for development you similarly use vue.js development settings to also proxy back-end via npm.

在这里查看我的玩具项目以获取详细信息: 部署部分- https://github.com/taleodor/mafia-deployment 用户界面片段- https://github.com/taleodor/mafia-vue

See my toy project here for details how it's done: Deployment piece - https://github.com/taleodor/mafia-deployment UI piece - https://github.com/taleodor/mafia-vue

特别是具有代理配置的nginx设置- https://github.com/taleodor/mafia-vue/blob/master/nginx/default.conf (请注意，它使用的是websocket，如果您不使用它们，可以将其删除).专门针对vue开发服务器的配置- https://github.com/taleodor/mafia-vue/blob/master/vue.config.js .

Specifically nginx settings with proxy configuration - https://github.com/taleodor/mafia-vue/blob/master/nginx/default.conf (note that it's using websockets which you may remove if you're not using them). Specifically vue development server configuration - https://github.com/taleodor/mafia-vue/blob/master/vue.config.js.

撰写CI/CD的工作原理(与您的问题无关，但可能有用)-

Write up on CI / CD workings (unrelated to your question but maybe useful) - https://itnext.io/building-kubernetes-cicd-pipeline-with-github-actions-argocd-and-reliza-hub-e7120b9be870

这篇关于Dockerize Vue JS前端和Spring Boot后端并在kubernetes集群上部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！