首页 > nginx > VuePress + Nginx + Git 实现自动部署

VuePress + Nginx + Git 实现自动部署

2020年8月9日 发表评论 阅读评论

vuepress是一个静态网站生产器,是一个开箱即用的开源项目文档web页面生成工具,vue的在线web文档就是用vuepress制作的。

本文主要介绍如何配置vuepress以及利用nginx部署vuepress,分成项目生成和项目的部署两个部分来说明如何进行博客的搭建。

一、项目生成:VuePress

在官方文档中,已经有较为详细的介绍,如何生成一个默认主题的VuePress项目。总体来说,可以使用如下步骤:

1.1 项目初始化

新建一个文件夹,进入文件夹后执行命令:npm init,执行后,系统会提示输入一系列信息,诸如作者、git仓库、项目描述等信息,根据个人信息填写后,会在项目中生成一个package.json的文件。

之后,下载VuePress,可以使用全局配置下载:npm install -g vuepress,这里要注意的是,下载到全局配置中,一定要在环境变量里加入对应的全局仓库的路径,否则在使用的时候,会找不到vuepress相关的文件。

1.2 项目代码

之后,新建文件夹docs,并且在docs文件夹中添加README.md文件,此文件是用于编辑首页内容的。

我们不妨就使用如下的片段:

之后,在生成的package.json文件里,修改对应的scripts为:

在完成上述配置以后,我们就可以执行命令npm run dev来运行项目,此时访问本地端口8080就可以看到自己的项目如图:

最终的目录树如下:

PS:在windows里生成目录树的方法:在对应的文件夹中执行 tree /f > xxx.txt即可,其中xxx.txt为所需生成的文本文件。

1.3 项目打包

项目打包只需要执行npm run build即可在docs/.vuepress文件夹下看到dist文件夹,这就是生成的静态网页项目。

当然,如果要修改各种配置的话,可以在.vuepress文件夹下添加config.js来实现配置,详细信息可以参考官方教程

1.4 主题更换

当然,默认的主题可能不符合大家的需求,在社区中有很多开源的主题可以供大家选择,比如我正在使用的

vuepress-theme-reco就是一款很简洁实用的主题。

二、项目部署

对于项目的部署,我先介绍如何使用Nginx来实现网站的部署,之后,再使用git来实现自动部署。

当然,项目部署在服务器的话,首先肯定要有个服务器了hhhh

有了服务器,我们就可以开始部署啦。

2.1 Nginx的安装与配置

Nginx的安装和启动可以用一下命令完成,完成后访问服务器的ip地址,如果可以看到nginx界面,就说明成功启动了。

Nginx成功启动后,我们对其配置文件进行修改,配置文件一般是/etc/nginx/nginx.conf,为了方便我们以后可能有多个项目需要导入,可以分一层级,即在http中加入include /etc/nginx/conf.d/*.conf;的配置,如此,我们可以在/conf.d文件夹中进行多个项目的配置。

比如,我们进入conf.d文件夹后,新建vuetest.conf文件,在其中进行我们项目的部署:

其中server_name改为自己主机的ip,root为在服务器中,项目根目录存放的地址,listen自己设计的端口号即可。

配置好以后,执行nginx -s reload即可重新加载配置文件。

然后,我们把我们的博客放到root对应的文件夹里就完成了项目的部署了。

但这样部署有这样的问题,就是我们需要自己在本地build好文件,然后放到服务器的对应文件夹里。而就我现在使用的MobaXterm是不支持文件夹的传送的,也就是我们必须压缩项目,然后放到服务器,然后解压,这也太麻烦了吧!我想有一键部署的便捷功能,那么可以利用git来实现。

1.2 自动部署

首先我们搭建一个服务器端的git仓库,我们可以创建一个用户名为git,其专门用来管理项目的传送和部署。

服务器配置:

配置好以后,我们就相当于使用git用户来进行操作了。

~/.ssh/authorized_keys里,我们放入本地的公钥。

获取公钥的方法可以是:
1、打开git bash
2、执行生成公钥和私钥的命令: ssh-keygen -t rsa
3、在用户目录下的.ssh文件夹中,会有公钥和私钥,将公钥复制到服务器的authorized_keys文件中。

这样做的目的就是,以后由本地向服务器提交资源,就不需要再进行身份验证了。

创建仓库

找一个地方创建git仓库,比如在/home/git下创建project.git文件夹,作为git仓库:

配置hooks

进入创建的git仓库,然后修改post-update.sample文件,并将其改名为post-update,将其修改为如下脚本:

其中,GIT_REPO就是我们这个git仓库的地址,TMP_GIT_CLONE就是临时存放上传的资源的路径,PUBLIC_WWW是我们最后项目放的地方,对于这个博客来说,这个PUBLIC_WWW就是之前Nginx配置的root。

这个脚本的含义就是,当我们在本地进行提交的时候,服务器接受后,会将其复制到临时存放目录,然后转移到项目路径下,从而使得我们只需要在本地把我们的生成的项目push到远程服务器,服务器就可以自动帮我们部署到对应的文件夹啦。

遇到的坑

在本地上传的时候,每次都提示权限不足,最后发现是因为我们用到的诸如/home/git/project.git之类的文件,都是在root用户时候创建的,所以其所有者为root,而git用户没有权限进行复制等操作,因此我们可以使用如下命令

使用后,将文件的所有权换成git,再次执行操作即可。

要判断该文件的所有权,可以使用命令:

来查看文件/文件夹的所有权。

本地上传脚本

在本地要进行项目的打包、上传操作,这些都可以写在一个脚本里执行:

脚本放在根目录下即可。

最后的目录结构为

这样,我们就实现了博客的自动部署到服务器的功能。

参考:https://www.cnblogs.com/xiaoxineryi/p/13175182.html

转载请注明本文地址: https://www.nginx.cn/5904.html

分类: nginx 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.