通过java运行vue

Most of the companies are adopting some kind of container orchestration and running all their modern apps on Kubernetes. It’s always convenient to run the apps on Minikube which is a single-node Kubernetes cluster that can be installed on your local machine. In this post, we can deploy and run Vue with Java backend API on Minikube on our local machine.

大多数公司都采用某种容器编排，并在Kubernetes上运行其所有现代应用程序。 在Minikube上运行应用程序总是很方便的，Minikube是可以安装在本地计算机上的单节点Kubernetes集群。 在本文中，我们可以在本地计算机上的Minikube上部署和运行带有Java后端API的Vue。

Introduction

介绍

Example Project

示例项目

Run it On Docker

在Docker上运行

Publishing the Docker Image

发布Docker映像

Create a Deployment and Service Objects

创建部署和服务对象

How to access deployment from the browser

如何从浏览器访问部署

Summary

概要

Conclusion

结论

介绍(Introduction)

Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer. We are going to deploy and run Vue with Java API on MInikube in this article. First, we create this project and run it normally, then we will run the same on the Docker and, finally, we create a deployment and service objects to deploy and run it on Kubernetes locally.

Minikube是一种工具，可在您的个人计算机上的虚拟机中运行单节点Kubernetes集群。 本文将在MInikube上使用Java API部署和运行Vue。 首先，我们创建该项目并正常运行，然后在Docker上运行该项目，最后，创建一个部署和服务对象以在Kubernetes上本地部署和运行它。

We are going to need some pre-requisites to complete this project or run it on your local machine.

我们将需要一些先决条件才能完成此项目或在本地计算机上运行它。

Install Java

安装Java

Vue CLI Service

Vue CLI服务

Docker Desktop

Docker桌面

Minikube

迷你库

示例项目(Example Project)

This is a simple project which demonstrates developing and running Vue application with Java. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

这是一个简单的项目，演示了如何使用Java开发和运行Vue应用程序。 我们有一个简单的应用程序，可以在其中添加用户，计数并在侧面显示它们，并在需要时检索它们。

Example Project 示例项目

Since we are focusing on running the whole project on the Minikube we are not going to develop this project in this post. If you are not familiar with the whole process of developing a Vue app with the Java backend you can go through the below post.

由于我们专注于在Minikube上运行整个项目，因此在本文中不打算开发此项目。 如果您不熟悉使用Java后端开发Vue应用程序的整个过程，则可以阅读以下文章。

How To Develop and Build Vue.js App with Java Backend

如何使用Java后端开发和构建Vue.js应用

Here is the GitHub link of this project. You can clone it and run on it your machine.

这是该项目的GitHub链接。 您可以克隆它并在计算机上运行它。

// clone the projectgit clone https://github.com/bbachi/vuejs-java-minikube.git// Run Vue on port 3000cd /src/main/uinpm installnpm run serve// Run Java Code on 8080mvn clean installjava -jar target/users-0.0.1-SNAPSHOT.jar

在Docker上运行 (Run it On Docker)

We have seen how to build the project and tun the application in a normal way. Let’ see how we can create a Dockerfile and run the same application in the Docker.

我们已经看到了如何以常规方式构建项目和调整应用程序。 让我们看看如何创建一个Dockerfile并在Docker中运行相同的应用程序。

First, let’s create a folder called docker and place the generated war file there with the maven plugin. If you look at the build portion of the pom.xml we have a goal called repackage to place the packaged war file in the docker folder when we build the app. One of the advantages of using a separate folder is that you don’t have to send the entire application code to the Docker daemon when building the image.

首先，让我们创建一个名为docker的文件夹，并使用maven插件将生成的war文件放置在该文件夹中。 如果您查看pom.xml的构建部分，我们有一个名为repackage的目标，可以在构建应用程序时将打包的war文件放置在docker文件夹中。 使用单独的文件夹的优点之一是，构建映像时不必将整个应用程序代码发送到Docker守护程序。

Here is the Dockerfile in which we copy the entire war file generated and run it with Java command.

这是Dockerfile，我们在其中复制生成的整个war文件并使用Java命令运行它。

# Alpine Linux with OpenJDK JRE FROM openjdk:8-jre-alpine # Copy war file COPY users-0.0.1-SNAPSHOT.jar /users.war # run the app CMD ["/usr/bin/java", "-jar", "/users.war"]

