webstack-laravel 网站导航页portal容器化改造

伯庆

2023-12-01

webstack-laravel 网站导航页portal容器化改造

一获取服务器资源信息

目前是部署在Docker环境中的,查看部署命令

docker run --rm -v /var/run/docker.sock:/var/run/docker.sock cucker/get_command_4_run_container 9592

docker run -d \
 --name dreamy_pike \
 --env DB_DATABASE=webstackpage \
 --env DB_USERNAME=webstackpage \
 --env DB_PASSWORD=xxxxxx \
 --env DB_HOST=xxxxx \
 --env APP_URL=http://172.31.120.16:8000 \
 --ipc shareable \
 -p 8000:8000/tcp \
 -v /home/ops/data/webstack-laravel/uploads/:/opt/navi/public/uploads/ \
 -w /opt/navi \
 arvon2014/webstack-laravel:v1.2.1

关键信息

“/home/ops/data/webstack-laravel/uploads/:/opt/navi/public/uploads/” 文件挂载
“Image”: “arvon2014/webstack-laravel:v1.2.1”, 镜像版本
数据库连接信息

打包容器原始文件，uploads,images

cd /opt/navi/public
zip -r uploads.zip uploads

解压到NAS文件系统中

sudo mount -t nfs -o vers=3,nolock,proto=tcp,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,noresvport xxxxxxx-xxxxx.cn-zhangjiakou.nas.aliyuncs.com:/ /tmp/nas

[2138][root@logstash-ops-1a-nx-aws nas]# ls /tmp/nas
dev  html  mvn  qa


mkdir -p /tmp/nas/ops/portal/uploads

cd /tmp/nas/ops/portal/
unzip uploads.zip

二 k8s yaml清单

1 uploads-pv.yaml

---
apiVersion: v1
kind: PersistentVolume
metadata:
  name: portal-uploads-pv
  labels:
    alicloud-pvname: portal-uploads-pv
spec:
  accessModes:
  - ReadWriteMany
  capacity:
    storage: 8Gi
  csi:
    driver: nasplugin.csi.alibabacloud.com
    volumeAttributes:
      path: /ops/portal/uploads
      server: xxxxxx-xxxxx.cn-zhangjiakou.nas.aliyuncs.com
      vers: "3.0"
    volumeHandle: portal-uploads-pv
  mountOptions:
  - nolock,tcp,noresvport
  - vers=3
  
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: portal-uploads-pvc
  namespace: portal
spec:
  accessModes:
  - ReadWriteMany
  resources:
    requests:
      storage: 8Gi
  selector:
    matchLabels:
      alicloud-pvname: portal-uploads-pv
  storageClassName: ""
  volumeMode: Filesystem
  volumeName: portal-uploads-pv

在nas传入

2 deployment.yaml

注意APP_KEY，这个是给网页进行加密的，需要查看/opt/navi/.env中的APP_KEY 并传入这个参数，不然容器无法启动

apiVersion: apps/v1
kind: Deployment
metadata:
  name: "portal"
  namespace: "portal"
spec:
  replicas: 1
  selector:
    matchLabels:
      app: "portal"
  template:
    metadata:
      labels:
        app: "portal"
    spec:
      containers:
      - image: "arvon2014/webstack-laravel:v1.2.1"
        imagePullPolicy: "Always"
        name: "portal"
        ports:
        - containerPort: 8000
        env:
        - name: DB_DATABASE
          value: "webstackpage"
        - name: DB_USERNAME
          value: "webstackpage"
        - name: DB_PASSWORD
          value: "xxxxxxxxxxxxxxx"
        - name: DB_HOST
          value: "xxxxxxxxxxxx"
        - name: DB_PORT
          value: "3306"  
        - name: LOGIN_COPTCHA
          value: "true"
        - name: RUN_USER
          value: "daemon"
        - name: RUN_GROUP
          value: "daemon"
        - name: APP_KEY
          value: "base64:XIt7rIKL35Y9psX0VpLOrOCvLykYYYR/WuC3Sne7dGk="
        volumeMounts:
        - mountPath: "/opt/navi/public/uploads/"
          name: uploads
        resources:
            requests:
              memory: 512Mi
              cpu: 100m
            limits:
              memory: 4096Mi
              cpu: 1000m
        lifecycle:
          postStart:
            exec:
              command: ["/bin/sh","-c","/opt/navi/public/uploads/div-resource/diy.sh"]
      volumes:
      - name: uploads
        persistentVolumeClaim:
          claimName: portal-uploads-pvc

