[英]Dockerize vue js front end and spring boot backend and deploy on kubernetes cluster
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
.我开发了 spring boot 后端和
vue
js
前端我可以成功部署 spring boot 应用程序并为 spring boot 应用程序创建集群ip
服务,但我从未在kubernetes
和kubernetes
上使用 NPM 项目。 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
.我也有问题,
Axios
,当我在本地测试后端和前端,我给(localhost:backendport/endpoint)
为axios
,我怎么能适应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.我应该给集群
ip
服务名称而不是localhost:port/endpoint -> clusteripservice/endpoint
如果是这样,我如何将配置外部化以及如何部署这两个应用程序。
here is Axios
call这是
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()
Idea is to use nginx as your app container and proxy pass to proxy to back-end.想法是使用 nginx 作为您的应用程序容器和代理传递到代理到后端。 So you need to define location for your api, ie /api and proxy that.
所以你需要为你的 api 定义位置,即 /api 和代理。
Then if you are using axios, you would call all back-end endpoints on relative path, ie然后如果你使用 axios,你会在相对路径上调用所有后端端点,即
axios.get('/api/v1/myApiPath')
So you do not need to worry about hostname in calls to back-end.因此,您无需担心后端调用中的主机名。
Also, for development you similarly use vue.js development settings to also proxy back-end via npm.此外,对于开发,您同样使用 vue.js 开发设置也通过 npm 代理后端。
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在这里查看我的玩具项目的详细信息:部署部分 - https://github.com/taleodor/mafia-deployment UI 部分 - https://github.com/taleodor/mafia-vue
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).特别是带有代理配置的 nginx 设置 - https://github.com/taleodor/mafia-vue/blob/master/nginx/default.conf (请注意,它使用的是 websockets,如果您不使用它们,您可以将其删除)。 Specifically vue development server configuration -https://github.com/taleodor/mafia-vue/blob/master/vue.config.js .
特别是 vue 开发服务器配置 -https://github.com/taleodor/mafia-vue/blob/master/vue.config.js 。
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写上 CI / CD 工作(与您的问题无关,但可能有用)- https://itnext.io/building-kubernetes-cicd-pipeline-with-github-actions-argocd-and-reliza-hub-e7120b9be870
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.