k8s部署vue项目

我是一只代码狗

已于 2023-12-11 22:38:42 修改

阅读量532

点赞数 1

CC 4.0 BY-SA版权

分类专栏： k8s vue 文章标签： kubernetes java spring boot

于 2023-12-10 22:23:58 首次发布

原文链接：https://blog.csdn.net/m0_51510236/article/details/133926035

k8s 同时被 2 个专栏收录

67 篇文章

订阅专栏

vue

38 篇文章

订阅专栏

机器配置

192.168.10.106=n1

192.168.10.107=n2

192.168.10.108=m1

k8s使用的1.26版本

前置条件

k8s 1.26集群安装-CSDN博客

提前安装好harbor,我们的java项目的镜像都是放在harbor里面的

docker安装harbor-CSDN博客

k8s部署nacos-CSDN博客

k8s部署springcloud之kuncun项目-CSDN博客

k8s部署springcloud之order项目-CSDN博客

k8s部署springcloud之gateway项目-CSDN博客

创建vue3项目

在cmd输入

vue create dianshang

在项目安装好axios和路由

npm i axios

npm install vue-router@4 --S

vue.config.js

代理地址为k8s网关的service名称.命名空间.svc.cluster.local

9000是网关的端口号

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/kucun': {
        target: 'http://gateway-svc.dev.svc.cluster.local:9000',
        changeOrigin: true
      },
      '/order': {
        target: 'http://gateway-svc.dev.svc.cluster.local:9000',
        changeOrigin: true
      }
    }
  }
})

上面的target对应k8s中service的名字叫gateway-svc 也就是我们的网关服务

dev是我们的dev命名空间，也就是namespace

.svc.cluster.local是默认写法

通过上面的访问规则就可以在k8s的服务之前进行通信

src\App.vue

<template>
  <nav>
    <router-link to="/login">login</router-link> |
    <router-link to="/od">od</router-link> |
    <router-link to="/kc">kc</router-link>
  </nav>
  <router-view/>

</template>

<script>


export default {
  components: { },
  name:'App',
  setup(){

  }
}
</script>

src\components\KuCun.vue

<template>
    <div>
        我是{{name}}
    </div>
</template>

<script setup>
import axios from "axios";
import {onMounted,ref} from 'vue'

let name=ref()

const aa = async()=>{
    const response = await axios.get('/kucun/aa');
    name.value=response.data;
}

//初始化 挂载
onMounted(()=>{
        aa();   
})

</script>

src\components\OrDer.vue

<template>
  <div>
    我是{{ name }}
    <hr/>
    远程调用接口的内容:{{ feign }}
  </div>
</template>

<script setup>
import axios from "axios";
import {onMounted, ref} from 'vue'

let name=ref();
const aa = async()=>{
    const response = await axios.get('/order/bb');
    name.value=response.data; 
}

let feign=ref();
const bb = async()=>{
    const response = await axios.get('/order/list');
    feign.value=response.data; 
}

//初始化 挂载
onMounted(()=>{
        aa();
        bb();   
})
</script>

src\router\routes.js

import { createRouter, createWebHistory } from 'vue-router'

import OrDerVue from '@/components/OrDer.vue'

import KuCunVue from '@/components/KuCun.vue'

import AppVue from '@/App.vue'

const routes = [

{

path: '/login',

name: 'app',

component: AppVue

},

{

path: '/od',

name: 'od',

component: OrDerVue

},

{

path: '/kc',

name: 'kc',

component: KuCunVue

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

src\main.js

引入路由

import { createApp } from 'vue'

import App from './App.vue'

import router from './router/routes'

createApp(App).use(router).mount('#app')

前端打包dist

npm run build

把dist文件夹上传到服务器

mkdir -p /opt/qianduan/

cd /opt/qianduan/

unzip dist.zip

创建Dockerfile文件,把dist文件夹引入

vim Dockerfile

FROM nginx
#拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
COPY ./dist /usr/share/nginx/html
#拷贝nginx.conf文件到镜像下，替换掉原有的nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
#输出完成标志
RUN echo '构建完成'

创建nginx.conf

kucun是转到到网关对应的kucun项目上

order是转发到网关对应的order项目上

通过网关的服务名.命名空间访问

vi nginx.conf

worker_processes 1;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;

server {
listen 80;
server_name localhost;

location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}

location /kucun/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://gateway-svc.dev.svc.cluster.local:9000/kucun/;
}

location /order/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://gateway-svc.dev.svc.cluster.local:9000/order/;
}

}
}