3 svc.yaml

kind: Service
apiVersion: v1
metadata:
  labels:
    app: "portal"
  name: "portal"
  namespace: "portal"
spec:
  selector:
    app: "portal"
  ports:
    - port: 80
      targetPort: 8000
  type: ClusterIP

4 ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: portal
  namespace: portal
spec:
  rules:
  - host: portal.ops.yunlizhi.cn
    http:
      paths:
      - path: /
        backend:
          service: 
            name: portal
            port:
              number: 80
        pathType: ImplementationSpecific
  tls:
  - hosts:
    - portal.ops.yunlizhi.cn
    secretName: tls-ops-ingress-2022

5 DIY资源存放位置

/opt/navi/public/uploads/div-resource

/opt/navi/resources/views/index.blade.php 网站首页去除右上角github
/opt/navi/resources/views/layouts/sidebar.blade.php 左下角关于本站
/opt/navi/public/vendor/web-stack/images/favicon.png 网页图标文件
/opt/navi/resources/views/layouts/header.blade.php 更换网页图标php
/opt/navi/public/vendor/web-stack/images/logo@2x.png 左上角logo
diy.sh 自定义资源脚本

三修改的网页文件内容以及启动脚本

diy.sh

#!/bin/sh

rm -rf /opt/navi/resources/views/index.blade.php
rm -rf /opt/navi/resources/views/layouts/sidebar.blade.php
rm -rf /opt/navi/public/vendor/web-stack/images/favicon.png
rm -rf /opt/navi/resources/views/layouts/header.blade.php
rm -rf /opt/navi/public/vendor/web-stack/images/logo@2x.png

cp /opt/navi/public/uploads/div-resource/index.blade.php /opt/navi/resources/views/index.blade.php
cp /opt/navi/public/uploads/div-resource/sidebar.blade.php /opt/navi/resources/views/layouts/sidebar.blade.php
cp /opt/navi/public/uploads/div-resource/favicon.png /opt/navi/public/vendor/web-stack/images/favicon.png
cp /opt/navi/public/uploads/div-resource/header.blade.php /opt/navi/resources/views/layouts/header.blade.php
cp /opt/navi/public/uploads/div-resource/logo@2x.png /opt/navi/public/vendor/web-stack/images/logo@2x.png

/opt/navi/resources/views/index.blade.php 网站首页去除右上角github

<!DOCTYPE html>
<html lang="zh">

@include('layouts.header')

