博客的部署方法论

博客写完后,当然是要发布到网络上的。如果想要部署到服务器上,则需编译构建成静态文件,然后将其上传到服务器上的路径(该路径由我们自己决定),然后在 web 服务器(Nginx 等)上配置访问路径即可

这里说的是有自己服务器的情况,如果嫌麻烦和没预算可以使用 GitHub Pages 服务

构建静态文件

VuePress 提供了 vuepress build docs ​命令来构建,也就是我们之前在 package.json 里配置的 docs:build​:

"scripts": {"docs:dev": "vuepress dev docs --temp .temp","docs:build": "vuepress build docs",},

我们在命令行里执行,结果如下:

> npm run docs:build> vuepress-learn@1.0.0 docs:build
> vuepress build docswait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...√ ClientCompiled successfully in 14.78s√ ServerCompiled successfully in 4.35swait Rendering static HTML...
success Generated static files in docs\.vuepress\dist.

我们观察最后一行,VuePress 告诉我们成功生成了静态文件在这个目录:docs.vuepress\dist​。我们无需关心里面的内容,只需将整个目录上传到服务器上即可(FTP 或者压缩后上传)

Nginx 配置

这里已经假设读者有了服务器和安装了 Nginx。如果不知道什么是 Nginx,可以参考我的博客:服务器软件

以笔者部署的过程为例:

  1. 将 dist 文件夹里的内容上传到/opt/myblog 目录下(可以压缩 dist 目录为压缩包,然后上传再解压)

  2. 配置 Nginx:

    location / {root   /opt/myblog;index  index.html index.htm;
    }
    
  3. 重启 Nginx

访问服务器 IP,即可看到博客内容,并且可以正常跳转等,和本地运行的效果一致:

在这里插入图片描述

GitHub Pages

一个服务器后续的续费高达几千元一年;如果不想要购买服务器和配置域名等等,可以使用 GitHub Pages,也是不少人在使用的方式。

GitHub 是什么就不多解释了。简单来说 GitHub 就是一个 Git 项目的托管服务平台,上面有很多知名项目。其中,每个项目都有一个主页,列出项目的源文件,例如 Linux:

但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。

因此,Github 就设计了 Pages 功能,允许用户自定义项目首页,用来替代默认的源码列表。所以,Github Pages 可以被认为是用户编写的、托管在 Github 上的静态网页。

博主没有用过该功能,因此不展开来讲,感兴趣的读者可参考:

  • 一篇带你用 VuePress + Github Pages 搭建博客_JavaScript_冴羽_InfoQ 写作社区
  • 搭建一个免费的,无限流量的 Blog----github Pages 和 Jekyll 入门 - 阮一峰的网络日志

自动化部署

如果每次修改了博客内容,都要重新构建、然后上传到服务器上,未免也太麻烦了。为此,我们可以用一些第三方工具,自动将打包后的文件上传到服务器上:

  • scp2:是一个纯 js 编写的 ssh2 协议的 Linux 远程文件拷贝实现
  • ora:是一个优雅的用于命令行 Loading 的 spinner,简单来说就是用来实现命令行环境的 loading 效果,和显示各种状态的图标等,美观一点。

安装依赖:

npm i scp2 ora@5.0

ora6.0 以上版本不支持 require 方式引入,因为在 node 中使用,使用 5.0 版本

在项目里新建两个文件:

  • deploy.js:用于编写部署命令
  • serverInfo.json:用于存放服务器信息(由于本博客是开源的,不方便将服务器 IP 和密码等敏感信息公开)

deploy.js 的内容:

const fs = require('fs')
const scpClient = require('scp2')
const ora = require('ora')const serverInfo = JSON.parse(fs.readFileSync('serverInfo.json'))
const loading = ora('正在部署至 ' + serverInfo.host )
loading.start()
scpClient.scp('./docs/.vuepress/dist/', serverInfo ,(err)=>{ 
loading.stop()if(err) { console.log('部署失败')throw err}else { console.log('部署成功')}
})

serverInfo.json:存放服务器信息,注意在 .gitignore 文件里添加 serverInfo.json,不要将敏感信息公开了。读者需按需修改这些信息

