vuepress更改根目录地址及nginx转发笔记

Posted 2022-06-18 李迟

本文为更改 vuepress 根目录后使用 nginx 转发的笔记。

概述

很早前用 vuepress 做了一个内部分享平台，主要展示一些数据库里常用的数据表格及一些基础知识内容。使用 vuepress 搭建好主题后，只维护 markdown 格式文件即可，而这些文件均使用工具生成，因此在更新时就十分方便了。另外，使用 gin 编写了简单的 web应用，使用 docker 部署，再加上自己搭建的 gitlab 和 jenkins 服务，提交 markdown 文件后能自动完成构建、发布动作。所有这些，笔者均有文章涉及。

今年重构了去年年底写的web网页工具，其与 vuepress 网站其实不是一个体系的，前者是工具的网页版本，后者是静态网站。为了方便使用，在网页工具合并了该静态网站。对于gin而言，只需要添加一条路由即可，十分简单，如下：

router.StaticFS("/website", http.Dir("./dist"))

其中/website为URL地址，dist是 vuepress 生成的目录。

但如此一样，原来的静态服务器就无法使用了，只能用 nginx 转发，于是便有了本文。

vuepress更改根目录

vuepress 更改根目录比较简单，在配置文件.vuepress/config.js中添加根目录字段base即可，示例如下：

module.exports = (site) => (
    title: "内部知识管理平台",
    base: '/website/',
    head: [
      ['link',  rel: 'icon', href: '/logo.jpg' ],
    ],
    // theme: 'vuepress-theme-reform',
    extendMarkdown: md => 
      md.use(require("markdown-it-disable-url-encode"));
    ,
    //...
)

下载镜像

之前使用过nginx:alpine部署网站服务，最近跑 fastcgi 程序，使用了 centos 整合了 nginx 版本的镜像(即在 centos 系统中不用再安装nginx了)。下载命令如下：

docker pull centos/nginx-116-centos7

之后即可使用该镜像。本文实验涉及的文件——包括 vuepress 生成的目录，假定在/home/latelee/work/website目录。

获取nginx配置

为了获取 nginx 的配置，需要先启动容器，并映射目录，然后再拷贝。具体如下：

启动并进入容器：

cd /home/latelee/work/website
docker run -itd --rm --name foo -v $PWD/nginx:/home/latelee/work/website centos/nginx-116-centos7 nginx -g "daemon off;"
docker exec -it foo bash

使用root在容器执行命令：

cp -a /etc/nginx/ /home/latelee/work/website

再将nginx目录拷贝到nginx/etc目录，也可自定义，后面的 docker-compose 文件需要映射该目录。

这样能得到nginx配置目录。注：必须运行`nginx -g "daemon off"命令，才会生成配置目录。

配置nginx转发

编辑nginx/etc/nginx.conf，在server字段中添加location，示例如下：

# 注意转发的地址最后带在“/”
location /website/ 
    proxy_pass http://127.0.0.1:8080/;

注意，8080 为默认端口。

启动容器

本文使用 docker-compose 启动容器，配置文件如下：

version: '2'
​
services:
  httpd_public:
    image: centos/nginx-116-centos7
    command: nginx -g "daemon off;"
    container_name: httpd_public_new
    volumes:
      - $PWD/nginx/log:/var/opt/rh/rh-nginx116/log/nginx
      - $PWD/nginx/etc:/etc/nginx
      - ./dist:/opt/app-root/src/
    ports:
      - 80:8080

其中，.dist为 vuepress构建后的目录，/opt/app-root/src为 nginx 容器的 html 根目录。

实验

经测试，访问http://172.18.18.18/website或http://172.18.18.18/都是正常的，因为 nginx 做了代理转发。

小结

如果有不同的后端服务，可以通过proxy_pass进行转发，这样就能统一访问入口了。

参考资源

• https://blog.csdn.net/qq_38397501/article/details/110409770
• https://github.com/sclorg/nginx-container