使用宝塔面板部署前端项目到服务器

目录
文章目录
前言
一、第一步:创建文件夹
二、第二步:部署前端项目
三、第三步:打开防火墙
文章目录
- 前言
- 第一步:创建文件夹
- 第二步:部署前端项目
- 第三步:打开防火墙
- 总结
前言
在此之前,我们已经创建了宝塔面板账号、拥有了一台服务器。现在,我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问,那么我们应该在宝塔面板上面怎样做呢?
一、第一步:创建文件夹
1、打开我们的宝塔面板后,我们会看到左侧有一列目录,点击里面的文件。

2、点击在根目录下名叫www的文件夹

3、点击里面叫wwwroot的文件夹

4、在里面随便创建一个文件夹准备放入我们的前端代码

5、放入我们的前端代码

二、第二步:部署前端项目
1、在宝塔面板的左侧有个叫网站的名字,点进去并选择node项目

2、添加我们刚才放入的项目

3、配置前端的信息

三、第三步:打开防火墙
1、点击自己的项目,可以查看自己的项目运行情况

2、在左侧有个项目日志,可以观看是否运行成功

3、打开自己端口的防火墙

4、在服务器那边也要开启端口

5、使用端口+ip到网页上面访问

部署成功!!!

总结
前端部署分为3步:
1、创建文件夹
2、开始前端部署
3、开启防火墙
前端部署后最直观的就是看见网页,但后端没有部署是无法实现功能的,在后面将有如何这是数据库和项目的一键部署。如果这篇文章对你有帮助的话请点点赞和收藏。如果网站和文章有问题的话也可以私信我或指出来!!!
相关文章:
使用宝塔面板部署前端项目到服务器
目录 文章目录 前言 一、第一步:创建文件夹 二、第二步:部署前端项目 三、第三步:打开防火墙 文章目录 前言第一步:创建文件夹第二步:部署前端项目第三步:打开防火墙总结 前言 在此之前,我…...
Enge问题解决教程
目录 解决问题的一般步骤: 针对"Enge问题"的具体建议: 以下是一些普遍适用的解决问题的方法: 以下是一些更深入的Enge浏览器问题和解决办法: 浏览器性能问题: 浏览器插件与网站冲突: 浏览…...
使用yarn安装electron时手动选择版本
访问1Password或者其他可以提供随机字符的网站,获取随机密码运行安装命令 操作要点,必须触发Couldnt find any versions for "electron" that matches "*"才算成功 将复制的随机密码粘贴到后面 例如:yarn add --dev elec…...
AIGC:阿里开源大模型通义千问部署与实战
1 引言 通义千问-7B(Qwen-7B)是阿里云研发的通义千问大模型系列的70亿参数规模的模型。Qwen-7B是基于Transformer的大语言模型, 在超大规模的预训练数据上进行训练得到。预训练数据类型多样,覆盖广泛,包括大量网络文本、专业书籍…...
Java小案例-Java实现人事管理系统
前言 《人事管理系统》该项目采用技术jsp、Struts2、Mybatis、dwr、tomcat服务器、mysql数据库 开发工具eclipse/idea。 【项目使用技术】 Struts2Mybatisdwrjqueryjscss等技术 前端使用技术:JSP, dwr、jquery、js、css等 后端使用技术:Struts2Myba…...
Win系统修改Nginx配置结合内网穿透实现远程访问多个Web站点
文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载好后解压进入nginx目…...
如何使用 NFTScan NFT API 在 Base 网络上开发 Web3 应用
Base 是 Coinbase 使用 OP Stack 开发的最新以太坊第 2 层(L2)网络,用于解决以太坊等主要区块链面临的可扩展性和成本挑战。Coinbase 将其描述为“安全、低成本、对开发人员友好的以太坊 L2,旨在将下一个 10 亿用户带入 Web3”。B…...
【Chrome】ERR_SSL_PROTOCOL_ERROR问题
文章目录 前言一、下载二、使用步骤总结 前言 Edge升级最新版后,有的https访问不了,报如下错误 发现新版Chrome以及Chromium内核访问nginx ssl时报错,顺着这个思路接着查看到大佬的结论:服务器nginx使用的openssl版本过低&#…...
Codeforces Round 916 (Div. 3)(E:贪心 F贪心dfs G tarjan+topsort +线段树优化建图)
A:直接暴力统计每个字符的次数是否达标即可 #include<bits/stdc.h> using namespace std; const int N 3e510,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII; typedef unsigned long long ULL;const long l…...
eNSP错误40,原因三:windows10自带虚拟化软件Hyper-V
问题描述 Hyper-V软件与VirtualBox不兼容,一旦开启Hyper-V的话eNSP的路由器就会无法开启,显示ERROR 40 原理 大家注意看hypervisor的两种类型: 左边的是开启hypervisor的Type-1,hypervisor在启用的时候,宿主机也相…...
Maven将Jar包打入本地仓库
Maven将Jar包打入本地仓库 Maven将Jar包打入本地仓库嘚吧嘚下载Maven配置Maven新建MAVEN_HOME编辑Path验证Maven配置 Jar包打入Maven仓库 Maven将Jar包打入本地仓库 嘚吧嘚 最近项目用到一个Jar包,不能从远程仓库拉取,只有一个Jar包,所以需…...
如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1
本系列将分成三个部分,您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana,以及如何在 Grafana 上创建一个简单的控制面板。Prometheus 和 Grafana 是 Kubernetes 最受欢迎的两种开源监控工具。学习如何使用 Helm 集成这两个工具&#x…...
Observability:捕获 Elastic Agent 和 Elasticsearch 之间的延迟
在现代 IT 基础设施的动态环境中,高效的数据收集和分析至关重要。 Elastic Agent 是 Elastic Stack 的关键组件,通过促进将数据无缝摄取到 Elasticsearch 中,在此过程中发挥着至关重要的作用。 然而,显着影响此过程整体有效性的关…...
Ubuntu 常用命令之 less 命令用法介绍
📑Linux/Ubuntu 常用命令归类整理 less命令是一个在Unix和Unix-like系统中用于查看文件内容的命令行工具。与more命令相比,less命令提供了更多的功能和灵活性,例如向前和向后滚动查看文件,搜索文本,查看长行等。 les…...
探索Node.js包管理器npm:介绍与使用指南
引言: 在现代软件开发中,包管理器已经成为了不可或缺的工具。它们简化了软件的安装、升级和管理过程,使得开发者能够更加高效地构建项目。而作为Node.js的官方包管理器,npm(Node Package Manager)无疑是最受…...
探讨APP自动化测试工具的重要性
随着移动应用市场的蓬勃发展,企业对于保证其移动应用质量和用户体验的需求日益迫切。在这一背景下,APP自动化测试工具正变得越来越重要,成为企业成功的关键组成部分。本文将探讨APP自动化测试工具对企业的重要性,并为您解析其在提…...
el-date-picker日期时间插件只允许选择年月日小时并做可选择范围限制(精确到小时的范围)
一、首先明确下这个需求 1、要求只能选择年月日时,不要分钟和秒 2、根据后台返回的开始时间和天数设置可选择的开始时间和结束时间范围(包含小时)比如后台返回的开始时间是2023-12-20 13:24:30,天数365天,那么我们需要限制当前可选日期为2023-12-20 14时(不能选小于13:2…...
在MongoDB中使用数组字段和子文档字段进行索引
本文主要介绍在MongoDB使用数组字段和子文档字段进行索引。 目录 MongoDB的高级索引一、索引数组字段二、索引子文档字段 MongoDB的高级索引 MongoDB是一个面向文档的NoSQL数据库,它提供了丰富的索引功能来加快查询性能。除了常规的单字段索引之外,Mong…...
<JavaEE> 网络编程 -- 网络编程和 Socket 套接字
目录 一、网络编程的概念 1)什么是网络编程? 2)网络编程中的基本概念 1> 收发端 2> 请求和响应 3> 客户端和服务端 二、Socket套接字 1)什么是“套接字”? 2)Socket套接字的概念 3&…...
【计算机系统结构实验】实验2 流水线中的冲突实验
2.1 实验目的 加深对计算机流水线基本概念的理解; 理解MIPS结构如何用5段流水线来实现,理解各段的功能和基本操作; 加深对结构冲突/数据冲突/控制冲突的理解; 进一步理解解决数据冲突的方法,掌握如何应用定向技术来…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码:HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志,定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...
