群晖虚拟机部署线上恋爱网站

2023-11-15

前言

我同学老李因为职业需要,出差十分频繁,好不容易找到个女朋友还要长时间分隔两地,面对着漫长的出差和时差的困扰。每当夜深人静,他们都心痒难耐,希望能找到一种特殊的方式来维系他们的感情,让爱意不受地理距离的束缚,纪念他们为爱奔赴的激情时刻。

免费 一對, 下落, 人 的 免费素材图片 素材图片

老李某天晚上自己制作了一个纪念他们爱情故事的网页,但是不知道怎么才能让他女朋友也能随时随地看到这个网页,老李十分着急,问我怎么尽快让他女朋友也能看到这个网站?

我给他的解决方案是:

使用群晖虚拟机部署本地网页文件,再用内网穿透工具发布至公网,这样不光他女朋友可以看到,还可以发到朋友圈秀恩爱,酸死别人!!

image-20230907113509100

如何免费一键安装群晖虚拟机请参考:

在校学生如何白嫖黑群辉虚拟机和内网穿透,实现海量资源的公网访问?(小白专用) - cpolar 极点云

安装完群晖虚拟机后,按照下面步骤,就能快速发布本地的恋爱网页啦!

1. 安装网页运行环境

遵循从易到难的原则,我们先尝试在群晖NAS上建立一个简单的静态网页,熟悉cpolar创建数据隧道的流程和发布网页的原理,在进行更深层次的动态网页搭建。要搭建静态网页,首先要在群晖系统的套件中心安装网页运行必备的程序,这些程序包括php系列以及web station套件。这里我们选择安装php系列的php7.4版(这也是后期搭建动态网页必须的,因此先行安装)。

1.1 安装php

打开群晖系统的套件中心,在搜索框中输入php,从中找到php7.4,点击图标下方的“安装套件”进行安装。

20221118140353

php7.4安装完成后,就会显示为“已安装”。

20221118140402

1.2 安装webstation

同样的步骤,我们再搜索并安装web station套件。

20221118140410

20221118140417

2. 下载网页源码文件

2.1 访问网站地址并下载压缩包

在进行web station的设置之前,我们先找一个简单网页的源代码,用于我们的网页展示。这里我选择的源代码为开源网页(感谢制作者的开源共享),下载地址为“https://gitee.com/selfeasy/love”,为方便操作,可以zip格式下载

20221118140423

2.2 解压并上传至群辉NAS

接着在本地计算机将其解压。解压后,可以直接将网页文件夹拖动到群晖系统中,此时我们可以先将其存放在web文件夹下

20221118140430

20221118140437

3. 配置webstation

完成网页文件夹的移动后,我们就能对web station进行简单设置,使其生成本地网页运行的环境。

3.1 配置网页服务

点击web station图表下方的“打开”按钮,进入web station的主界面,我们点击左侧的“网页服务”项,点击页面上方的“新增”,在跳出的选择框中选择“本机脚本语言网站”,生成一个网页运行容器。

image-20230821111725410

完成网页内容的选择后,我们需要选择php。如果apa安装无误的话,会在PHP栏位内出现我们所安装的php7.4,只需点击选择即可;然后点击 下一步

image-20230821111813841

填写 网页服务名称概述 ,在 文档根目录 选择 浏览

image-20230821111940738

选择刚刚上传的静态网页文件夹,点击 选择

image-20230821112017006

后端服务器可以选择Nginx或apache;再次确认配置信息,点击 下一步

image-20230821112033626

确认信息,点击 新增

image-20230821112053376

此时我们在网页服务菜单栏中看到我们刚刚创建的 loveweb-test为名称的本地网页服务。说明我们配置网页服务成功。

image-20230821112159083

3.2 配置网络门户

接下来,我们来配置 网络门户 ,在左侧菜单栏中 选择 网络门户 点击 新增

image-20230821112224565

选择 网页服务门户

image-20230821112248576

点击后,我们就进入本地网站的设置页面,在这个页面,我们需要对参数进行逐一设置。

选择刚刚建立的 网页服务,我们的测试名称为: loveweb-test

image-20230821112331864

