Dockerize vue js前端和spring boot后端并部署在kubernetes集群上

Posted 2023-02-22

【中文标题】Dockerize vue js前端和spring boot后端并部署在kubernetes集群上

【英文标题】：Dockerize vue js front end and spring boot backend and deploy on kubernetes cluster

【发布时间】：2020-12-22 07:01:36

【问题描述】：

我已经开发了 spring boot 后端和 vue js 前端我可以成功部署 spring boot 应用程序并为 spring boot 应用程序创建集群 ip 服务，但我从未在 docker 和 @987654324 上使用过 NPM 项目@。我在Axios 也有问题，当我在本地测试后端和前端时，我给(localhost:backendport/endpoint) 提供axios，我该如何适应kubernetes。我应该给集群ip 服务名称而不是localhost:port/endpoint -> clusteripservice/endpoint 如果是这样我该如何外部化配置以及如何部署这两个应用程序。

这里是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()  

【参考方案1】：

想法是使用 nginx 作为您的应用程序容器和代理传递到代理到后端。所以你需要为你的 api 定义位置，即 /api 和代理它。

如果你使用 axios，你会调用相对路径上的所有后端端点，即

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

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

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

在此处查看我的玩具项目，了解它是如何完成的： 部署片 - https://github.com/taleodor/mafia-deployment UI 部分 - https://github.com/taleodor/mafia-vue

特别是带有代理配置的 nginx 设置 - https://github.com/taleodor/mafia-vue/blob/master/nginx/default.conf（请注意，它使用的是 websockets，如果你不使用它们，你可以删除它们）。具体vue开发服务器配置-https://github.com/taleodor/mafia-vue/blob/master/vue.config.js.

撰写关于 CI / CD 工作的文章（与您的问题无关，但可能有用）-https://itnext.io/building-kubernetes-cicd-pipeline-with-github-actions-argocd-and-reliza-hub-e7120b9be870

【讨论】：

感谢您的回答，如果我使用 axios，您是否知道如何调用后端。在你的项目中我没有看到 axios 调用。

使用示例 axios 调用更新了我的答案 - 基本上你总是使用相对路径，即 axios.get('/api/v1/myApiPath')。

我还有一个问题，我正在做微服务项目，需要与 vue js 前端通信的后端 spring boot 微服务很少。您认为将这些连接到前端的最佳方式是什么？直接连接到前端或创建一个后端并将所有其他微服务连接到该后端，然后主后端连接到前端，但是如果我采用这种方法，我必须执行重复性任务，因为我必须像其他微服务一样在主后端编写相同的控制器.我需要了解最佳实践和 devops 方法。