前端部署问题汇总
这里写目录标题Dockerfile文件K8s部署前端命令打镜像开始部署额外命令linux基础命令使用遇到的问题Uncaught SyntaxError: Unexpected token ‘<‘ 错误403 forbiddenk8s -- yaml 文件Dockerfile文件# docker images -a |grep nginx查看nginx的版本对应修改FROM nginx:1.19.8
这里写目录标题
Dockerfile文件
# docker images -a |grep nginx 查看nginx的版本对应修改
FROM nginx:1.19.8
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
ADD default.conf /etc/nginx/conf.d/
ADD dist/ /usr/share/nginx/html
# -R “递归”放开权限! 否则可能出现
RUN chmod -R 755 /usr/share/nginx/html
K8s部署前端命令
打镜像
docker build -t hub.dw/library/my-vue-web:v1.0 .
docker images -a |grep my-vue-web
docker push hub.dw/library/my-vue-web:v1.0
# --- 如果打镜像和部署的服务器不在同一台 或者 yaml文件指定nodeName,并不是打镜像的这台服务器 ----------
docker save hub.dw/library/my-vue-web:v1.0 | gzip > my-vue-web:v1.0.tar.gz
scp ./my-vue-web:v1.0.tar.gz apps@10.222.102.3:/home/apps/fuzuxian
docker load -i my-vue-web:v1.0.tar.gz
docker images -a |grep my-vue-web
docker push hub.dw/library/my-vue-web:v1.0
# docker tag hub.dw/library/my-vue-web:v1.0 hub.dw/library/my-vue-web:v1.1
# -----------------------------------------------------------------------------
开始部署
/apps/bin/kubectl delete -f /opt/data/k8s/my-vue-web.yaml
# /apps/bin/kubectl delete -f /opt/data/k8s/my-vue-web.yaml -n mynamespace
vi /opt/data/k8s/my-vue-web.yaml
# /apps/bin/kubectl get node
# --------- 修改 yaml文件 ---------------------------------------
ports:
- port: 80
targetPort: 80
protocol: TCP
# nodePort: 30106
type: NodePort
# 1. apiVersion: extensions/v1beta1
kind: Deployment
spec:
# 2. nodeName: node1
containers:
- name: my-vue-web
# 3. image: hub.dw/library/my-vue-web:v1.0
# ------------------------------------------------------------
/apps/bin/kubectl create -f /opt/data/k8s/my-vue-web.yaml
/apps/bin/kubectl get pod -o wide |grep my-vue-web
访问: http://vip:port
如果指定node节点部署 也可 http://node1_ip:port
额外命令
# 查看pod详情
/apps/bin/kubectl describe pod my-vue-web-7d764cfd68-jkrqj -n mynamespace
# 查看所有的命名空间 --- mynamespace \ default、 kube-system、 kube-public \ kube-node-lease
/apps/bin/kubectl get ns
# 查看创建的服务---查看集群给服务自动分配的ip和端口,ClusterIP 、 NodePort
/apps/bin/kubectl get svc
# 查看某个服务的日志
/apps/bin/kubectl logs -f my-vue-web-6b545dcf86-z6mhz
# 查看node节点
/apps/bin/kubectl get nodes
# 查看deployment
/apps/bin/kubectl get deployment -n mynamespace
# 删除某个镜像
docker rmi -f hub.dw/library/my-vue-web:v1.0
# 进入所起的pod内部
/apps/bin/kubectl exec -it my-vue-web-7d764cfd68-jkrqj bash -n mynamespace
cd /etc/nginx/
cat /etc/nginx/conf.d/default.conf
linux基础命令使用
# vi 全局替换 在esc状态下
:%s/源字符串/目的字符串/g
# vi 删除游标所在的一整行 在esc状态下
ctl + d + d
# vi 全局查找
命令模式下输入“/字符串”,例如“/Section 3”
如果查找下一个,按“n”即可
# 搜索历史命令 ctrl + r
ctrl+r -》输入某条命令的关键字-》找出来对应的命令,按右光标键
遇到的问题
Uncaught SyntaxError: Unexpected token ‘<‘ 错误
ADD dist/ /usr/share/nginx/html
# -R “递归”放开权限! 否则可能出现
RUN chmod -R 755 /usr/share/nginx/html
出现 静态文件下所有文件路径访问是对的,,,但是没有权限,respose 全都是 inex.html的内容…
如果 dockerfile文件没有第二个命令,,,可在打镜像的之前手动执行chmod -R 755 ./dist/
403 forbidden
yaml 文件 挂载的 nginx 文件 — default.conf文件 看看是否有权限访问
request的header的包含下划线
nginx默认request的header的那么中包含’_’时,会自动忽略掉
在nginx里的nginx.conf配置文件中的http部分中添加配置:
underscores_in_headers on;
跨域 — nginx配置
Nginx配置跨域请求 Access-Control-Allow-Origin *
location /userpath/ {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://10.144.1.75:30010/;
}
跨域请求中是否可带cookie – 代码axios配置
代码axios配置 ----------- withCredentials
跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),即,当前请求为跨域类型时是否在请求中协带cookie。
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
withCredentials: true, // 跨域请求时发送Cookie
timeout: 60000,
headers: {
"Content-Type": "application/json; charset=UTF-8;"
}
});
或者在main.js中:
//vue的main.js
axios.defaults.withCredentials = true;//允许跨域携带cookie信息
当配置了xhr.withCredentials = true时,必须在后端增加 response 头信息Access-Control-Allow-Origin,且必须指定域名,而不能指定为*。
还要设置header(‘Access-Control-Allow-Credentials: true’)
在后台代码返回response时做如下处理:
private boolean recharge(HttpServletRequest request, HttpServletResponse response) throws Exception {
String url = request.getHeader("Origin");
logger.debug("Access-Control-Allow-Origin:" + url);
if (!StringUtils.isEmpty(url)) {
String val = response.getHeader("Access-Control-Allow-Origin");
if (StringUtils.isEmpty(val)) {
response.addHeader("Access-Control-Allow-Origin", url);
response.addHeader("Access-Control-Allow-Credentials", "true");
}
}
return true;
}
k8s – yaml 文件
spec:
containers:
- name: my-vue-web
image: hub.dw/library/my-vue-web:v1.0
ports:
- containerPort: 80
name: vue-web
volumeMounts:
- mountPath: "/usr/share/nginx/html/config"
name: my-config
- mountPath: "/etc/nginx/conf.d"
name: nginx-config
volumes:
- name: my-config
hostPath:
path: /opt/data/config/front-end/my-vue-web/config
- name: nginx-config
hostPath:
path: /opt/data/config/front-end/my-vue-web/nginx
-1)
挂载 的 nginx — default.conf文件 路径: /opt/data/config/front-end/my-vue-web/nginx
-2)
代码中访问并获取配置文件,,改配置文件存在服务器中的路径:
/opt/data/config/front-end/my-vue-web/config
-3)
mountPath: "/usr/share/nginx/html/config"
dockerfile 有个命令 ADD dist/ /usr/share/nginx/html
dist 文件里面就有 config文件
nginx – default文件
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
proxy_ssl_verify off;
# 第一个参数是要被替换的,第二个参数是替换后的
sub_filter '</head>' '</head> <style>.el-container > .el-aside, .el-container > .el-header{display: none;}</style>';
sub_filter_once off; #替换所有的,默认是on,替换第一个
}
更多推荐
所有评论(0)