下一项,到了选择 门户类型

首先是门户类型的设置,我们可以选择是基于主机名访问网页,还是基于端口号访问网页(也就是生成的本地地址以英文字符串为标识,还是以数字为标识)

如果我们选择基于主机名打开网页,配置如下:

image-20230821154844165

但我们更加建议的是选择 基于端口 ,因为接下来我们要进一步学习配置更加复杂的网站,需要不断地在调试过程中输入网站地址,显而易见,基于端口号(两位的数字)更加方便输入且不容易出错误。

image-20230821112350894

  • 选择基于端口

    • 端口:勾选HTTP,并在其后的空格内,填入端口号99(https端口我们大概率用不上,但也需要顺延端口号,否则会提示端口设置错误)

需要注意的是,基于端口和基于主机名,只能有一个生效,二者不能同时生效,并且:

  • 基于端口的网址是 http://局域网IP/主机名
  • 基于端口的网址是 http://局域网IP:端口号

HTTP 项上打钩,端口我们填入 99

image-20230821150416297

点击 应用 后,我们在 网络门户界面中发现我们所建立的 用户自定义的门户 点击对应的链接。

image-20230821150449310

4. 局域网访问静态网页配置成功

此时,我们成功在局域网中打开本地端口为99的静态页面。

image-20230821150512741

可以看到,我们的网页模板已经能够正常打开,也就说明群晖NAS上的静态网页配置成功。由于web station的配置细节较多,我们在配置的时候需要多一分小心,以免配置错误导致网页无法访问。

5. 使用cpolar发布静态网页,实现公网访问部署在NAS本地的网页。

5.1 安装cpolar

群晖系统的软件安装程序与windows有很大不同,同时群晖系统对原生Linux系统的修改,导致群晖想要安装cpolar,只能通过手动安装套件的形式进行。首先,我们下载cpolar的群晖系统套件。

cpolar群晖套件下载地址:https://www.cpolar.com/synology-cpolar-suite

20221118135537

接着,在群晖系统的“套件中心”里,选择“手动安装”,并在弹出的文件选择页面,找到cpolar套件存放位置,点击“下一步”进行安装。在安装开始前,群晖系统会弹出询问提示,我们可不必管他,选择“同意”安装。

20221118135543

20221118135548

20221118135556

点击同意后,群辉系统会对安装信息进行确认,我们继续点击“完成”。只需等待很短时间,cpolar就能安装完成,此时回到套件中心主页,就能看到cpolar已经加入了“已安装”列表内。

20221118135602

20221118135608

此时我们点击cpolar,就能进入cpolar软件信息页。在这里,我们能找到访问cpolar客户端的URL(cpolar客户端采用Web-UI界面,因此是URL地址)

20221118135614

20221118135619

在新开的Web页面,我们能看到cpolar客户端在本地的地址,以及cpolar客户端的登录界面。如果没有cpolar账号的,可以通过该页面下方的“免费注册”链接,快速轻松的获得cpolar账号。

从以上介绍不难看出,在群晖系统上安装cpolar并不复杂,只需简单几步,就能通过cpolar强大的数据隧道功能,将内网的群晖NAS和公共互联网连接起来。

5.2 使用cpolar将本地页面发布至公网

在前几个章节中,我们将向大家介绍,如何使用cpolar,将这个新鲜出炉的网页发布到公共互联网上。

在上篇文章中,我们在群晖系统中使用web station创建了一个简单的静态网页,并且在局域网内进行测试,网页也能够正常显示。接下来,我们就可以使用cpolar建立一条数据隧道,将这个网页发布到公共互联网上。现在,就让我们看看如何操作吧。

在使用cpolar创建数据隧道之前,我们需要回顾本地网页的输出端口,在之前的设置中,我们将http和https端口分别设置为81和82(设为同一端口会导致端口冲突,因此只能分开设置)。在cpolar的设置中,我们可以直接使用81端口建立数据隧道。

在群晖系统中打开cpolar客户端

20221118140628