{"host":"替换成你的IP","port":"22","username":"替换成你的用户名","password":"替换成你的密码","path":"/opt/myblog"
}

在 package.json 中的 script 中添加 deploy 命令:

"scripts": {..."deploy": "npm run docs:build && node ./deploy.js",...
},

测试:可以删除之前的/opt/myblog 目录里的文件

$ cd /opt
$ rm -r myblog/

然后在命令行里执行 npm run deploy​ ,观察是否正常部署了。

> node .\deploy.js
部署成功

注意:

  1. 后续想要部署,直接执行命令即可,会覆盖之前的博客内容。
  2. 使用 GitHub Pages 也可以实现自动化部署,这里不展开,可参考:GET 新技能!自己的网站突然就不香了 第 3.2 节。
  3. 读者也可以在服务器上,使用 git clone 拉取项目,然后 npm run docs:build 来运行,不过这样也很麻烦。

使用 GitHub Action

什么是 GitHub Action?这里引用阮一峰大佬的说明:GitHub Actions 入门教程 - 阮一峰的网络日志

大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。

如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

希望读者看完阮一峰大大的博客后再往下看。

简单来说,就是我们可以使用别人写好的功能,在每次代码推送到 Git 后,GitHub 会自动帮助我们完成编译构建,自动上传到服务器上,重启服务等等操作

一句话:可以实现提交代码到服务器上后,自动更新博客。俗称持续集成、自动化部署。读者也可使用 Gitee Action。接下来我们来实践下。

服务器准备

首先是服务器得准备下环境,安装 rsync,读者使用的 Centos,root 用户,安装命令如下:

yum install rsync

然后在服务器上生成公钥和私钥,用来授权

$ ssh-keygen -t rsa -C "peterjxl@qq.com"

然后一直回车即可,执行情况:

Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:Pt6bEV/LpmNU5ibmsyJjEstK4DHL2kjAaQvNbz8urok peterjxl@qq.com
The key's randomart image is:
+---[RSA 2048]----+
|                 |
|                 |
|                 |
|.o.           o  |
|o+*     S .  +.  |
|+o.*  ..   o+oo. |
| o+ +. oo .+.o+  |
|.= +..=.+o.o=o   |
|E +oo+o+.o++o+   |
+----[SHA256]-----+

可以看到公钥和私钥的位置。id_rsa 就是私钥,id_rsa.pub 是公钥。我们需要用到私钥的内容:

cat /root/.ssh/id_rsa

笔者这里就不贴出来了,也算是一种敏感信息

然后修改本机关于 ssh 的一些配置:如此便完成了公钥的安装。

$ cd /root/.ssh
$ cat id_rsa.pub >> authorized_keys

打开密钥登录功能:编辑 /etc/ssh/sshd_config 文件,在文件末尾添加如下几行:

$ RSAAuthentication yes
$ PubkeyAuthentication yes
$ PermitRootLogin yes

最后,重启 SSH 服务:

$ service sshd restart

GitHub 准备

在项目所在的仓库中配置: 打开 Settings->Secrets->New secret

在这里插入图片描述

然后将上一步的私钥内容添加进去:

在这里插入图片描述

我们再新建一个 secret,名字为 MY_SERVER_IP​,值为我们的服务器的 IP,IP 也是一种敏感字段。

流水线配置

接下来我们就可以配置流水线了。新建 .github/workflows 文件夹,然后再新建 main.yml,内容如下:

name: Deploy My Serveron:push:branches:- master # 只在master上push触发部署jobs:deploy:runs-on: ubuntu-latest # 使用ubuntu系统镜像运行自动化脚本steps: # 自动化步骤#下载代码仓库- uses: actions/checkout@v1 # 使用action库,安装node- name: use Node.js  # 使用action库  actions/setup-node安装nodeuses: actions/setup-node@v3with:node-version: 16# 安装依赖- name: npm install run: npm install #打包项目- name: Buildrun: npm run docs:build#部署到服务器- name: Deploy to Staging My serveruses: easingthemes/ssh-deploy@v2.1.6env:# 使用GitHub仓库里的secret设置的值SSH_PRIVATE_KEY: ${{ secrets.MY_SERVER_PRIVATE_KEY }} # 源目录,编译后生成的文件目录SOURCE: './docs/.vuepress/dist/'#服务器公网地址REMOTE_HOST: ${{ secrets.MY_SERVER_IP }}#服务器用户名-一般默认rootREMOTE_USER: 'root'#服务器中,代码部署的位置TARGET: '/opt/myblog'#去除的文件EXCLUDE: "/dist/, /node_modules/" 