<body class="page-body">
    <!-- skin-white -->
    <div class="page-container">

        @include('layouts.sidebar')

        <div class="main-content">
            <nav class="navbar user-info-navbar" role="navigation">
                <!-- User Info, Notifications and Menu Bar -->
                <!-- Left links for user info navbar -->
                <ul class="user-info-menu left-links list-inline list-unstyled">
                    <li class="hidden-sm hidden-xs">
                        <a href="#" data-toggle="sidebar">
                            <i class="fa-bars"></i>
                        </a>
                    </li>
                </ul>
            </nav>

            @include('layouts.content')


            <!-- Main Footer -->
            <!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
            <!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
            <!-- Or class "fixed" to  always fix the footer to the end of page -->
            <footer class="main-footer sticky footer-type-1">
                <div class="footer-inner">
                    <!-- Add your copyright text here -->
                    <!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
                    <div class="go-up">
                        <a href="#" rel="go-top">
                            <i class="fa-angle-up"></i>
                        </a>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <!-- 锚点平滑移动 -->
    <script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);

            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-sm').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();

            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top - 30
            }, {
                duration: 500,
                easing: "swing"
            });
        });
        return false;
    });

    var href = "";
    var pos = 0;
    $("a.smooth").click(function(e) {
        $("#main-menu li").each(function() {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        e.preventDefault();
        href = $(this).attr("href");
        pos = $(href).position().top - 30;
    });
    </script>
    <!-- Bottom Scripts -->
    <script src="/vendor/web-stack/js/bootstrap.min.js"></script>
    <script src="/vendor/web-stack/js/TweenMax.min.js"></script>
    <script src="/vendor/web-stack/js/resizeable.js"></script>
    <script src="/vendor/web-stack/js/joinable.js"></script>
    <script src="/vendor/web-stack/js/xenon-api.js"></script>
    <script src="/vendor/web-stack/js/xenon-toggles.js"></script>
    <!-- JavaScripts initializations and stuff -->
    <script src="/vendor/web-stack/js/xenon-custom.js"></script>
</body>

</html>

/opt/navi/resources/views/layouts/sidebar.blade.php 左下角关于本站

<div class="sidebar-menu toggle-others fixed">
    <div class="sidebar-menu-inner">
        <header class="logo-env">
            <!-- logo -->
            <div class="logo">
                <a href="/" class="logo-expanded">
                    <img src="/vendor/web-stack/images/logo@2x.png" width="100%" alt="" />
                </a>
                <a href="/" class="logo-collapsed">
                    <img src="/vendor/web-stack/images/logo-collapsed@2x.png" width="40" alt="" />
                </a>
            </div>
            <div class="mobile-menu-toggle visible-xs">
                <a href="#" data-toggle="user-info-menu">
                    <i class="linecons-cog"></i>
                </a>
                <a href="#" data-toggle="mobile-menu">
                    <i class="fa-bars"></i>
                </a>
            </div>
        </header>
        <ul id="main-menu" class="main-menu">
            @foreach ($categories as $categorie)
                <li>
                    @if (count($categorie->children) == 0 && $categorie->parent_id == 0)
                        <a href="#{{ $categorie->title }}" class="smooth">
                            <i class="fa fa-fw {{ $categorie->icon }}"></i>
                            <span class="title">{{ $categorie->title }}</span>
                        </a>
                    @elseif (count($categorie->children) != 0 && $categorie->parent_id == 0)
                        <a>
                            <i class="fa fa-fw {{ $categorie->icon }}"></i>
                            <span class="title">{{ $categorie->title }}</span>
                        </a>
                        <ul>
                            @foreach ($categorie->children as $child)
                                <li>
                                    <a href="#{{ $child->title }}" class="smooth">
                                        <span class="title">{{ $child->title }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
            @endforeach

        </ul>
    </div>

更换网页图标

cp /opt/navi/public/uploads/favicon.png /opt/navi/public/vendor/web-stack/images/favicon.png

/opt/navi/resources/views/layouts/header.blade.php 修改网站图标名字

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="viggo">
    <title>运荔枝</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="/vendor/web-stack/images/favicon.png">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
    <link rel="stylesheet" href="/vendor/web-stack/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/bootstrap.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/xenon-core.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/xenon-components.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/xenon-skins.css">
    <link rel="stylesheet" href="/vendor/web-stack/css/nav.css">
    <script src="/vendor/web-stack/js/jquery-1.11.1.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- / FB Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://www.webstack.cc/">
    <meta property="og:title" content="运荔枝 - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
    <meta property="og:description" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
    <meta property="og:image" content="http://webstack.cc/assets/images/webstack_banner_cn.png">
    <meta property="og:site_name" content="运荔枝 - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
    <!-- / Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="运荔枝 - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
    <meta name="twitter:description" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
    <meta name="twitter:image" content="http://www.webstack.cc/assets/images/webstack_banner_cn.png">

webstack-laravel 网站导航页portal容器化改造

webstack-laravel 网站导航页portal容器化改造

一获取服务器资源信息

二 k8s yaml清单

三修改的网页文件内容以及启动脚本

相关阅读

相关文章

相关问答

相关文档

webstack-laravel 网站导航页portal容器化改造

webstack-laravel 网站导航页portal容器化改造

一 获取服务器资源信息

二 k8s yaml清单

三 修改的网页文件内容以及启动脚本

相关阅读

相关文章

相关问答

相关文档

一获取服务器资源信息

三修改的网页文件内容以及启动脚本