Let’s build the Docker image

让我们构建Docker映像

// build the imagedocker build -t vuejs-java-image .// list the imagedocker images

发布Docker映像 (Publishing the Docker Image)

Let’s publish the Docker image to Docker Hub with this command docker push <repo name> . Before that, you need to create a Docker Hub account if you dot have one. Here is the link for it.

让我们使用以下命令docker push <repo name>将Docker映像发布到Docker Hub。 在此之前，如果您拥有一个Docker Hub帐户，则需要创建一个Docker Hub帐户。 这是它的链接。

Let’s create a repository and it’s bbachin1 in my case. We need to login, tag the image, and push it finally.

让我们创建一个存储库，在我的情况下为bbachin1。 我们需要登录，标记图像并最终将其推送。

// logindocker login// tag the imagedocker tag vuejs-java-image bbachin1/vuejs-java-webapp// push the imagedocker push bbachin1/vuejs-java-webapp Docker Hub Docker集线器

创建部署和服务对象(Create a Deployment and Service Objects)

A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container. You can check the pod documentation here.

吊舱是一组共享存储和网络的一个或多个容器，并具有如何运行该容器的规范。 您可以在此处查看广告连播文档。

Let’s create a pod with the below file. Before that, You need to start the Minikube on your local machine with this command minikube start and create a pod with this kubectl create -f pod.yml

让我们用以下文件创建一个pod。 在此之前，您需要使用此命令minikube start在本地计算机上启动Minikube，并使用此kubectl create -f pod.yml创建一个pod。

apiVersion: v1 kind: Pod metadata: name: webapp spec: containers: - image: docker.io/bbachin1/vuejs-java-webapp name: webapp imagePullPolicy: Always resources: {} ports: - containerPort: 8080

It takes some time to pull the image from the Docker Hub if you are doing the first time or depending on the image size. Now you can see the pod is in the running status and exec into it to explore the file structure, etc.

如果您是第一次或根据映像大小，从Docker Hub提取映像会花费一些时间。 现在，您可以看到Pod处于运行状态，并执行该Pod以探索文件结构等。

exec into running pods 执行到运行的Pod

部署方式 (Deployment)

Creating just one pod is not enough and what if you want to scale out the application and want to run 10 replicas at the same time. What if you want to change the number of replicas depending on the demand. That’s where the deployment comes into the picture. We specify the desired state in the deployment object such as how many replicas you want to run etc.

仅创建一个Pod是不够的，如果要扩展应用程序并同时运行10个副本，该怎么办。 如果要根据需求更改副本数怎么办。 部署就是其中的关键。 我们在部署对象中指定所需的状态，例如要运行的副本数等。

Kubernetes makes sure that it always meets the desired state. It creates replica sets which inturn creates pods in the background. Let’s create a Deployment for our project with this command kubectl create -f deployment.yml

Kubernetes确保其始终满足所需状态。 它创建副本集，而副本集又在后台创建容器。 让我们使用以下命令为我们的项目创建一个部署： kubectl create -f deployment.yml

apiVersion: apps/v1 kind: Deployment metadata: creationTimestamp: null labels: app: vue-webapp name: vue-webapp spec: replicas: 5 selector: matchLabels: app: vue-webapp strategy: {} template: metadata: creationTimestamp: null labels: app: vue-webapp spec: containers: - image: docker.io/bbachin1/vuejs-java-webapp name: webapp imagePullPolicy: Always resources: {} ports: - containerPort: 8080 status: {}

We have 5 replicas in the specification and the deployment creates 5 pods and 1 replica set.

规范中我们有5个副本，并且部署创建5个pod和1个副本集。

deployment running 部署运行

服务(Service)

Service is an abstract way to expose an application running on a set of Pods as a network service. Let’s create a service with type NodePort so that we can access the Vue app from the browser. Here is the service object YAML

服务是将运行在一组Pod上的应用程序公开为网络服务的抽象方法。 让我们创建一个类型为NodePort的服务，以便我们可以从浏览器访问Vue应用程序。 这是服务对象YAML

apiVersion: v1 kind: Service metadata: name: vue-webapp labels: run: vue-webapp spec: ports: - port: 8080 protocol: TCP selector: app: vue-webapp type: NodePort

Create a service with this command kubectl create -f service.yml and you can list the service with this kubectl get svc

