webstack-laravel 网站导航页portal容器化改造
webstack-laravel 网站导航页portal容器化改造
一 获取服务器资源信息
目前是部署在Docker环境中的,查看部署命令
docker run --rm -v /var/run/docker.sock:/var/run/docker.sock cucker/get_command_4_run_container 9592docker 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 qamkdir -p /tmp/nas/ops/portal/uploadscd /tmp/nas/ops/portal/
unzip uploads.zip二 k8s yaml清单
1 uploads-pv.yaml
---
apiVersion: v1
kind: PersistentVolume
metadata:name: portal-uploads-pvlabels:alicloud-pvname: portal-uploads-pv
spec:accessModes:- ReadWriteManycapacity:storage: 8Gicsi:driver: nasplugin.csi.alibabacloud.comvolumeAttributes:path: /ops/portal/uploadsserver: xxxxxx-xxxxx.cn-zhangjiakou.nas.aliyuncs.comvers: "3.0"volumeHandle: portal-uploads-pvmountOptions:- nolock,tcp,noresvport- vers=3---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:name: portal-uploads-pvcnamespace: portal
spec:accessModes:- ReadWriteManyresources:requests:storage: 8Giselector:matchLabels:alicloud-pvname: portal-uploads-pvstorageClassName: ""volumeMode: FilesystemvolumeName: 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: 1selector:matchLabels:app: "portal"template:metadata:labels:app: "portal"spec:containers:- image: "arvon2014/webstack-laravel:v1.2.1"imagePullPolicy: "Always"name: "portal"ports:- containerPort: 8000env:- name: DB_DATABASEvalue: "webstackpage"- name: DB_USERNAMEvalue: "webstackpage"- name: DB_PASSWORDvalue: "xxxxxxxxxxxxxxx"- name: DB_HOSTvalue: "xxxxxxxxxxxx"- name: DB_PORTvalue: "3306" - name: LOGIN_COPTCHAvalue: "true"- name: RUN_USERvalue: "daemon"- name: RUN_GROUPvalue: "daemon"- name: APP_KEYvalue: "base64:XIt7rIKL35Y9psX0VpLOrOCvLykYYYR/WuC3Sne7dGk="volumeMounts:- mountPath: "/opt/navi/public/uploads/"name: uploadsresources:requests:memory: 512Micpu: 100mlimits:memory: 4096Micpu: 1000mlifecycle:postStart:exec:command: ["/bin/sh","-c","/opt/navi/public/uploads/div-resource/diy.sh"]volumes:- name: uploadspersistentVolumeClaim: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: 80targetPort: 8000type: ClusterIP
4 ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:name: portalnamespace: portal
spec:rules:- host: portal.ops.yunlizhi.cnhttp:paths:- path: /backend:service: name: portalport:number: 80pathType: ImplementationSpecifictls:- hosts:- portal.ops.yunlizhi.cnsecretName: 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/shrm -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.pngcp /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">
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！