当前位置: 首页 > news >正文

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

目录

文章目录

前言

一、第一步:创建文件夹

二、第二步:部署前端项目

三、第三步:打开防火墙


文章目录

  • 前言
  • 第一步:创建文件夹
  • 第二步:部署前端项目
  • 第三步:打开防火墙
  • 总结

前言

在此之前,我们已经创建了宝塔面板账号、拥有了一台服务器。现在,我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问,那么我们应该在宝塔面板上面怎样做呢?


一、第一步:创建文件夹

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&#xff1a;直接暴力统计每个字符的次数是否达标即可 #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不兼容&#xff0c;一旦开启Hyper-V的话eNSP的路由器就会无法开启&#xff0c;显示ERROR 40 原理 大家注意看hypervisor的两种类型&#xff1a; 左边的是开启hypervisor的Type-1&#xff0c;hypervisor在启用的时候&#xff0c;宿主机也相…...

Maven将Jar包打入本地仓库

Maven将Jar包打入本地仓库 Maven将Jar包打入本地仓库嘚吧嘚下载Maven配置Maven新建MAVEN_HOME编辑Path验证Maven配置 Jar包打入Maven仓库 Maven将Jar包打入本地仓库 嘚吧嘚 最近项目用到一个Jar包&#xff0c;不能从远程仓库拉取&#xff0c;只有一个Jar包&#xff0c;所以需…...

如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1

本系列将分成三个部分&#xff0c;您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana&#xff0c;以及如何在 Grafana 上创建一个简单的控制面板。Prometheus 和 Grafana 是 Kubernetes 最受欢迎的两种开源监控工具。学习如何使用 Helm 集成这两个工具&#x…...

Observability:捕获 Elastic Agent 和 Elasticsearch 之间的延迟

在现代 IT 基础设施的动态环境中&#xff0c;高效的数据收集和分析至关重要。 Elastic Agent 是 Elastic Stack 的关键组件&#xff0c;通过促进将数据无缝摄取到 Elasticsearch 中&#xff0c;在此过程中发挥着至关重要的作用。 然而&#xff0c;显着影响此过程整体有效性的关…...

Ubuntu 常用命令之 less 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 less命令是一个在Unix和Unix-like系统中用于查看文件内容的命令行工具。与more命令相比&#xff0c;less命令提供了更多的功能和灵活性&#xff0c;例如向前和向后滚动查看文件&#xff0c;搜索文本&#xff0c;查看长行等。 les…...

探索Node.js包管理器npm:介绍与使用指南

引言&#xff1a; 在现代软件开发中&#xff0c;包管理器已经成为了不可或缺的工具。它们简化了软件的安装、升级和管理过程&#xff0c;使得开发者能够更加高效地构建项目。而作为Node.js的官方包管理器&#xff0c;npm&#xff08;Node Package Manager&#xff09;无疑是最受…...

探讨APP自动化测试工具的重要性

随着移动应用市场的蓬勃发展&#xff0c;企业对于保证其移动应用质量和用户体验的需求日益迫切。在这一背景下&#xff0c;APP自动化测试工具正变得越来越重要&#xff0c;成为企业成功的关键组成部分。本文将探讨APP自动化测试工具对企业的重要性&#xff0c;并为您解析其在提…...

el-date-picker日期时间插件只允许选择年月日小时并做可选择范围限制(精确到小时的范围)

