【服务器搭建】用自己电脑搭建一个服务器!

👋前言

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

👀一、内网穿透

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

🌱二、内网穿透工具

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

巴比达官网
https://www.shenzhuohl.com/chuantou.html?bd_vid=12686741513710243326

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

十多种五种永久免费内网穿透傻瓜式使用
https://blog.csdn.net/qq_40739917/article/details/106001561?ops_request_misc=&request_id=&biz_id=102&utm_term=%E9%A3%9E%E9%B8%BD%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F%E5%85%8D%E8%B4%B9&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-106001561.142%5Ev100%5Epc_search_result_base9&spm=1018.2226.3001.4187

💞️三、本地测试

3.1 环境准备

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

Nginx 的初步了解以及安装使用
https://blog.csdn.net/TM007_/article/details/138791806?spm=1001.2014.3001.5501

3.2 nginx 修改启动页面

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

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

<!DOCTYPE html><htmllang="en"><head> <metacharset="UTF-8"> <metaname="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> <divclass="container"> <divclass="login-wrapper"> <divclass="header">Login</div> <divclass="form-wrapper"> <inputtype="text"name="username"placeholder="username"class="input-item"> <inputtype="password"name="password"placeholder="password"class="input-item"> <divclass="btn">Login</div> </div> <divclass="msg"> Don't have account? <ahref="#">Sign up</a> </div> </div> </div></body></html>