这里简单说明下文件的内容

  • 第一行:本次流水线的名字,可自行更换
  • 第 3~6 行:说明只有当 master 分支有提交到远程库(push)的时候,才更新(也就是执行本次流水线)
  • 第 8 行:jobs,本次我们只用了一个 job,也就是第 9 行的 job
  • 第 10 行:指定要在哪个操作系统的环境下编译出包(一般是 Linux)
  • 接下来就是 deploy 这个 job 的 steps,每个 step 做了不同的事情,例如安装 node,然后安装依赖和执行构建命令
  • 第 31 行开始就是一些环境变量的设置,例如读取我们上一小节设置的 IP 和私钥信息

测试流水线

每次提交代码到远程仓库,这条流水线就会运行:可以在 GitHub 项目的 Actions 选项卡里查看

在这里插入图片描述

我们点击本次运行的 workflow,可以看到目前正在运行的 job:

在这里插入图片描述

再点进去,就可以看到这个 job 里的 step 执行情况:打勾的说明已完成,黄色的转圈圈的表示还在运行中

如果流水线执行失败了,会有邮件告知,并且可以在 Action 里查看失败的原因。

在这里插入图片描述

还可以重跑失败的 jobs:

在这里插入图片描述

部署失败:​babel-preset-app

如果你遇到了 GitHub Action 部署失败了,报错信息类似这样的:

2023-02-18T12:11:00.0564591Z [BABEL] Note: The code generator has deoptimised the styling of /home/runner/work/vuepress-learn/vuepress-learn/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
2023-02-18T12:11:18.4372148Z [success] [webpackbar] Server: Compiled successfully in 31.22s
2023-02-18T12:11:27.6215689Z [success] [webpackbar] Client: Compiled with some errors in 40.43s
2023-02-18T12:11:27.8557348Z (undefined) ./node_modules/@vuepress/core/.temp/style.styl
2023-02-18T12:11:27.8558854Z Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

这是因为 @vue/babel-preset-app ​的版本问题,解决方法:

npm i @vue/babel-preset-app@4.5.18

更多参考:fresh new 1.x project fails to build (but dev works OK) · Issue #3065 · vuejs/vuepress

部署失败:JavaScript heap out of memory

当你的博客数量越来越多,那么构建时需要的内存也越来越多,最后你可能会发现内存不够:

<--- JS stacktrace --->FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory1: 0xb090e0 node::Abort() [node]2: 0xa1b70e  [node]3: 0xce19d0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]4: 0xce1d77 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]5: 0xe993e5  [node]
.....

解决方法:构建前设置内存参数,例如在 package.json 中添加:

"scripts": {"build": "node --max_old_space_size=8192 ./node_modules/vuepress/cli.js build docs"}

注:方法来自二丫讲梵的博客项目。

其他部署方式

如果你生成密钥的时候,输入了密码进行保护:

$ ssh-keygen
...
Enter passphrase (empty for no passphrase):     # In here I input a password

那么部署的时候可能会报错(因为没密码),目前暂无找到其他方法;一般是用没有密码保护的密钥来部署。

如果你不想用密钥登录,而是用密码登录,可以用这个 action:appleboy/scp-action: GitHub Action that copy files and artifacts via SSH.

使用思源笔记插件

如果你有使用思源笔记,还可以使用 terwer 开发的思源笔记插件:sy-post-publisher,

获取源码

本文介绍了几种部署方式,最推荐的是使用 GitHub Action,非常方便,一劳永逸。

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee 和 GitHub 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn
  4. 切换分支:git switch -c VuePressDemo6Deploy origin/VuePressDemo6Deploy
  5. 安装依赖:npm i
  6. 运行博客:npm run docs:dev

