当前位置： 首页 > article >正文

宝塔面板+CentOS 7.X：新手小白的第一个前端网站部署全流程（含安全组配置避坑）

article 2026/4/14 5:20:32
宝塔面板CentOS 7.X零基础前端部署实战指南第一次将前端项目部署到线上服务器对很多转行前端或在校学生来说既兴奋又忐忑。兴奋的是终于能让自己的作品被更多人看到忐忑的是面对陌生的服务器环境和复杂的配置流程。本文将带你用最直观的方式从零开始完成整个部署过程避开那些新手最容易踩的坑。1. 服务器准备与环境初始化选择阿里云ECS作为我们的部署平台主要考虑其稳定的性能和友好的中文界面。在购买配置时最低配的突发性能实例如t5系列完全能满足个人项目或学习需求月成本可控制在50元以内。地域选择上国内节点访问速度更快但需要备案如果只是临时测试香港等海外节点免备案但延迟略高。操作系统务必选择CentOS 7.x纯净版这是宝塔面板官方推荐的环境。购买完成后在控制台找到实例列表记下你的公网IP地址——这将是后续访问面板和网站的关键。首次连接建议使用Workbench远程连接免去本地SSH客户端的配置麻烦。注意如果之前在这台服务器上安装过Nginx/MySQL等环境务必通过停止实例→更换系统盘进行彻底重置避免环境冲突导致安装失败。2. 宝塔面板安装与端口配置通过远程终端执行以下命令开始安装最新版宝塔面板yum install -y wget wget -O install.sh https://download.bt.cn/install/install_6.0.sh sh install.sh ed8484bec安装过程约5-10分钟期间需要确认几次直接回车或输入y。安装成功后终端会显示外网面板地址和初始账号密码务必截图保存。此时直接访问这个地址通常会失败——因为我们还没配置安全组规则。在阿里云控制台找到安全组配置添加以下入方向规则授权策略协议类型端口范围授权对象允许TCP387600.0.0.0/0这里的38760需要替换为你实际安装时显示的端口号。保存后等待1-2分钟规则生效再次访问面板地址。遇到浏览器安全警告时这是正常现象点击高级→继续前往即可进入登录界面。3. 基础环境一键部署首次登录后面板会推荐安装运行环境。对于纯前端项目我们只需要Nginx 1.20作为Web服务器FTP服务可选方便文件上传PHP 7.4可选部分CMS系统需要勾选后点击一键安装这个过程可能需要15-30分钟。期间可以先去准备网站文件建议将前端项目构建为静态文件npm run build生成的dist文件夹就是我们需要上传的内容。如果项目使用React/Vue等框架记得在打包前检查路由模式history模式需要额外Nginx配置。4. 网站创建与文件上传在宝塔面板左侧进入网站菜单点击添加站点填写以下关键信息域名暂时没有域名可直接填写服务器IP根目录建议设置为/www/wwwroot/your_projectFTP账号可选创建独立的上传账号数据库可选纯前端项目不需要创建完成后通过面板的文件管理器进入网站根目录删除默认的index.html和404.html然后上传你的前端文件。对于较大的项目建议本地压缩为zip文件通过宝塔上传后在线解压检查文件权限通常应为7555. 安全加固与SSL配置基础部署完成后强烈建议进行以下安全设置修改面板端口在面板设置中更换默认端口避免扫描攻击设置面板入口路径增加一层访问目录保护定期备份开启面板的自动备份功能虽然我们的网站目前通过HTTP可以访问但现代浏览器会对非HTTPS网站标记不安全。宝塔提供了免费的Lets Encrypt SSL证书进入网站→设置→SSL选择Lets Encrypt勾选域名并申请无域名可跳过开启强制HTTPS6. 常见问题排查即使按照步骤操作新手仍可能遇到这些问题问题1访问IP显示宝塔默认页面检查网站配置中的默认站点是否关闭确认文件上传到了正确的根目录清除浏览器缓存后重试问题2样式和JS加载失败检查资源路径是否为相对路径确认Nginx配置中未拦截静态资源尝试在打包配置中添加publicPath: ./问题3端口已开放但无法访问在服务器内执行curl 127.0.0.1:端口测试本地是否监听检查阿里云安全组和服务器防火墙(iptables/firewalld)是否双重拦截通过telnet 公网IP 端口测试外部连通性7. 进阶优化建议当基本功能跑通后可以进一步优化CDN加速使用阿里云OSSCDN分发静态资源自动化部署配置Git Webhook实现提交代码自动更新性能监控安装宝塔的网站监控插件日志分析定期查看Nginx访问日志排查异常请求记得每次重大修改前创建服务器快照遇到不可恢复的问题时能快速回滚。部署第一个网站可能会遇到各种意外但每个问题的解决都是宝贵的经验积累。

