【服务器搭建】✈️用自己电脑搭建一个服务器！

2024-10-08 服务器 0

%20目录

%20👋前言

%20👀一、内网穿透

%20🌱二、内网穿透工具

%20💞️三、本地测试

%20 %20 %20 %20 %203.1%20环境准备

%20 %20 %20 %20 %20 3.2%20nginx%20修改启动页面

%20 %20 %20 %20 %203.3%20神卓互联注册，创建映射规则

%20📫四、章末

%20%20

%20👋前言%20

%20 %20 %20 %20小伙伴们大家好，一直有一个想法，就是搭建自己的网站，并且可以通过公网访问；中间也去看了很多搭建服务的步骤，了解到有两种常见的实现方式，一个就是购买商业服务器，把项目部署到上面，另外就是自己的电脑做服务器，通过内网穿透实现，这篇文章来看下如何将自己的电脑开发成一个服务器，并且可以供外网访问

%20👀一、内网穿透%20

内网穿透是一种网络技术，允许通过公共网络（比如互联网）访问处于私有局域网（内网）内部的计算机或服务。简单来讲比如我们日常自己开发的%20SpringBoot%20项目，只能我们自己本地访问%20“%20http://localhost:8080/...",通过内网穿透操作后，不仅可以自己本地访问，在别的设备上也可以访问本地的%208080%20端口

%20🌱二、内网穿透工具%20

%20 %20 %20 %20本地测试使用的是%20神卓互联，官网如下：

%20

巴比达_企业级内网穿透

%20

%20 %20 %20 %20目前市面上有很多供应商，具体介绍可以参考这篇博主大大的文章，介绍了很多可以实现的工具（但是注意甄别，有的方法已经不可用了）

%20

十多种%20五种永久免费%20内网穿透傻瓜式使用_免费内网穿透-CSDN博客

%20💞️三、本地测试%20 %20 %20 %20 %203.1%20环境准备%20

%20 %20 %20 %20既然要测试访问本地项目，首先要有一个可以启动的项目，这里想到了之前用的%20Nginx,%20把nginx%20下载到本地后可以一键启动，也可以算是一个可以运行的项目，访问%20nginx%20监听的端口号即可访问一个页面，nginx%20的下载安装使用可以看之前的文章，链接如下：

%20

【Nginx%20＜一＞⭐️】Nginx%20的初步了解以及安装使用_nginx%201.26.0%20安装-CSDN博客

%20 %20 %20 %20 %20 3.2%20nginx%20修改启动页面%20

%20 %20 %20 %20 3.2.1%20修改%20nginx%20默认访问页面，index2.html是一个简单的登录页面，html文件也可以简单通过创建%20.txt%20文件修改好之后再改为%20.html%20文件即可

%20

%20 %20 %20 %20 %20 %20 %20 %20注：修改默认访问页面之后需要重启%20nginx%20项目，访问监听端口页面如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * {            margin: 0;            padding: 0;        }        html {            height: 100%;        }        body {            height: 100%;        }        .container {            height: 100%;            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);        }        .login-wrapper {            background-color: #fff;            width: 358px;            height: 588px;            border-radius: 15px;            padding: 0 50px;            position: relative;            left: 50%;            top: 50%;            transform: translate(-50%, -50%);        }        .header {            font-size: 38px;            font-weight: bold;            text-align: center;            line-height: 200px;        }        .input-item {            display: block;            width: 100%;            margin-bottom: 20px;            border: 0;            padding: 10px;            border-bottom: 1px solid rgb(128, 125, 125);            font-size: 15px;            outline: none;        }        .input-item:placeholder {            text-transform: uppercase;        }        .btn {            text-align: center;            padding: 10px;            width: 100%;            margin-top: 40px;            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);            color: #fff;        }        .msg {            text-align: center;            line-height: 88px;        }        a {            text-decoration-line: none;            color: #abc1ee;        }    </style></head><body>    <div class="container">        <div class="login-wrapper">            <div class="header">Login</div>            <div class="form-wrapper">                <input type="text" name="username" placeholder="username" class="input-item">                <input type="password" name="password" placeholder="password" class="input-item">                <div class="btn">Login</div>            </div>            <div class="msg">                Don't have account?                <a href="#">Sign up</a>            </div>        </div>    </div></body></html>