参考

  • 前端项目自动化部署_前端自动化部署_众生皆苦唯有我甜的博客-CSDN 博客
  • 通过 GitHub Actions 自动部署 vuepresss 项目到云服务器_居無何的博客-CSDN 博客_vuepress 部署在服务器上
  • rsync exited with code 255.Load key “…“: invalid format Permission denied, please try again._rsync 255_沧州刺史的博客-CSDN 博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/39871.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

m4a如何改为mp3格式?这四种音频转换方法非常好用!

m4a如何改为mp3格式&#xff1f;在当下的生活中&#xff0c;音乐已经成为了人们疲惫时的一剂良药&#xff0c;它不仅可以舒缓心灵&#xff0c;还能够激发情感和启发思维&#xff0c;在众多音频文件格式中&#xff0c;m4a 作为一种常见的格式&#xff0c;备受广大音乐爱好者的青…

OpenCV 张氏标定法

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 “张正友标定法”是由张正友教授于1998年提出的单平面棋盘格的摄像头标定方法,该方法介于传统标定法和自标定法之间,克服了传统标定法需要高精度标定物的缺点,仅需要一个棋盘格即可。作为一种非常经典的相机内参标定…

动态规划 剪绳子问题

给一段长度为n的绳子&#xff0c;请把绳子剪成m段&#xff0c;每段绳子的长度为k[0],k[1],k[2],k[3]....k[m].请问k[0]k[1]k[2].....*k[m]的最大乘积为多少 #include <vector> // 包含vector头文件 #include <algorithm> // 包含algorithm头文件&#xff0c;用于m…

VS开发QT程序图标修改

VS开发QT程序图标修改 1.双击打开UI界面 2.选择编辑资源 3.添加文件 4.选择ico文件 5.ok确定 6.点击保存 7.选择windowsIcon,倒三角图标 8.选择资源 9.选择图标&#xff0c;点击ok 10.保存 编译运行&#xff1a; 任务栏&#xff1a;

合并多个JSON文件为一个

背景 在机器学习的训练中,多个小的数据集训练,需要将多个数据集合并为一个数据集,方便训练 环境以及依赖package NStudyPy0.0.12 NStudyPy 工具包 , 一个有用的工具包&#xff0c;可以简化开发流程&#xff0c;详细介绍可以参考 NStudyPy 本教程使用 python 3.10.13 作为开发环…

JCR一区级 | Matlab实现BO-Transformer-LSTM多变量回归预测

JCR一区级 | Matlab实现BO-Transformer-LSTM多变量回归预测 目录 JCR一区级 | Matlab实现BO-Transformer-LSTM多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BO-Transformer-LSTM多变量回归预测&#xff0c;贝叶斯优化Transformer结合LSTM长…

ES 索引改名

在Elasticsearch中&#xff0c;直接重命名索引并不是一个直接支持的操作。但是&#xff0c;可以通过以下步骤间接实现索引的重命名&#xff1a; 创建新索引&#xff1a;首先&#xff0c;你需要创建一个新的索引&#xff0c;这个索引将是你原索引的新名字。 复制数据&#xff1…

个人IP如何做好定位?

个人IP定位是指个人在社会和职业领域中如何通过自身特点和优势进行定位&#xff0c;以达成个人发展和目标实现的策略。在如今信息化和网络化的环境下&#xff0c;良好的个人IP定位能够有效地提升个人影响力和竞争力。 个人IP定位的关键在于以下几点&#xff1a; 自我认知和定…

Python 学习之网络编程(六)

Python 的网络编程 Python 网络编程主要涉及到使用 Python 语言来编写网络应用程序&#xff0c;这些程序可以与其他计算机通过网络进行通信。Python 提供了多种内置库和第三方库来支持网络编程&#xff0c;包括套接字&#xff08;sockets&#xff09;编程、异步 I/O、HTTP 客户…

php 抓取淘宝商品评论数据 json