相关文章：

宝塔面板+CentOS 7.X：新手小白的第一个前端网站部署全流程（含安全组配置避坑）

宝塔面板CentOS 7.X：零基础前端部署实战指南 第一次将前端项目部署到线上服务器，对很多转行前端或在校学生来说既兴奋又忐忑。兴奋的是终于能让自己的作品被更多人看到，忐忑的是面对陌生的服务器环境和复杂的配置流程。本文将带你用最直观的方…...

编程日记 2026/4/14 5:20:32

AIGlasses_for_navigation与Matlab联合仿真：机器人视觉导航算法验证环境搭建

AIGlasses_for_navigation与Matlab联合仿真：机器人视觉导航算法验证环境搭建 最近在折腾机器人导航算法，发现一个挺头疼的问题：算法写出来容易，但想验证它在真实世界里的表现，成本太高了。要么得买昂贵的硬件平台&…...

编程日记 2026/4/14 5:18:32

软技能训练营：说服力与谈判术——软件测试从业者的进阶指南

在软件测试领域，技术能力是立足之本，但软技能才是突破职业瓶颈的关键引擎。当测试人员从执行层迈向协作层，说服开发团队接受缺陷优先级、推动产品经理调整模糊需求、协调资源保障测试进度等场景，无不需要谈判策略与说服艺术的加持…...

编程日记 2026/4/14 5:18:32

智元远征A3完成全球首批客户交付

4月12日，智元机器人远征A3首批交付仪式在江苏启东市隆重举行。这是继万台量产下线后，智元在商业化落地进程中的又一标志性时刻。这款定位“为舞台而生的硅基明星”的全尺寸人形机器人，经极致打磨正式批量发往客户，标志着智元在全尺…...

编程日记 2026/4/14 5:18:32

PP-DocLayoutV3助力学术出版：LaTeX论文手稿的自动排版分析

PP-DocLayoutV3助力学术出版：LaTeX论文手稿的自动排版分析 每次看到那些排版精美、公式复杂的学术论文，你是不是也好奇过，这些文档里的结构信息——比如哪部分是标题、哪部分是公式、参考文献又在哪里——能不能被机器自动识别出来&#xff…...

编程日记 2026/4/14 5:18:32

机器学习工程师的日常：挑战与解决

在人工智能驱动的软件测试变革浪潮中，机器学习工程师已成为测试团队的核心驱动力。他们架起算法模型与测试实践的桥梁，直面数据、模型、工程化三大维度的挑战。本文将深入剖析其日常工作中的典型困境及系统性解决方案，为软件测试从业者提供可…...

编程日记 2026/4/14 5:18:32

亚洲美女-造相Z-Turbo效果可视化：同一提示词下不同采样步数与CFG Scale影响分析

亚洲美女-造相Z-Turbo效果可视化：同一提示词下不同采样步数与CFG Scale影响分析 想用AI生成一张好看的亚洲美女图片，是不是经常遇到这样的困惑：明明提示词写得挺详细，但出来的图要么模糊不清，要么表情僵硬&#xff0c…...

编程日记 2026/4/14 5:16:32

别再死记硬背PID公式了！用Arduino调一个温控风扇，手把手带你理解P、I、D到底在干啥

用Arduino实战PID温控：不背公式也能调出完美风扇 记得第一次接触PID控制时，盯着那三个神秘的字母——P、I、D，还有一堆让人头大的公式，感觉就像在解一道没有答案的数学题。直到我用Arduino做了一个温控风扇，亲眼看着风…...

编程日记 2026/4/14 5:16:32

模型剪枝方法全解

目录 写在前面 一、为什么需要剪枝：过参数化是个普遍现象 二、剪枝的基本流程 三、非结构化剪枝（Unstructured Pruning） 3.1 幅值剪枝（Magnitude Pruning） 3.2 非结构化剪枝的硬件问题 四、结构化剪枝&#xff…...

