PVE系列教程(二十四)、通过Nginx配置安装vuepress博客

PVE系列教程(二十四)、通过Nginx配置安装vuepress博客

一、创建hep-vuepress虚拟机

这里使用PVE系列教程(二十二)、安装Ubuntu24.04(桌面版)创建好的虚拟机，然后克隆一台机器出来，请查看前面教程。

克隆的虚拟机配置项如下。

二、虚拟机环境配置

启动虚拟机，查看这台机器的IP地址。如果没有安装net-tools请根据apt命令进行安装。

安装ssh，使得可以远程登录，并开放22端口。

使用MobaXterm等类似的工具进行ssh连接。在usr文件夹下创建一个software的文件夹，这个文件夹下面存放我们vuepress打包好的dist文件。

赋予software文件夹777的权限。

sudo su -

cd /usr

mkdir software

chmod -R 777 software

把idea工程下，打包好的dist压缩好之后的压缩包上传到software文件夹。

解压dist文件，并重命名为kelsen文件夹，并赋予777的权限。

apt install unzip

unzip dist.zip

mv dist/ kelsen/

chmod -R 777 kelsen

三、安装nginx

#安装nginx
apt install nginx-core -y
#查看nginx版本
nginx -v
#启动nginx
service nginx start
#停止nginx
service nginx stop
#开放80端口，nginx默认端口
ufw allow 80

四、配置vuepress

修改nginx默认首页为software文件夹下的kelsen文件夹下的静态文件。在/etc/nginx/sites-available/default中，location增加root /usr/software/kelsen;和index index.html index.htm;。

# 打开默认的 nginx 配置文件
vim /etc/nginx/sites-available/default

#前端访问地址
location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                root /usr/software/kelsen;
                index index.html index.htm;
                try_files $uri $uri/ =404;
}

输入IP地址，可以访问到vuepress部署到Ubuntu首页面。

五、配置域名访问

因为我有一台阿里云主机，有做内网穿透，所以直接在frpc.ini中增加一条记录

[hep-vuepress]
type = tcp
local_ip = 192.168.31.116
local_port = 80
remote_port = 80

在阿里云主机安全规则中，放行80端口。

访问http://www.huerpu.cc/即可访问到博客主页啦。