zoukankan      html  css  js  c++  java
  • 前端文件采用传统nginx部署访问,后端应用放到k8s中的操作配置说明

    部署结构

    1.把前端dist文件夹放到nginx的html目录下
    2.把后端应用部署到k8s中
    3.nacos,redis,mysql,rabbitmq都采用外置的,有关配置都写道nacos中

    nginx

    nginx安装在主机192.168.80.221上,测试域名为www.xxx.com
    在这个主机的/etc/hosts上添加一条解析

    # cat /etc/hosts
    192.168.80.221 www.xxx.com
    

    当然了,本机windows电脑上的hosts文件也添加这个解析,方便本机使用浏览器访问这个域名,找到对应的主机。

    前端文件

    1.前端文件:vue.config.js
    这个文件中连接后端的地址,是本地测试用的,使用的命令是:yarn run server,在这里不修改这个文件,保持原样

      devServer: {
        port: 3000,
        proxy: {
          '/jdd-parking-cloud-admin': {
            target: 'http://localhost:8093/', //请求本地后台项目
            ws: true,
            changeOrigin: true,
            pathRewrite: {
              '^/jdd-parking-cloud-admin': '/' //默认所有请求前缀,需要去掉
            }
          }
        }
      },
    

    2.前端文件:srcutils equest.js

    这个文件中连接后端的地址,是部署到线上生产使用的,使用的命令是:yarn run build,会生成一个dist文件夹,在这里修改这个文件,注意域名和路径要跟nginx的配置保持一致,www.xxx.com和/jdd-parking-cloud-admin

    // 创建 axios 实例
    const service = axios.create({
      baseURL: process.env.NODE_ENV === 'production' ? 'http://www.xxx.com/jdd-parking-cloud-admin' : '/jdd-parking-cloud-admin',  
      // baseURL: 'https://www.jdd966.com/jdd-boot',
      // baseURL: '', // api base_url
      timeout: 30000 // 请求超时时间
    })
    

    后端

    后端项目使用的Dockerfile文件内容

    FROM jdd.io/jre:1.8.0_275
    MAINTAINER 1103324414@qq.com
    EXPOSE 8093
    ADD target/jdd-parking-cloud-admin.jar jdd-parking-cloud-admin.jar
    ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom", "-jar","jdd-parking-cloud-admin.jar"]
    CMD ["--spring.profiles.active=test"]
    

    后端项目使用的.gitlab-ci.yml文件内容

    variables:
      DOCKER_DRIVER: overlay2
      MAVEN_CLI_OPTS: "-s .m2/settings.xml --batch-mode"
      MAVEN_OPTS: "-Dmaven.repo.local=.m2/repository"
      #CURRENT_PROJECT: gateway # 编译的子项目,每次需要修改这个
    
    cache:
      paths:
        - .m2/repository/
    
    stages:
      - package
      - build
    
    maven_step:
      tags:
        - maven
      stage: package
      script:
        - mvn clean package -Dmaven.test.skip=true
      artifacts:
        paths:
          - target/*.jar
      only:
        - prod
    
    develop_docker_step:
      tags:
        - docker
      stage: build
      script:
        - export TAG=`date "+%Y%m%d%H%M%S"`
        - docker build -t jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG .
        - docker login -u admin -p admin123 jdd.io
        - docker push jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG
        - echo $TAG
        - docker rmi jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG
      only:
        - prod
    

    后端应用具体部署方式中的关键点

    k8s中部署
    1.新增名称空间:jdd-k8s
    
    2.新增ConfigMap
    名称:park-config
    数据:
    NACOS_SERVER_ADDR 192.168.2.162:8848
    PROFILE test
    
    ![](https://img2020.cnblogs.com/blog/794174/202106/794174-20210630143251451-461930710.png)
    
    
    3.容器参数
    spring的profile Nacos配置中心地址 Nacos服务发现地址 服务端口
    --spring.profiles.active=${PROFILE} --spring.cloud.nacos.config.server-addr=${NACOS_SERVER_ADDR} --spring.cloud.nacos.discovery.server-addr=${NACOS_SERVER_ADDR} --server.port=#根据实际情况来定
    
    
    4.容器环境变量
    park-config
    
    5.容器端口 	
    tcp 根据实际情况来定
    
    ![](https://img2020.cnblogs.com/blog/794174/202106/794174-20210630143406084-1561084424.png)
    
    
    6.使用的镜像是根据gitlab-runner生成的,上传到nexus仓库里的
    

    k8s中后端应用pod启动后的日志显示如下:

    ----------------------------------------------------------
            Application Jdd-Parking-Cloud-Admin is running! Access URLs:
            Local:          http://localhost:8093/
            External:       http://10.0.2.20:8093/
            swagger-ui:     http://10.0.2.20:8093/swagger-ui.html
    ----------------------------------------------------------
    

    部署到k8s中,并且nginx代理需要访问到,所以需要给后端应用设置service,并且选择NodePort方式,记住节点端口号,这里假设地址后端应用访问地址是:http://192.168.2.163:30594
    并且通过地址:http://192.168.2.163:30594/swagger-ui.html 可以访问到后端接口文件,说明后端应用这边没啥问题。

    配置nginx

    把前端dist文件夹放到nginx的html目录下,并重命名为mgr,然后重启nginx

    server {
        listen       80;
        server_name  www.xxx.com; # 本机解析域名
        location / {
            root  /usr/local/openresty/nginx/html;
            index  index.html index.htm;
            if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html?s=$1 last;
                break;
            }
        }
        # 注意,路径最后的/不能少
        location /jdd-parking-cloud-admin/ {
            proxy_pass              http://192.168.2.163:30594/;  # 请求的是k8s中的后端应用,NodePort形式的service
            proxy_set_header        Host park-single-system;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
    

    若是页面中有图片没有显示出来,则可以直接修改nginx配置,增加图片访问路径

    location /static/images/ {
        alias  /home/park/images/;
        autoindex on;
    }
    

    测试访问

    用本地的windows电脑打开浏览器,输入地址:http://www.xxx.com/mgr 进行访问,出现登录界面后,且显示有验证码,输入账号密码能登陆进去

    更新

    1.前端
    本机yarn build后生成dist文件夹,把该文件夹里面的文件直接替换mgr目录下的文件

    2.后端
    本地修改代码后,提交到gitlab,触发gitlab-runner根据.gitlab-ci.yml文件自动构建docker镜像上传到nexus仓库
    然后在k8s界面,找到对应的后端应用,直接更新pod使用的镜像版本:标签

  • 相关阅读:
    Promise关键知识
    CSS实现简易的轮播图
    绝对定位和相对定位的一些特性
    行内元素及其浮动
    webpack实践总结
    less语法详解
    js模拟事件
    jquery各种事件绑定的区别
    前端路由实现的关键知识点
    js鼠标事件相关知识
  • 原文地址:https://www.cnblogs.com/sanduzxcvbnm/p/14953929.html
Copyright © 2011-2022 走看看