nginx+vuepress搭建

因为工作需要，需要在内部网络构建一个文档平台；选用比较流行的vuepress；本文以gitlab作文档版本管理及vuepress构建，文档应用部署到nginx服务器运行；

说明

自动构建使用gitlab-runner+git

编译依赖vuepress+nodejs+yarn

应用部署使用nginx

git安装

下载git https://www.kernel.org/pub/software/scm/git/

上传服务器

解压：tar -vxf /usr/local/git/git-2.9.5.tar.gz

安装：
./configure --prefix=/usr/local/git
make && make install

配置环境变量：
export GIT_PATH=/usr/local/git/bin
export PATH=$JAV{A}_{H}OME/bin:$PATH:$GIT_PATH
source /etc/profile

验证：git --version

gitlab-runner安装

因为公司内部已经安装了gitlab服务器，我们可以使用gitlab作文档版本管理工具；安装个gitlab-runner来实现自动构建

• 从https://gitlab-runner-downloads.s3.amazonaws.com/latest/index.html选择最新版本的rpm文件下载

• 安装rpm

  rpm -i gitlab-runner_**.rpm

• 注册runner,这一步会需要输入gitlab上的url和token(路径：用户设置-CI/CD-Runner),执行器可以选择shell，Tags输入空（否则需要对项目打上tag才能匹配该构建器）

  gitlab-runner register
  

• 注册服务和构建路径

  gitlab-runner install --user=root --working-directory=/opt/gitlab-runner

• 服务启动

  gitlab-runner start

• 此时在gitlab上可以看到注册好的runner
  

nodejs安装

1.从https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz下载nodejs

2.上传至服务器上

3.使用命令安装nodejs

tar xf  node-v10.9.0-linux-x64.tar.xz   // 解压
cd node-v10.9.0-linux-x64/
./bin/node -v // 执行node命令 查看版本

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：

ln -s /usr/software/nodejs/bin/npm   /usr/local/bin/ 
ln -s /usr/software/nodejs/bin/node   /usr/local/bin/

yarn安装

• 安装yarn

  • npm install -g yarn

• 安装成功后，查看版本号：

  • yarn --version

• Yarn 淘宝源安装（依赖包安装速度更快）

  • yarn config set registry https://registry.npm.taobao.org -g
  • yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

安装好的目录结构如下

vuepress安装

mkdir custDoc && cd custDoc

yarn init

yarn add -D vuepress

因公司服务器无法连接外网，我们需要在本地电脑构建好工程，并将构建时依赖文件上传到服务器上，以防止服务器构建时连接外网下载依赖
使用本地电脑连接外网安装好vuepress依赖。
将custDoc目录中的node_modules压缩成cache.zip上传到gitlab-runner上的cache目录中（gitlab-runner需要是gitlab-runner的工作目录）

nginx安装

安装编译工具及库文件

yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel

首先要安装 PCRE

PCRE 作用是让 Nginx 支持 Rewrite 功能。

1. 下载 PCRE 安装包，下载地址： http://downloads.sourceforge.net/project/ pcre/pcre/8.35/pcre-8.35.tar.gz

2. 解压安装包:

   tar zxvf pcre-8.35.tar.gz

3. 进入安装包目录

   cd pcre-8.35

4. 编译安装

   ./configure
   make && make install

5. 查看pcre版本

   pcre-config --version

安装nginx

1. 下载http://nginx.org/download/

2. 将下载的nignx源码包上传到linux服务器上，解压

   tar -vxf /opt/gitlab-runner/nginx-1.21.1.tar.gz

3. 进入nginx解压后的根目录，配置并安装

   cd nginx-1.21.1

   ./configure --prefix=/opt/gitlab-runner/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/opt/gitlab-runner/pcre-8.35

   make && make install

4. 配置nginx.conf ，将/usr/local/webserver/nginx/conf/nginx.conf替换为以下内容

5. 启动nginx

   先检测nginx的配置是否正确

   ./nginx/sbin/nginx -t

   如果出现successful字样则表示成功

   cd nginx/sbin

   ./nginx

   没有日志输出 ，说明启动正常， 如果出现异常请参考配置时提示的错误日志路径，查看错误信息

   可以查看nginx进程

   ps -ef | grep nginx

6. 访问nginx

   默认端口就是80，所以可以直接输入ip访问

创建doc工程

在gitlab上创建文档工程，在根目录下添加构建文件 .gitlab-ci.yml

image: node:9.11.1

pages:
  cache:
	paths:
	- node_modules/

  script:
  - chmod -R 777 node_modules
  - ../../../../../yarn/bin/yarn docs:build
  - cp -r docs/.vuepress/dist/* ../../../../../webserver/nginx/html/
    
  artifacts:
    paths:
    - public
      
  only:
  - master

说明：

cache限定依赖包的缓存目录，在vuepress安装步骤中的生成的压缩包

script shell执行的命令

1. 对依赖包目录进行权限授权
2. 使用yarn构建包
3. 将构建好的目标文件，copy至nginx部署目录

本地修改提交gitlab服务器

1.本地生成git公钥

打开Git gui > help,点击右上角Generate key(已经生成过公钥直接copy公钥)

2.公钥维护到gitlab服务器

3.从gitlab服务器下载文档

git clone git@XXXXXX/custdoc.git

4.下载后，可以在doc目录下进行文档编辑，编辑完成后提交到git服务器会触发自动构建并发布到nginx服务器上