选择“隧道管理”项下的“创建隧道”页面。与远程访问内网群晖NAS时的设置一样,我们先要对这条隧道进行命名,这里我们就使用网页主题love,作为隧道名称;接着“协议”选择“http”协议;“本地地址”代表的就是该网页的端口号,这里填入“99”;“域名类型”我们先选择“随机域名”,创建出临时隧道以便进行测试;最后的“地区”则根据实际情况选择,这里我们选择China VIP。

image-20230823164528372

各项设置完成后,就可以点击页面下方的“创建”按钮,创建一条临时数据隧道,对本地网页进行测试,确认其能够被正常访问到。

接着我们点击“状态”项下的“在线隧道列表”,找到cpolar客户端生成的临时公网地址,并在浏览器中输入该地址进行访问。

image-20230823164647336

image-20230823164843527

经过测试,cpolar建立的数据隧道已经成功指向了群晖NAS本地的网页,并且我们也能正常的访问到网页内容,也就说明我们的各项配置都没有问题。不过此时的数据隧道还处于临时链接状态,每隔24小时这个公网地址就会更新一次,为了让我们的网站能够长期稳定访问,我们还需要对数据隧道进行进一步设置,这部分内容我们将在下篇文章中,为大家详细介绍。

5.3 为本地网页配置二级子域名,并公网发布

在之前的两篇介绍中,我们使用群晖系统的套件(主要为web station和php7.4)和开源模板,在本地群晖NAS中建立起一个简单网页,并通过cpolar建立的临时数据隧道,将其发布到公共互联网上,以测试我们之前所做的各项设置是否正确。而结果显示我们所做的设置并无问题,因此我们就可以将这个数据隧道固定下来,让我们的网站链接能够稳定存在。现在,就让我们开始吧。

要建立一条稳定的数据隧道,需要从隧道的入口和出口两方面进行设置,数据隧道的出口很明显,就是群晖NAS本地的网页(可以在cpolar客户端进行设置),而数据隧道的入口,就是cpolar云端生成的公网地址。因此我们先登录cpolar官网。访问cpolar官网我们可以通过客户端页面左侧的“cpolar”官网按钮访问,也可以在浏览器中输入“https://www.cpolar.com”进行访问

image-20230823170235966

进入cpolar官网并登录个人账号后,我们点击页面左侧的“预留”项,找到“保留二级子域名”栏位。在这个栏位中,我们需要对三项信息进行定义。首先是“地区”,该栏与cpolar客户端一样,选择实际使用地区即可(这里我们填入China VIP);接着是“名称”栏位,这个栏位填入的信息最终会显示在公网地址中,因此可以选择清晰明了的内容(我们填入网页内容lovetest,在这里如果您点击保留时提示此域名已被其他用户注册,您可以根据个人需要进行更改,如LoveTest等等);最后是这条数据隧道的描述,也可以看做注释,方便我们区分不同数据隧道所指向的内容。

在填完各项信息后,就可以点击栏位右侧的“保留”按钮,将这条网页数据隧道保存下来。

在cpolar云端设置好数据隧道后,我们回到群晖NAS的cpolar客户端,在“隧道管理”项下的“隧道列表”找到之前建立的临时数据隧道,点击“编辑按钮”,打开隧道编辑页面。

image-20230823170318590

在这个页面,我们需要根据cpolar云端建立的数据隧道入口,对数据隧道的群晖本地出口信息进行更改。首先是将“随机域名”改选为“二级子域名”;接着在下方“Sub Domain”填入二级域名,这个例子中是lovetest;最后点击页面下方的“更新”,保存我们所做的信息更改。

接着我们再转入“状态”项下的“在线隧道列表”页面,查看公网地址信息是否更改成功

image-20230823170537911

确认公网地址变更成功后,我们可以使用这个链接试访问群晖NAS上的网页,只要能正确显示,就说明我们的网页已经获得了固定公网地址,能够长期稳定的被访客所访问到。

image-20230823170756626

到这里,我们已经成功的在群晖系统上建立简单网页,并使用cpolar将其发布到公共互联网上,能为公网访客轻松访问到。

