k8s部署vue项目

1、环境准备

提前搭建好的k8s集群准备：

192.168.56.30（master节点）

192.168.56.31（node节点）

harbor远程仓库准备：

192.168.56.14

2、创建nginx镜像

1）准备一个nginx安装包，我们这里的版本是1.18.0的

2）在同级目录下创建一个Dockerfile文件，内容如下
#基于centos基础镜像
FROM centos:7#作者信息
MAINTAINER kgf#安装环境依赖
RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel #将nginx安装包拷贝并且安装到/opt目录下
ADD nginx-1.18.0.tar.gz /opt/#创建/usr/local/nginx目录
RUN mkdir -p /usr/local/nginx#编译安装nginx
RUN cd /opt/nginx-1.18.0 && ./configure --prefix=/usr/local/nginx && make && make install#暴露80端口
EXPOSE 80 #启动nginx
ENTRYPOINT /usr/local/nginx/sbin/nginx && tail -f /etc/passwd
3）使用Dockerfile创建镜像

命令：docker build -t hub.harbor.com/library/kgf-nginx:v1 .

推送到harbor: docker push hub.harbor.com/library/kgf-nginx:v1

4）运行该镜像测试nginx是否正常运行

命令：docker run -d --name 自定义容器名称 -p 8080:80 镜像id /bin/bash

3、创建vue项目镜像

1）配置vue项目访问后端的配置文件

2）使用命令打包vue项目得到一个dist包

命令：npm run build

3）准备一个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 /gateway/ {proxy_pass http://192.168.56.30:32447;           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Real-IP $remote_addr;add_header Content-Type "text/plain;charset=utf-8";add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST';}location / {root   /usr/local/nginx/html;try_files $uri $uri/ /index.html last;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

4）创建Dockerfile文件，内容如下：

#基于centos基础镜像
FROM hub.harbor.com/library/kgf-nginx:v1#作者信息
MAINTAINER kgfCOPY dist\/usr/local/nginx/html/#删除默认的nginx.conf配置文件
RUN rm -rf /usr/local/nginx/conf/nginx.conf#拷贝nginx.conf配置文件
COPY nginx.conf  /usr/local/nginx/conf/#暴露80端口
EXPOSE 80 #启动nginx
ENTRYPOINT /usr/local/nginx/sbin/nginx && tail -f /etc/passwd

5）执行Dockerfile文件生成镜像

命令：docker build -t hub.harbor.com/library/kgf-vue:v1 .

推送到harbor: docker push hub.harbor.com/library/kgf-vue:v1

6）创建vue项目的yaml文件，kgf-vue-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:name: kgf-vuenamespace: kgf-devlabels:app: kgf-vue
spec:replicas: 1selector:matchLabels: { app: kgf-vue }strategy: rollingUpdate:maxSurge: 1maxUnavailable: 1type: RollingUpdate  template:metadata:labels: { app: kgf-vue }spec:containers:- name: kgf-vueenv:- name: kgf-vuevalueFrom:fieldRef: { fieldPath: metadata.name }image: hub.harbor.com/library/kgf-vue:v1imagePullPolicy: IfNotPresentresources: limits:cpu: 1memory: 512Mirequests:cpu: 0.4memory: 256Mi

7）创建vue项目的svc文件，kgf-vue-service.yaml

#service版本
apiVersion: v1
#这个表示资源类型我们创建的是Service
kind: Service
metadata: #这个里面定义的是Service中我们创建的对象信息#对象名称name: kgf-vue#元数据名称空间namespace: kgf-devlabels:app: kgf-vue
spec: #下面定义service的详细信息#类型为NodePorttype: NodePortselector: #通过标签选择器去查询对应版本的pod，最后组成一个serviceapp: kgf-vueports: #指定容器需要用到的端口列表#指定端口名称 - name: http#服务对外的端口port: 8080protocol: TCP#容器的端口targetPort: 80

8)执行上面创建的yaml文件

命令：

kubectl apply -f kgf-vue-deployment.yaml

kubectl apply -f kgf-vue-service.yaml

4、浏览器访问效果

k8s部署vue项目相关推荐

华为云软件开发平台(DevCloud)流水线式部署Vue项目，并且通过域名访问
一.准备环境 1.1.华为弹性云服务器(ECS)或者云耀云服务器(HECS) 1.2.软件开发平台(DevCloud) 1.3.容器镜像服务(SWR) 1.4.云解析服务(SWR) 二.软件开发平台( ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
nginx下部署vue项目
nginx下部署vue项目今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://ngin ...
nginx下部署vue项目概览 - （资源篇）
相关博客: nginx下部署vue项目概览这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...
如何使用Caddy部署Vue项目
如何使用Caddy部署Vue项目 Caddy配置 rewrite {regexp .*to {path} / }
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...

k8s部署vue项目

1、环境准备

2、创建nginx镜像

3、创建vue项目镜像

k8s部署vue项目相关推荐

最新文章

热门文章