Appearance
k8s运维(九)部署前端项目
1.创建React项目 2.上传image 3.k8s部署项目
一、创建前端项目
在这里,我创建的是react的项目
$ yarn create vite
选择react项目
访问:http://127.0.0.1:5173/
打包项目
$ yarn build
会有一个dist产物
二、上传image
1.在阿里云创建镜像仓库
创建的仓库名:web-deploy-demo
2.登录阿里云
在你的主机上,本地登录docker
$ docker login --username=wyt568 registry.cn-qingdao.aliyuncs.com
Login Succeeded
3.创建本地镜像
- 编写nginx.conf文件
map $sent_http_content_type $expires {
default off;
text/html -1;
text/css max;
application/javascript max;
~image/ max;
}
server {
listen 81;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
server_name localhost;
# 自定义过期时间,解决微信浏览器缓存问题
expires $expires;
# 开启
# gzip 预编译
gzip_static on;
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 3;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss application/javascript text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
underscores_in_headers on;
root /usr/share/nginx/html;
location / {
add_header Access-Control-Allow-Origin *;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~*\.(map)$ {
# 允许和禁止ip访问
# allow 192.168.0.0/16;
# deny all;
}
location ^~ /devops/admin/ {
add_header Access-Control-Allow-Origin *;
alias /usr/share/nginx/html/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 可对api的防跨域
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
# proxy_pass http://10.110.145.39:8081;
}
# error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
- 创建Dockerfile
FROM nginx:latest
WORKDIR /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY dist/ /usr/share/nginx/html/
执行:
$ docker build -t web-deploy-demo:v1 .
➜ web-deploy-demo git:(master) ✗ docker images | grep web-deploy
web-deploy-demo v1 420adc94203c 20 seconds ago 142MB
4.登录阿里云镜像仓库
$ docker login --username=wyt568 registry.cn-qingdao.aliyuncs.com
$ docker tag [ImageId] registry.cn-qingdao.aliyuncs.com/jameswu-web/web-deploy-demo:[镜像版本号]
$ docker push registry.cn-qingdao.aliyuncs.com/jameswu-web/web-deploy-demo:[镜像版本号]
三、k8s部署
创建yaml文件 web-deploy.yaml 注意:集群必须docker login 阿里云
apiVersion: apps/v1
kind: Deployment
metadata:
name: web-deploy-demo
namespace: default
labels:
app: web-deploy-demo
spec:
replicas: 1
selector:
matchLabels:
app: web-deploy-demo
template:
metadata:
labels:
app: web-deploy-demo
spec:
containers:
- name: web-deploy-demo
image: registry.cn-qingdao.aliyuncs.com/jameswu-web/web-deploy-demo:v1
ports:
- containerPort: 80
resources:
requests:
cpu: "1000m"
memory: "1Gi"
limits:
cpu: "2000m"
memory: "2Gi"
---
apiVersion: v1
kind: Service
metadata:
name: web-deploy-demo-service
namespace: default
spec:
type: NodePort
selector:
app: web-deploy-demo
ports:
- port: 80
targetPort: 80
nodePort: 30003
执行
$ kubectl apply -f web-deploy.yaml
如果出现image拉去不下来,可查看运维(十) 文章
最终
查看svc
kubectl get svc -A
NAMESPACE NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
default web-deploy-demo-service NodePort 10.107.61.6 <none> 80:30003/TCP 3h20m
访问:http://10.211.55.20:30003 可访问,代表部署成功