老李的恋爱网站成为了他们爱情的桥梁,不论距离有多远,他们都可以随时随地访问这个网站,更改内容,留下爱情的足迹。这个网站见证了他们的浪漫瞬间,记录了他们为爱奔赴的激情时刻。无论你是奋斗者、恋爱者,或者只是希望用一种特殊的方式纪念你们的爱情,这个教程都将帮助你实现这一愿望,以简单而有趣的方式制作属于你们的恋爱网站。愿你的爱情故事也能如同老李和他女朋友一样,跨越时空,在网页上绽放,留下美好的回忆和深情的时光。

转载自cpolar极点云文章:老李的远程秀恩爱狠活儿:群晖虚拟机部署线上恋爱网站

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

群晖虚拟机部署线上恋爱网站 的相关文章

  • thinkphp5学习路程 四 模板调用及视图渲染

    继承 think Controller 类 以下类可以直接使用 fetch 渲染模板输出 display 渲染内容输入 assign 模板变量赋值 engine 初始化模板引擎
  • Mockjs模拟登录接口数据

    一丶安装mockjs cnpm install mockjs save dev 二丶创建Mock文件 Mock文件下包含index js mock服务 和user js mock数据 index js 首先引入Mock const Mock
  • Symbol类型

    如何定义symbol类型 2种方式 let id1 Symbol console log typeof id1 如果我们将 id 定义为数字类型 当他们id相同时 判断它们是否相等 结果肯定是相等的 let id1 666 let id2
  • 从recat源码角度看setState流程

    setState setState 将对组件 state 的更改排入队列批量推迟更新 并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件 其实setState实际上不是异步 只是代码执行顺序不同 有了异步的感觉 使用
  • requests库get方法

    例 r requests get url r 一个包含服务器资源的Response对象 requests get url 构造一个想服务器请求资源的Request对象 Response 包含爬虫返回的全部内容 requests get ur
  • Java8 新特性——流式操作

    流式操作 流 Stream Java8新增 用来处理我们集合的数据 与IO包里的流是完全不同的概念 倒是和Spark Streaming很像 反正是抄的 如何处理集合中的数据呢 为什么引入流 声明式处理数据 元素的内部迭代 不需要做外部迭代
  • 宝塔安装的ftp服务完整URL的形式访问

    宝塔安装的ftp服务完整URL的形式访问 宝塔安装命令 yum install y wget wget O install sh http download bt cn install install 6 0 sh sh install s
  • STM32按键控制LED灯

    因为是按键输入 所以创立两个文件 bsp key c和bsp key h文件 一 bsp key c中需要对按键进行初始化 这个和LED的类似 GPIOA G均是挂在APB2上的 1 时钟 故时钟均为RCC APB2PeriphClockC

