一个非常强大的静态导航网站nav

什么是发现导航?

一个纯静态、支持SEO、在线编辑的强大导航网站,内置收录多达 800+ 优质网站。

  • 🍰 内置 800+ 实用网站。
  • 🍰 支持 SEO。
  • 🍰 完全纯静态, 提供自动化部署功能。
  • 🍰 三叉树分类、结构清晰、分类清晰。
  • 🍰 支持一个网站关联多个网址
  • 🍰 颜值与简约并存,不再是杀马特时代。
  • 🍰 完全开源,轻松定制化。
  • 🍰 支持多种浏览模式,创新。
  • 🍰 支持足迹记忆。
  • 🍰 支持移动端浏览。
  • 🍰 支持搜索查询。
  • 🍰 支持自定义引擎搜索。
  • 🍰 多款主题切换。
  • 🍰 支持暗黑模式。
  • 🍰 支持后台管理, 无需部署。
  • 🍰 支持从Chrome书签导入

这是一个纯静态的网站,官方提供了 githubvercel 上的部署方式,但没有提供 Docker 部署方式,有网友问我能不能弄到群晖上,所以老苏尝试了一下

构建

首先下载代码

1
2
# 下载代码
git clone --depth=1 https://github.com/xjh22222228/nav.git

Dockerfile 来自 https://codefresh.io/docs/docs/learn-by-example/nodejs/react/,老苏只是做了微调,Dockerfile 放到代码根目录

1
2
3
4
5
6
7
8
9
10
11
12
13
FROM node:16.5 as build-deps
MAINTAINER laosu<wbsu2003@gmail.com>

WORKDIR /nav
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

FROM nginx:1.12-alpine
COPY --from=build-deps /nav/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

原理比较简单,就是把编译出来的静态文件丢到了 nginx 中,但这种方式再修改项目配置文件 nav.config.ts 是不生效的,因为修改了配置文件需要重新 build

本来准备按开发环境来部署,但是对使用者来说有点麻烦,所以老苏决定直接用 ng server,这实际上是调试用的,为了能远程访问,要修改 package.json

将默认的

1
"start": "ng serve --port=7000",

改为

1
"start": "ng serve --port=7000 --host 0.0.0.0 --disableHostCheck",

因为禁用了 Host Check,所以理论上存在安全风险,但是如果不禁用在反向代理的时候,会显示 Invalid Host header,所以这个镜像只是给大家体验用的,不建议暴露到公网使用

按下面的内容生成新 Dockfile 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
FROM node:16.5-slim
MAINTAINER laosu<wbsu2003@gmail.com>

COPY . /mynav/

WORKDIR /nav/
VOLUME /nav

EXPOSE 7000

CMD \
if [ "$(ls -A /nav)" ]; then \
echo "***** nav目录存在并且有内容, 跳过 *****" ; \
else \
echo "***** nav程序目录不存在或为空, 开始拷贝文件 *****" && \
cp -R /mynav/. /nav/; \
fi; \
yarn && yarn start; \

接下来就可以构建镜像了

1
2
3
4
5
# 创建镜像
docker build -t wbsu2003/nav:v1 .

# 生成容器
docker run -d -p 7000:7000 -v /volume2/docker/nav:/nav --restart=always --name nav wbsu2003/nav:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 wbsu2003 ,选择第五个 wbsu2003/nav,版本选择 latest

docker 文件夹中,创建一个新文件夹,并将其命名为 nav

文件夹 装载路径 说明
docker/nav /nav 程序目录

端口

端口不冲突就行,这里用了默认的 7000

本地端口 容器端口
7000 7000

运行

在浏览器中输入 http://群晖IP:7000,但并不能马上看到主界面,因为第一次需要下载依赖项,所以比较耗时,尤其是网络不好的时候,整个 node_modules 差不多有 500~600 M

只有当日志中显示两次 Compiled successfully.,这个时候才可以正常访问

打开 http://群晖IP:7000 能看到主界面

右下角能切换主题

使用方法可以去官方看看 https://github.com/xjh22222228/nav

修改配置

如果修改了 nav.config.ts ,保存后要重启下容器

参考资料

xjh22222228/nav: 🔍 发现导航 , 一个非常强大的静态导航网站(支持SEO)
地址:https://github.com/xjh22222228/nav

React example with Yarn · Codefresh | Docs
地址:https://codefresh.io/docs/docs/learn-by-example/nodejs/react/

docker部署前端开发环境|mayloveless’s Blog
地址:http://lingfei.wang/technote/2019/07/07/docker&node/