要抓取淘宝商品评论数据&#xff0c;你可以使用PHP的cURL库来发送HTTP请求并获取JSON格式的数据。 API接入流程&#xff1a;需要开放平台或者是封装接口注册账号&#xff0c;并申请相应的API使用权限&#xff0c;以获取必要的密钥和接口文档。获取接口使用权限&#xff1a;接入…

SQL-DML语句

一.DML-添加数据 1.给指定字段添加数据 INSERT INTO 表名(字段1 ,字段2&#xff0c;...) VAULES(值1,值2,...) 二.给全部字段添加数据 INSERT INTO 表名 VALUES(值1,值2,...); 三.批量添加数据 四.注意事项 1.插入数据时,指定的字段顺序需要与值的顺序是一一对应的。 2…

农村生活污水处理监测系统解决方案

一、概述 随着国民经济的发展和农村生活水平的提高&#xff0c;农村生活用水量越来越大&#xff0c;随之而来的污水产量也越来越大&#xff0c;农村生活污染对环境的压力越来越明显。环境保护意识的逐渐增强&#xff0c;使得人们对青山绿水的希望更为迫切&#xff0c;为满足人民…

【Kali-linux for WSL】图形化界面安装

文章目录 前言图形化界面安装 前言 之前在WSL中安装了Kali 启动之后发现什么都没有&#xff01;&#xff01;&#xff01; 那我还怎么学习渗透技术&#xff1f;&#xff1f;&#xff1f; 看来&#xff0c;得改进下我的kali-linux for wsl&#xff0c;安装个图形化界面 图形化…

Omniverse、Isaac Sim、Isaac Lab入门必会之 Nucleus 部署

新手入门Omniverse、Isaac Sim、Isaac Lab时经常发现&#xff0c;要想跑通例程&#xff0c;总是usd等资源加载不出来&#xff0c;软件傻傻的进程阻塞卡在那里&#xff0c;点两下就崩溃&#xff0c;这对新手来说非常的不友好&#xff0c;这都是由于没有安装 Nucleus 或者 Nucle…

蓝蜂网关接入雄安新区物联网统一开放平台应用案例

蓝蜂网关接入雄安新区物联网统一开放平台案例 一、应用背景 为响应国家《河北雄安新区规划纲要》&#xff0c;由中国雄安集团数字城市科技有限公司牵头&#xff0c;以中移物联网有限公司为牵头单位的联合体&#xff0c;构建了雄安新区物联网统一开放平台&#xff08;简称雄安…

springboot美术馆售票管理系统-计算机毕业设计源码17485

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 2.2.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 系统总体设…

第三方软件测试公司分享:软件渗透测试的测试内容和注意事项

软件渗透测试是一种通过模拟攻击的方式来评估软件系统的安全性和漏洞&#xff0c;以发现并修复系统中的安全弱点。保护用户的数据和信息不被恶意攻击者利用&#xff0c;也是软件产品开发流程中重要的环节&#xff0c;可以帮助开发团队完善产品质量&#xff0c;提高用户满意度。…

Day01-02-gitlab

Day01-02-gitlab 1. 什么是gitlab2. Gitlab vs Github/Gitee3. Gitlab 应用场景4. 架构5. Gitlab 快速上手指南5.0 安装要求5.1 安装Gitlab组件5.3 配置访问url5.6 初始化5.8 登录与查看5.9 汉化5.10 设置密码5.11 目录结构5.12 删除5.13 500 vs 5025.14 重置密码 6. Gitlab用户…

迅睿CMS 后端配置项没有正常加载,上传插件不能正常使用

首先&#xff0c;尝试迅睿CMS官方提供的【百度编辑器问题汇总】解决方案来解决你的问题。你可以访问这个链接&#xff1a;官方解决方案。 如果按照【百度编辑器问题汇总】解决方案操作后&#xff0c;依然遇到“后端配置项没有正常加载&#xff0c;上传插件不能正常使用”的问题…

昇思第8天

保存与加载 保存模型使用save_checkpoint接口&#xff0c;传入网络和指定的保存路径 要加载模型权重&#xff0c;需要先创建相同模型的实例&#xff0c;然后使用load_checkpoint和load_param_into_net方法加载参数。 使用静态图加速 AI编译框架分为两种运行模式&#xff0c…