一、首先明确下这个需求 1、要求只能选择年月日时,不要分钟和秒 2、根据后台返回的开始时间和天数设置可选择的开始时间和结束时间范围(包含小时)比如后台返回的开始时间是2023-12-20 13:24:30,天数365天,那么我们需要限制当前可选日期为2023-12-20 14时(不能选小于13:2…...

在MongoDB中使用数组字段和子文档字段进行索引

本文主要介绍在MongoDB使用数组字段和子文档字段进行索引。 目录 MongoDB的高级索引一、索引数组字段二、索引子文档字段 MongoDB的高级索引 MongoDB是一个面向文档的NoSQL数据库&#xff0c;它提供了丰富的索引功能来加快查询性能。除了常规的单字段索引之外&#xff0c;Mong…...

<JavaEE> 网络编程 -- 网络编程和 Socket 套接字

目录 一、网络编程的概念 1&#xff09;什么是网络编程&#xff1f; 2&#xff09;网络编程中的基本概念 1> 收发端 2> 请求和响应 3> 客户端和服务端 二、Socket套接字 1&#xff09;什么是“套接字”&#xff1f; 2&#xff09;Socket套接字的概念 3&…...

【计算机系统结构实验】实验2 流水线中的冲突实验

2.1 实验目的 加深对计算机流水线基本概念的理解&#xff1b; 理解MIPS结构如何用5段流水线来实现&#xff0c;理解各段的功能和基本操作&#xff1b; 加深对结构冲突/数据冲突/控制冲突的理解&#xff1b; 进一步理解解决数据冲突的方法&#xff0c;掌握如何应用定向技术来…...

conda环境下执行conda命令提示无法识别解决方案

1 问题描述 win10环境命令行执行conda命令&#xff0c;报命令无法识别&#xff0c;错误信息如下&#xff1a; PS D:\code\cv> conda activate pt conda : 无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&a…...

链接未来:深入理解链表数据结构(二.c语言实现带头双向循环链表)

上篇文章简述讲解了链表的基本概念并且实现了无头单向不循环链表&#xff1a;链接未来&#xff1a;深入理解链表数据结构&#xff08;一.c语言实现无头单向非循环链表&#xff09;-CSDN博客 那今天接着给大家带来带头双向循环链表的实现&#xff1a; 文章目录 一.项目文件规划…...

论文笔记 | Nature 2023 FunSearch:利用大语言模型在数学科学领域探索新的发现

文章目录 一、前言二、主要内容三、总结🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、前言 科学中有许多难以解决的问题,这些问题难以获得确切解答,但却相对容易进行验证。在数学和计算机科学领域,这类问题被称为 NP 完全优化问题(NP-complete optimization pr…...

JavaScript 对象和 JSON 字符串的区别

JavaScript 对象和 JSON 字符串是两种不同的数据表示形式&#xff0c;它们有以下区别&#xff1a; 语法格式&#xff1a;JavaScript 对象是 JavaScript 语言中的一种数据类型&#xff0c;使用花括号 {} 包裹&#xff0c;属性和值之间使用冒号 : 分隔&#xff0c;并且使用逗号 …...

基于 Flink SQL 和 Paimon 构建流式湖仓新方案

目录 1. 数据分析架构演进 2. Apache Paimon 3. Flink + Paimon 流式湖仓 Consumer 机制 Changelog 生成​编辑...

MFC静态链接+libtiff静态链接提示LNK2005和LNK4098

编译报错 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "private: __thiscall type_info::type_info(class type_info const &)" (??0type_infoAAEABV0Z) 已经在 libcmtd.lib(typinfo.obj) 中定义 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "pr…...

桶装水送水小程序:提升服务质量的利器

随着移动互联网的发展&#xff0c;越来越多的消费者通过手机在线购物和订购商品。如果你是一名桶装水供应商&#xff0c;想要拓展线上业务&#xff0c;那么开发一个桶装水微信小程序将是一个明智的选择。本文将指导你从零开始开发一个桶装水微信小程序&#xff0c;让你轻松完成…...

深度学习在训练什么,什么是模型

深度学习是机器学习的一个分支&#xff0c;它主要通过使用称为神经网络的复杂结构来学习数据的表征。在深度学习中&#xff0c;"训练"和"模型"是两个核心概念。 训练 在深度学习中&#xff0c;"训练"是指用数据来训练一个神经网络。这个过程涉…...

Andorid 使用bp或者mk编译C文件生成so

在Aosp源码里编译C文件生成so 使用mk编译 文件夹列表 CMkDemo/Android.mk CMkDemo/cpp/SerialPort.c CMkDemo/cpp/SerialPort.hAndroid.mk 内容如下 LOCAL_PATH: $(call my-dir) include $(CLEAR_VARS)LOCAL_MODULE_TAGS : optional# All of the source files that we will…...

只更新软件,座椅为何能获得加热功能?——一文读懂OTA

2020年&#xff0c;特斯拉发布过一次OTA更新&#xff0c;车主可以通过这次系统更新获得座椅加热功能。当时&#xff0c;这则新闻震惊了车圈和所有车主&#xff0c;彼时的大家还没有把汽车当作可以“升级”的智能设备。 如今3年过去了&#xff0c;车主对各家车企的OTA升级早已见…...