使用此命令kubectl create -f service.yml ，您可以使用此kubectl get svc列出服务

kubectl get svc kubectl获取svc

You can create one file called manifest.yml to place all the Kubernetes objects in one place and create all of the objects with one command kubectl create -f manifest.yml

您可以创建一个名为manifest.yml的文件以将所有Kubernetes对象放在一个位置，并使用一个命令创建所有对象kubectl create -f manifest.yml

apiVersion: apps/v1 kind: Deployment metadata: creationTimestamp: null labels: app: vue-webapp name: vue-webapp spec: replicas: 5 selector: matchLabels: app: vue-webapp strategy: {} template: metadata: creationTimestamp: null labels: app: vue-webapp spec: containers: - image: docker.io/bbachin1/vuejs-java-webapp name: webapp imagePullPolicy: Always resources: {} ports: - containerPort: 8080 status: {} --- apiVersion: v1 kind: Service metadata: name: vue-webapp labels: run: vue-webapp spec: ports: - port: 8080 protocol: TCP selector: app: vue-webapp type: NodePort

如何从浏览器访问部署(How to access deployment from the browser)

We have created deployment and services and now we need to access this deployment from the browser.

我们已经创建了部署和服务，现在我们需要从浏览器访问此部署。

We need to get the public IP address of the Kubernetes with this command kubectl cluster-info

我们需要使用此命令kubectl cluster-info获取Kubernetes的公共IP地址

kubectl cluster-info kubectl集群信息

Let’s access a Vue app with this IP address 192.168.64.2 (where Kubernetes master is running)and port 32358(where the service port is mapped)with the below URLs. Make sure that you use Http instead of Https.

让我们使用以下URL访问具有以下IP地址的Vue应用程序：IP地址192.168.64.2 (运行Kubernetes主服务器)和端口32358 (映射服务端口)。 确保使用Http而不是Https。

// access the application herehttp://192.168.64.2:32358/

Accessing the application in the browser with the above URL.

使用上述URL在浏览器中访问应用程序。

Accessing the app from the browser 从浏览器访问应用

概要(Summary)

Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer.

Minikube是一种工具，可在您的个人计算机上的虚拟机中运行单节点Kubernetes集群。We need to install Java, Docker for desktop, and Minikube as prerequisites

我们需要先安装Java，桌面版Docker和Minikube

We can build the project with docker docker build -t vue-java-image .and run the container with this command docker run -d --name vue-java -p 8080:8080 vue-java-image

我们可以使用docker docker build -t vue-java-image .来构建项目docker build -t vue-java-image . 并使用此命令运行容器docker run -d --name vue-java -p 8080:8080 vue-java-image

We need a container orchestration engine for the auto-scaling of applications

我们需要一个容器编排引擎来自动缩放应用程序 A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container.

吊舱是一组共享存储和网络的一个或多个容器，并具有如何运行该容器的规范。We need to push the repository to the Docker Hub and pull the image from it with ImagePolicy Always.

我们需要将存储库推送到Docker Hub，并使用ImagePolicy Always将其从其中提取图像。 A Deployment is a declarative approach to specify the number of instances of the application and makes it easier to scale up and down based on the need.

部署是一种声明性方法，用于指定应用程序实例的数量，并使其更易于根据需要进行扩展和缩小。 Service is an abstract way to expose an application running on a set of Pods as a network service.

服务是将运行在一组Pod上的应用程序公开为网络服务的抽象方法。 You can access the local deployment with the public IP address of Kubernetes and the port of the service. We should use Nodeport in the service object.

您可以使用Kubernetes的公共IP地址和服务端口访问本地部署。 我们应该在服务对象中使用Nodeport。 You can place all the Kubernetes objects in one file called manifest.yml

您可以将所有Kubernetes对象放在一个名为manifest.yml的文件中

结论(Conclusion)

It’s always convenient to use Minikube and own docker images for the local testing. We don’t even deploy in some kind of environment to test our workflow.

使用Minikube和自己的docker映像进行本地测试总是很方便的。 我们甚至没有部署在某种环境中来测试我们的工作流程。

翻译自: https://medium.com/bb-tutorials-and-thoughts/how-to-run-vue-js-with-java-api-on-minikube-7dba7515fb4

通过java运行vue

相关资源：微信小程序源码-合集6.rar