基于typecho+webstack的导航栏系统部署与使用

前言

chrome收藏夹里收藏的东西越来越多，找了一款开源的导航栏系统来整理自己的标签。

参考：关于 WebStack_钻芒二开版

部署

在从零开始-搭建Typecho Joe主题的博客基础上操作，准备一个新的域名用来做网址导航。

源码获取

升级php

代码语言：javascript复制

FROM php:7.4-fpm

# Install modules
RUN sed -i "s@http://deb.debian.org@http://mirrors.aliyun.com@g" /etc/apt/sources.list && 
        rm -Rf /var/lib/apt/lists/* && 
    apt-get update && apt-get install -y 
        libfreetype6-dev 
        librabbitmq-dev 
        libssh-dev 
        libjpeg62-turbo-dev 
        libmcrypt-dev 
        libicu-dev 
        libxml2-dev 
        libssl-dev 
        git 
        wget 
        ssh 
        libpcre3-dev 
        --no-install-recommends

RUN docker-php-ext-install bcmath intl  mysqli pdo_mysql exif xmlrpc

RUN apt-get purge -y g   
    && apt-get autoremove -y 
    && rm -r /var/lib/apt/lists/* 
    && rm -rf /tmp/*

COPY composer.phar  /usr/local/bin/composer

RUN chmod  x /usr/local/bin/composer

RUN usermod -u 1000 www-data

EXPOSE 9000
CMD ["php-fpm"]

代码语言：javascript复制

docker-compose up --build  php

配置nginx

代码语言：javascript复制

# Appadmin
server {
    listen     81;
    server_name  0.0.0.0;
    root  /www/web/typecho-nav/;
    server_tokens off;
    include none.conf;
    index index.php index.html index.htm;
    access_log /www/web_logs/access2.log wwwlogs;
    error_log  /www/web_logs/error2.log  notice;

    client_max_body_size 50m;

    location ~ .php$ {
        fastcgi_pass   php:9000;
        fastcgi_index  index.php;
        include fcgi.conf;
        fastcgi_buffers      8 4K;
        fastcgi_buffer_size  4K;
    }

    location ~* .(eot|ttf|woff|woff2|svg)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    }


    location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }
    location ~ .*.(js|css)?$ {
        expires      12h;
    }
}

代码语言：javascript复制

upstream nav-backend {
    server 172.17.0.10:8083 weight=1 fail_timeout=10s max_fails=1 ;
  }

  server {
    listen 443 ssl http2;
    server_name nav.itbunan.xyz;
    server_tokens off;
    ssl_certificate /etc/nginx/cert/nav.itbunan.xyz_bundle.crt;
    ssl_certificate_key /etc/nginx/cert/nav.itbunan.xyz.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
    listen 80;
    if ($scheme = http) {
      return 301 https://$host:443$request_uri;
    }
    location / {
      proxy_pass http://nav-backend;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $http_host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_cookie_path / "/; httponly; secure; SameSite=Lax";
      proxy_redirect http:// https://;
      add_header Content-Security-Policy upgrade-insecure-requests;
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE';
      add_header 'Access-Control-Allow-Header' 'Content-Type,*';
    }
  }

访问并配置

https://nav.itbunan.xyz

优化

解决办法：部署自己的接口，将图标缓存到自己的服务器上。参考： ico获取api

FAQ

刷新页面超时

部署api接口后, 刷新页面出现超时，经过分析，php-fpm问题

代码语言：javascript复制

;优化php-fpm进程配置
[www]
user = www-data
group = www-data
listen = 127.0.0.1:9000

pm = static
pm.max_children = 50
pm.start_servers = 10
pm.min_spare_servers = 10
pm.max_spare_servers = 35
pm.max_requests = 1000
request_terminate_timeout = 180
request_slowlog_timeout = 30
slowlog = /logs/www-slow.log

图标logo获取失败

通过浏览器手动获取图标，然后上传

代码语言：javascript复制

usr/themes/WebStack/ico/cache/域名.ico

typecho 部署接口配置系统

1 人点赞