打包成镜像

docker build -t dianshang:0.1 .

查看镜像

docker images

对镜像id打标签
docker tag 64b5d4553b0b 192.168.10.108:80/public/dianshang:0.1

登录harbor
docker login -u admin -p Harbor12345 192.168.10.108:80

向harbor推送镜像

docker push 192.168.10.108:80/public/dianshang:0.1

public项目在harbor提前创建好

创建命名空间

我们所有的pod secret service都是放在dev的命名空间下的

kubectl create ns dev

创建secret，用于登录harbor

命名空间是dev

kubectl create secret docker-registry harbor-secret --namespace=dev --docker-server=192.168.10.108:80 --docker-username=admin --docker-password=Harbor12345

查看secret

kubectl get secret -n dev

创建pod

使用harbor镜像仓库地址拉取gateway项目

并且通过secret登录harbor

vim dianshang-pod.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
name: dianshang
namespace: dev
spec:
selector:
matchLabels:
app: dianshang
replicas: 1
template:
metadata:
labels:
app: dianshang
spec:
imagePullSecrets:
- name: harbor-secret
containers:
- name: dianshang
image: 192.168.10.108:80/public/dianshang:0.1
imagePullPolicy: Always
ports:
- containerPort: 80

执行

kubectl apply -f dianshang-pod.yaml

查看pod

kubectl get pods -o wide -n dev

创建service 集群内访问

类型为ClusterIP 要想在浏览器访问需要使用ingress暴露端口号才能使用ingress的端口访问

type: ClusterIP 只能集群内部访问，不能在浏览器访问

targetPort 是pod的端口要和pod绑定这样才能访问到pod

port 是service的端口

cat > dianshang-svc.yaml <<-'EOF'
apiVersion: v1
kind: Service
metadata:
name: dianshang-svc
namespace: dev
spec:
type: ClusterIP
selector:
app: dianshang
ports:
- name: http
protocol: TCP
#集群内部访问的端口
port: 8080
#pod的端口
targetPort: 80
EOF

执行

kubectl apply -f dianshang-svc.yaml

查看svc

kubectl get svc -o wide -n dev

创建ingress 访问service

安装ingress

kubectl apply -f http://manongbiji.oss-cn-beijing.aliyuncs.com/ittailkshow/k8s/download/ingress-nginx-1.5.1.yaml

查看ingress暴露的端口号31266

kubectl get all -n ingress-nginx

创建ingress的配置

service.name和要的service的name一致

并且number也要和service的port一致

在这里我们要设置域名访问

cat > ingress-dianshang.yaml <<-'EOF'
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: ingress-dianshang
namespace: dev
annotations:
ingress.kubernetes.io/rewrite-target: /
spec:
ingressClassName: nginx
rules:
- host: dmg.abc.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: dianshang-svc
port:
number: 8080
EOF

执行

kubectl apply -f ingress-dianshang.yaml

查看ingress

kubectl get ingress -n dev

在我们的的windows电脑设置hosts

C:\Windows\System32\drivers\etc 下面的目录配置hosts

192.168.10.107 dmg.abc.com

在浏览器通过域名+ingress的端口访问

http://dmg.abc.com:31266/

创建service,浏览器访问

类型设置NodePort

port 是service的端口

对外暴露30004 端口（端口限制在30000-32767之间）用于浏览器访问的端口

targetPort 和pod 端口进行绑定

vi dianshang-svc.yaml

apiVersion: v1
kind: Service
metadata:
name: dianshang-svc
namespace: dev
spec:
type: NodePort
selector:
app: dianshang
ports:
- name: http
protocol: TCP
port: 8080
targetPort: 80
nodePort: 30004

执行