随机推荐

  • 保姆式详细过程Ubuntu上传代码至Gitee、Github

    Gitee的用法基本与Github一致 将用Gitee为例 毕竟加载速度快 创建仓库 在Gitee网站右上角点击加号 以下是我一般用的创建格式 可以自行选择 点击创建即可完成 Ubuntu连接Gitee 在终端输入sudo apt get
  • C#笔记(2)---基本语法 [流程控制语句]

    一 条件语句 1 if 语句 语法 if else 可以单独使用if部分 也可以具有else if Example int i 2 if i 0 label4 Text 0 else if i 1 label4 Text 1 else la
  • MySQL必知必会 学习笔记 第十二章 汇总数据

    聚集函数是运行在行组上 计算和返回单个值的函数 对表中数据而非实际数据本身进行汇总 如获取行数 获取某列最值等 除上述函数外 MySQL还支持标准偏差聚集函数 返回某列平均值 SELECT AVG columnName AS avgVal
  • js 文件与文件流之间互换

    直接看代码
  • 梯度优化_神经网络中的梯度优化算法(三)

    Nadam Nadam Nesterov accelerated Adaptive Moment Estimation 结合了Adam和NAG的梯度优化方法 为了将NAG方法融入Adam 需要修改下Adam的momentum项 回顾mome
  • 五子棋小游戏 java版(代码+详细注释)

    游戏展示 这周闲来无事 再来写个五子棋小游戏 基本功能都实现了 包括人人对战 人机对战 界面布局和功能都写的还行 没做到很优秀 但也不算差 如有需要 做个java初学者的课程设计或者自己写着玩玩也都是不错的 非常简单 小白照着就能写出来 完
  • 【JS基础】Number、布尔值、Null和Undefined

    Number 在JS中所有的数值都是Number类型 包括整数和浮点数 小数 区分Number和String typeof console log typeof a 使用Number MAX VALUE 表示数字的最大值 如果超过最大值 则
  • 存储过程相关

    在sybase数据库中检查存储过程是否存在 如存在就删除表记录 如不存在就创建 if exists select 1 from sysobjects where id object id K FY P EncodeQqTitle name
  • QT中的线程与事件循环理解(1)

    1 需要使用多线程管理的例子 一个进程可以有一个或更多线程同时运行 线程可以看做是 轻量级进程 进程完全由操作系统管理 线程即可以由操作系统管理 也可以由应用程序管理 Qt 使用QThread 来管理线程 QWidget widget ne
  • 【Linux常见指令1】

    目录 前言 常用指令 ls指令 whoami pwd cd touch 触摸 mkdir make directory rmdir rm remove mv move 移动 cp copy 拷贝 stat 统计 nano echo gcc
  • 创建计划行确认数量为0的销售订单

    需求 通过BAPI函数创建销售订单 并且计划行里的确认的数量为0 解决方法 使用BAPI BAPI SALESORDER CREATEFROMDAT2创建SO后 再使用函数 SD BACKORDER UPDATE 对确认的数量进行修改 ti
  • 正割函数(sec)

    1 定义 正割与余弦互为倒数 余割与正弦互为倒数 即 sec
  • js获取数组中最大最小值及对应索引值(下标)

    1 使用原生Js实现该功能 主要是通过循环实现 getMaxMin data key gt if data return false let maxIndex 0 let minIndex 0 let maxNum data 0 key 0
  • 蓝桥杯每日一题——填空题·顺子日期

    本题为填空题 只需要算出结果后 在代码中使用输出语句将所填结果输出即可 小明特别喜欢顺子 顺子指的就是连续的三个数字 123 456 等 顺子日期指的就是在日期的 yyyymmdd 表示法中 存在任意连续的三位数是一个顺子的日期 例如 20
  • 惊:FastThreadLocal吞吐量居然是ThreadLocal的3倍!!!

    说明 接着上次手撕面试题ThreadLocal 面试官一听 哎呦不错哦 本文将继续上文的话题 来聊聊FastThreadLocal 目前关于FastThreadLocal的很多文章都有点老有点过时了 本文将澄清几个误区 很多文章关于Fast
  • 读取excel中的url链接下载图片并生成新excel保存图片

    1 在实际使用问卷星对班级的学生的健康码 核算记录 行程码进行统计时 导出的excel里是链接而非图片 但是上级要求上交的excel必须是图片为解决该问题 通过以下的main方法解决了该问题 package com changshin im
  • 'react-scripts' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 error Command failed with exit code 1.aPritice\\JieDe\\e

    本地使用create react app脚手架新建项目 因为下载了其他的包 改了一些文件 可能对这个项目的启动项产生了影响 导致包不全了 运行react项目时 报错 react scripts 不是内部或外部命令 也不是可运行的程序 或批处
  • 论文笔记——HRFormer

    摘要 本文提出了一种高分辨率Transformer HRFomer 它在密集的预测任务中学习高分辨率表示 而原来的Vison Transformer则产生低分辨率表示 具有高内存和计算成本 作者利用了高分辨率卷积网络 HRNet 中引入的多
  • C#基础(字符串拼接)

    字符串拼接方式1 之前的算术运算符 只是用来数值类型变量进行数学运算的 而 string 不存在算术运算符 不能计算 但是可以通过 号来进行字符串拼接 用 号来进行字符串拼接 str str 456 复合运算符 str 1 4 true s
  • 群晖虚拟机部署线上恋爱网站

    文章目录 前言 1 安装网页运行环境 1 1 安装php 1 2 安装webstation 2 下载网页源码文件 2 1 访问网站地址并下载压缩包 2 2 解压并上传至群辉NAS 3 配置webstation 3 1 配置网页服务 3 2