云原生docker部署Alist

article4个月前更新 done
182 0 0

官方文档:https://github.com/alist-org/alist

演示网站:https://pan.cddone.com

云原生docker部署Alist

部署Docker教程:https://bj.cddone.com/doc/14/

部署

1、创建容器工作目录

mkdir alist && cd alist

2、创建容器yaml文件

vim dokcer-compose.yaml
  • 指定镜像名称
  • 设置容器名称
  • 设置容器自启动
  • 映射端口
  • 映射配置文件路径
  • 映射共享文件路径
version: '3.3'
services:
    alist:
        container_name: alist
        image: 'xhofe/alist:latest'
        restart: always
        ports:
            - '5244:5244'
        volumes:
            - '/home/docker/alist/conf.d:/opt/alist/data'
            - '/data:/mnt'
        environment:
            - PUID=0
            - PGID=0
            - UMASK=022

3、运行容器

docker-compose up -d

4、查看容器信息

docker ps
CONTAINER ID   IMAGE                      COMMAND                  CREATED        STATUS        PORTS                                                  NAMES
d8842a49b84a xhofe/alist:latest "/entrypoint.sh" 2 days ago Up 24 hours 0.0.0.0:5244->5244/tcp, :::5244->5244/tcp, 5245/tcp alist

5、初始化登录密码为admin

docker exec -it alist ./alist admin set admin

6、访问ip+端口测试

http://ip:5244

7、设置nginx反向代理

    server {
        listen  443 ssl;
        server_name pan.cddone.com;
        
        location / {
        proxy_redirect off;
        proxy_pass http://localhost:5244;
        proxy_set_header Host $http_host;
        proxy_set_header Range $http_range;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header If-Range $http_if_range;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 20000m;
        }
    }

8、界面美化

  • 自定义头部(字体和透明度)
<!--Alist V3建议添加的,已经默认添加了,如果你的没有建议加上-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!--引入字体,全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

<!-- Font6,自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">

<style>

/*白天背景图*/
.hope-ui-light{
  background-image: url(https://pan.cddone.com/d/picture/cloud.png) !important;
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
/*夜间背景图*/
.hope-ui-dark {
  background-image: url(https://dh.cddone.com/wp-content/uploads/2023/08/alist-sight.png) !important;
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
/*主列表夜间模式透明,50%这数值是控制透明度大小的*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*readme夜间模式透明,50%这数值是控制透明度大小的*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*主列表透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}


/*白天模式代码块透明*/
.hope-ui-light pre{
    background-color: rgba(255, 255, 255, 0.1) !important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
    background-color: rgba(255, 255, 255, 0) !important;
}

/*底部CSS,.APP .tanle这三个一起的*/
dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}
/*去掉底部*/
.footer {
    display: none !important;
}

/*全局字体*/
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}

/*渐变背景CSS*/
#canvas-basic {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -999;
}

</style>
  • 自定义内容(皮肤加鼠标特效)
<div id="customize" style="display: none;">
    <div>
		<!--音乐播放器-->
        <meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="https://cddone.com/wp-content/uploads/2023/08/Under-_-Over.m4a"></meting-js>
		
        <br />
        <center class="dibu">
              
        <br />
        <br />
          
            <div style="font-size: 15px; font-weight: bold;">

                <span class="nav-item">
                    <a class="nav-link" href="https://cddone.com" target="_blank">
                        <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        cddone
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes"
                        target="_blank">
                        <i class="fab fa-qq" style="color:#409EFF" aria-hidden="true">
                        </i>
                        QQ |
                    </a>
                </span>
                <!--版权,请尊重作者-->
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
                        <i class="fas fa-comment-lines" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        Alist驱动 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="/@manage" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        管理
                    </a>
                </span>
                  
         <br />
        <br />
          
            </div>
        </center>
    </div>

<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>


<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>
© 版权声明

暂无评论

暂无评论...