1 前言
一个网站,无论使用什么框架构建,最终呈现给用户的都是由 HTML、CSS 和 JavaScript 这三大核心元素组成。当我们本地开发完成一个网站后,如何才能让它被其他人访问到呢?
在学习框架时,运行 npm run dev 命令通常会启动一个本地服务器,并生成类似 localhost:3000 的访问地址。这确实是一个真实的网站服务器(后续我们会接触到更多类型),但它运行在你的内网环境中。我们的目标是让网站能在外网被访问到,并且能配置域名、实现 HTTPS 等高级功能。
互联网的核心在于设备间通过 IP 地址进行通信。无论是访问静态网页、调用 API 接口,还是其他基于不同应用层协议的交互,都离不开 IP。我们日常使用的个人设备(电脑、手机)通常拥有的是私有 IP 地址,它仅在局域网内有效,无法直接在公网上被访问。这导致了你本地运行的网站无法被外部用户直接访问。
解决方案是什么? 答案是使用专业的云服务器提供商提供的服务器,将你的网站部署到这台拥有公网 IP 的服务器上。
服务器本质上和你家里的电脑没有根本区别。关键的不同在于:
- 服务器是 24 小时不间断运行的。
- 服务器拥有独立的公网 IPv4 地址。 正是这个公网 IP,使得部署在其上的服务可以被全球互联网上的任何设备直接访问到。
2 购买服务器
选择云服务器厂商时,国内常见的有:
- 阿里云
- 腾讯云
- 华为云
- 京东云
- Microsoft Azure 云计算服务
这里只推荐阿里云的99三年服务器
- 地域选择:建议选择上海、北京等网络较好的节点。
- 操作系统镜像:推荐选择 CentOS 或 Ubuntu
购买完成后,你可以在控制台看到你的服务器实例。
点击进入实例详情页,重点关注以下几个信息:
- 公网 IP 地址
- 实例状态
- 操作系统类型
- 安全组设置
接着重置你的实例密码
3 连接你的服务器
购买服务器后,你获得了它的公网 IP 地址和登录密码。我们将使用 SSH 协议远程连接到这台服务器。SSH 是一个应用层的安全网络协议,这里的 HTTP 协议也是后面会讲到的,这里就先简单介绍一下。
3.1 什么是 SSH?
SSH 是一个安全远程登录协议的标准。最常用的开源实现是 OpenSSH,它通常预装在终端环境中。OpenSSH 提供的关键命令包括:
ssh:用于建立安全的远程终端连接。ssh-keygen:用于生成 SSH 密钥对(非对称加密,包含公钥和私钥)。scp:用于在本地主机和远程主机之间安全地复制文件。sshd:SSH 守护进程(服务端程序,在服务器上运行)。
3.2 SSH 的两种连接方式
SSH 支持两种主要的身份验证方式:密码连接和密钥连接。
3.2.1 密码连接
这是最简单直接的方式。在你的本地终端运行命令:
ssh root@你的服务器公网IP
系统会提示你输入密码。输入你在第 2 步重置的实例密码即可登录。
3.2.2 密钥连接 (更安全推荐)
密钥连接比密码更安全,且免去了每次输入密码的麻烦。
- 生成密钥对 (在本地电脑操作):
ssh-keygen
执行命令后,通常会询问密钥保存路径和密码短语,一路按回车 选择默认路径并跳过设置密码短语即可
- 查看生成的密钥:
cd ~/.ssh # 进入SSH目录
ls # 列出文件
你会看到两个关键文件:
id_rsa:你的私钥文件id_rsa.pub:你的公钥文件
- 将公钥上传到服务器
使用以下命令生成密钥对,将公钥内容复制到
authorized_keys中
cat id_rsa.pub >> authorized_keys
为了方便管理,你也可以在阿里云上绑定你的密钥对。搜索密钥对管理,将你的公钥导入。
- 使用私钥登录服务器
使用
scp命令,将你服务器.ssh文件夹中的密钥复制到本地,然后使用密钥连接主机
scp -r root@公网IP:~/.ssh "你选择一个文件地址用于存放你的密钥"
root@公网IP's password:
authorized_keys 100% 569 5.9KB/s 00:00
id_rsa.pub 100% 569 5.7KB/s 00:00
id_rsa 100% 2602 24.9KB/s 00:00
上述操作完成之后,你就可以使用 ssh -i 操作使用你的密钥连接主机
ssh -i /本地/私钥/的/路径/id_rsa root@你的服务器公网IP
注意: 方法一(手动)需要服务器允许密码登录。方法二(控制台绑定)通常会自动禁用密码登录,安全性更高。务必保管好你的私钥(
id_rsa)文件!
4 服务器运维面板 (宝塔面板)
直接通过命令行管理服务器涉及大量重复性工作,且对 Linux 操作有一定门槛。服务器运维面板应运而生,它通过图形化界面 (GUI) 封装了复杂的底层命令,极大地简化了服务器管理、网站部署、环境配置等操作,让你能更专注于“用服务器做什么”而不是“如何操作服务器”。常见的面板有宝塔面板、cPanel、Plesk 等。本文以国内广泛使用的 宝塔面板 为例。
- 安装宝塔面板:
我们可以直接在浏览器上搜索宝塔面板进行下载安装即可: 宝塔面板(bt.cn) 简单好用的Linux/Windows服务器运维管理面板
下载完成之后,我们打开终端复制官网上的脚本命令进行安装
if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec
-
完成安装与初始设置:
-
安装成功后,终端会显示以下关键信息:
- 外网面板地址:
https://你的服务器IP:端口/随机字符 - 内网面板地址:
https://内网IP:端口/随机字符 - username: 初始用户名 (通常是随机字符串)
- password: 初始密码 (非常重要!)
注意!:注意路径后面跟了随机 hash,在后续需要重新显示入口时,可以使用
bt default命令查看
- 外网面板地址:
-
在服务器终端输入命令
bt,然后根据提示选择对应选项修改用户名和密码
-
-
访问宝塔面板:
- 在浏览器中输入安装成功时显示的 外网面板地址
- 无法访问? 这通常是因为服务器的安全组防火墙阻止了宝塔面板使用的端口
-
配置安全组/防火墙:
- 登录阿里云控制台,找到你的 ECS 实例。
- 进入实例的 “安全组” 配置页面。
- 安全组规则控制流量的进出:
- 入方向 (Inbound): 控制外部访问服务器的流量(我们需要开放宝塔端口)。
- 出方向 (Outbound): 控制服务器访问外部的流量(通常默认放行)。
- 协议类型主要有:TCP (网页、SSH 等)、UDP (视频流、DNS 等)、ICMP (ping 命令)。
- 开放宝塔面板端口:
- 点击 “手动添加” 或 “快速添加” 规则。
- 规则方向: 入方向
- 授权策略: 允许
- 协议类型: TCP
- 端口范围: 填写宝塔面板使用的端口号 (如
15741/15741或15741) - 授权对象:
0.0.0.0/0(表示允许所有 IP 访问,也可按需限制) - 保存规则。
- 禁止 Ping: 在安全组中,删除或拒绝 ICMP 协议的入方向规则。这可以防止服务器被简单的网络扫描发现,增加一点安全性(但无法阻止专业扫描)。设置后,在本地终端
ping 你的服务器IP会显示超时。
-
登录宝塔面板并安装环境:
-
再次尝试访问外网面板地址。
-
浏览器可能会提示 “您的连接不是私密连接” 或 “不安全” 警告。这是因为宝塔默认使用自签名的 HTTPS 证书,浏览器不信任它。HTTPS 依赖 TLS/SSL 加密和受信任的 CA 颁发的证书来保证安全。我们后续会介绍如何申请免费的可信证书。这里直接进入即可。
-
使用你修改后的用户名和密码登录宝塔面板。
-
首次登录,面板通常会推荐安装一套 “LNMP” 或 “LAMP” 运行环境。根据你的项目需求选择(或跳过推荐自己选):
- 本文推荐安装:
- Nginx
- MySQL 8.0
- Docker
- 选择好版本,点击 “一键安装” 并耐心等待完成。
- 本文推荐安装:
-
安装完成后,你将进入宝塔面板的主界面,可以方便地进行网站管理、数据库管理、文件管理、安全设置等操作。
-
5 在你的服务器上部署项目
默认访问你服务器的公网 IP 显示无法处理此请求,注意这报错,和后面的报错是不同的,一个是无法访问端口,浏览器报错了,一个是可以访问端口,但是端口没有部署服务,服务器报错了
我们在阿里云控制面板安全组设置端口
这次再访问,是这样的,它是服务器报错,说明我们还没没有部署网站
我们找到之前写的项目,把 html 拖到宝塔面板的文件中
然后创建一个站点,域名填服务器 IP 就行
这个时候就可以访问到网站了
6. 结语
🎉 至此,你已经成功地从购买服务器、连接服务器、配置环境到部署网站,完成了整个流程!你的网站现在运行在公网服务器上,可以被任何人访问了。后续还可以探索绑定域名、配置 HTTPS 证书、部署动态网站 (Node.js, Python, PHP 等)、使用 Docker 等更高级的功能。
(作者的小心愿) 看到这里的宝子们,如果觉得这篇教程对你有帮助,可以给我的这个参赛作品点个赞嘛 👉 暗格里的秘密 - AI Coding 👈 虽然本 UP 主一时大意错过了正式报名,但看到自家娃的浏览量还不错,还是希望它能被更多小伙伴看到呀!