编程日记 2026/4/14 5:16:32

SPL06-001驱动开发实战：从硬件I2C到气压数据采集

1. SPL06-001气压传感器驱动开发入门 第一次接触SPL06-001气压传感器时，我被它的高精度和低功耗特性吸引。这款传感器不仅能测量气压，还能同步获取温度数据，非常适合无人机、气象站等嵌入式应用场景。但在实际开发中，我发现网上的…...

编程日记 2026/4/14 5:16:32

PyTorch 详解：动态计算图驱动的深度学习框架

文章目录引言：深度学习的“实验室与工厂”一、PyTorch 核心架构总览二、核心组件详解与设计哲学1. 张量：统一的数据基石2. 自动微分与动态计算图：框架的灵魂3. torch.nn 模块：神经网络的高层抽象4. 训练生态系统：优化与…...

编程日记 2026/4/14 5:16:32

MoveIt实战：从零构建ikfast逆运动学插件的完整指南与避坑手册

1. 为什么你需要ikfast逆运动学插件 在机械臂控制领域，逆运动学（Inverse Kinematics）计算就像是在解一道复杂的数学题——给定末端执行器的目标位置和姿态，求出各个关节应该转动的角度。传统的KDL（Kinematica and Dyna…...

编程日记 2026/4/14 5:14:32

详解c++中的sturct

在c中struct只能存放数据，在c中为其扩展了创建成员函数的功能，struct中的成员默认都是public的，struct的继承默认也是public，并且它是无法用于定义模板参数，这是它与class的主要区别。 虽然在c中struct可以定义成员函数…...

编程日记 2026/4/14 5:14:32

linux学习进展 僵死进程

在前一篇 fork 详解的笔记中，我们提到了一个关键问题——僵尸进程（僵死进程），它是 Linux 进程管理中最常见的“隐患”之一。很多初学者在使用 fork 创建子进程后，常会遇到“进程明明已经退出，却依然在进程列…...

编程日记 2026/4/14 5:14:32

MetaGPT：多智能体协作框架的工程实践

MetaGPT：多智能体协作框架的工程实践 各位开发者朋友们，大家好！我是架构师老杨，在技术圈摸爬滚打已经15年了——写过Java后端系统，搞过微服务架构，玩过云原生落地，最近两年更是扎进了AI Agent和…...

编程日记 2026/4/14 5:14:32

保姆级避坑指南：在Proxmox VE 8.4上给Windows 11虚拟机直通NVIDIA 2080 Ti显卡

保姆级避坑指南：在Proxmox VE 8.4上给Windows 11虚拟机直通NVIDIA 2080 Ti显卡 虚拟化技术正逐渐从企业级应用渗透到个人用户领域，尤其是对于需要高性能图形处理的场景。Proxmox VE作为一款开源的虚拟化平台，配合NVIDIA消费级显卡&#xff0c…...

编程日记 2026/4/14 5:14:31

JAVA OOP概念POJO、DTO、DAO、PO、BO、VO详解

在 Java 后端开发中，面对复杂的业务场景和团队协作，如果没有清晰的数据对象分层，代码很容易变成“意大利面”——数据库字段变更影响前端接口，敏感信息意外泄露，业务逻辑与数据访问混为一谈。 今天，我们结合…...

编程日记 2026/4/14 5:12:31

告别卡顿！用Android Studio Profiler揪出GPU性能瓶颈的保姆级实战

告别卡顿！用Android Studio Profiler揪出GPU性能瓶颈的保姆级实战 当你在测试最新开发的3D游戏时，突然发现角色转身时画面明显卡顿；或者电商App在快速滑动商品列表时，出现了令人不悦的白帧闪烁。作为中高级Android开发者&#xff…...

编程日记 2026/4/14 5:12:31

CANOE实战：基于SOME/IP的以太网通信仿真与配置详解

1. 认识SOME/IP与CANoe的基础组合 第一次接触汽车以太网通信时，我被SOME/IP这个协议名称吸引了注意力。它全称是Scalable service-Oriented MiddlewarE over IP，简单理解就是跑在以太网上的"服务型"通信协议。和传统CAN总线最大的不同在于&…...

编程日记 2026/4/14 5:12:31

PyTorch自定义损失超简单

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 PyTorch自定义损失函数：轻松实现的秘诀目录PyTorch自定义损失函数：轻松实现的秘诀 引言：打破…...

