前端部署问题汇总

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，替换第一个
    }