编程日记 2026/4/14 5:12:31

C++零基础到工程实战（4.2）：while循环流程控制与条件表达式实战——使用system和cin实现支持ls的Shell

目录 一、本节学习内容概要图 二、前言 三、while 循环的基本逻辑与执行流程 3.1 while 的基本语法 3.2 while 和 for 的区别 四、while 中的 break、continue 与表达式条件 4.1 break：立即结束整个循环 4.2 continue：跳过本次，进入下…...

编程日记 2026/4/14 5:12:31

杭州专业WordPress模板开发服务商

模板号(mubanhao)是杭州地区知名的WordPress模板开发服务商，专注于为企业提供高品质的WordPress网站模板解决方案。作为长三角地区领先的网站建设服务提供商，模板号凭借多年的技术积累和行业深耕，已成为众多企业数字化转型道路上值得信赖的合…...

编程日记 2026/4/14 5:10:31

LightOnOCR-2-1B手把手教学：从零开始，打造你的智能文字提取工具

LightOnOCR-2-1B手把手教学：从零开始，打造你的智能文字提取工具 1. 为什么选择LightOnOCR-2-1B 在日常工作和学习中，我们经常需要从图片中提取文字内容。无论是扫描的文档、手机拍摄的笔记，还是网上下载的图片资料，手…...

编程日记 2026/4/14 5:10:31

Phi-4-mini-reasoning企业实操：金融风控规则推理引擎构建案例

Phi-4-mini-reasoning企业实操：金融风控规则推理引擎构建案例 1. 项目背景与模型介绍 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型，专为数学推理、逻辑推导和多步解题等强逻辑任务设计。该模型主打"小参数、强推理、长上下文、低延迟…...

编程日记 2026/4/14 5:10:31

DAMO-YOLO TinyNAS保姆级教学：EagleEye日志分析、错误排查与常见报错解决方案

DAMO-YOLO TinyNAS保姆级教学：EagleEye日志分析、错误排查与常见报错解决方案 你是不是刚部署好DAMO-YOLO TinyNAS的EagleEye项目，满心欢喜准备体验毫秒级目标检测，结果一运行就遇到各种报错，看着满屏的日志信息一头雾水&#xf…...

编程日记 2026/4/14 5:10:31

忍者像素绘卷开源可部署：支持国产操作系统（OpenEuler）的兼容方案

忍者像素绘卷开源可部署：支持国产操作系统（OpenEuler）的兼容方案 1. 项目概述 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站，专为像素艺术创作而设计。这款工具将传统漫画创作与现代AI技术相结合，创…...

编程日记 2026/4/14 5:10:31

gma中计算CWDI（作物水分亏缺指数）的源代码

这次是干货 作物水分亏缺指数 作物水分亏缺指数（Crop Water Deficit Index，CWDI，%）从农田水分平衡出发，引入了作物系数，考虑了作物需水特性，能很好好的反应作物缺水状况。计算公式如下&#xff…...

编程日记 2026/4/14 5:08:31

手把手教你用IndexTTS-2-LLM：快速搭建多语种语音合成服务

手把手教你用IndexTTS-2-LLM：快速搭建多语种语音合成服务 1. 引言：为什么选择IndexTTS-2-LLM 语音合成技术正在改变我们与数字世界的交互方式。想象一下，你的应用能够用自然流畅的声音朗读任何文本，无论是中文新闻还是英文报告&…...

编程日记 2026/4/14 5:08:31

UDOP-large入门指南：零基础部署，快速实现英文文档智能理解

UDOP-large入门指南：零基础部署，快速实现英文文档智能理解 1. UDOP-large简介：你的英文文档智能助手 Microsoft UDOP-large是微软研究院开发的通用文档处理模型，专门用于理解和分析英文文档。这个模型结合了视觉理解和文本理解能…...

编程日记 2026/4/14 5:08:31

零代码操作：SiameseAOE中文观点抽取Web界面使用指南

零代码操作：SiameseAOE中文观点抽取Web界面使用指南 1. 认识SiameseAOE观点抽取工具 观点抽取是自然语言处理中的一项实用技术，它能从文本中自动识别出人们对事物的评价和看法。想象一下，当你面对成千上万条商品评论时，手动阅读…...

编程日记 2026/4/14 5:08:31