宝塔面板 -- 打包前端项目并部署提升访问速度

文章目录

  • 前言
  • 一、打包前端项目
  • 二、添加PHP项目
  • 三、部署打包文件
  • 四、开通防火墙
  • 五、运行网站
  • 总结


前言

在前面写到的文章使用宝塔面板部署前端项目中,并没有将前端项目打包而是直接部署,导致网站访问速度非常慢,加载甚至要十几秒。因此,为了提高访问速度,最有效的方法就是先打包好,然后再去部署,从而实现了1秒打开网站。


一、打包前端项目

1、打开要部署的前端项目

2、打开命令窗口,输入:npm run build  回车运行打包前端

3、复制已经打包好的文件dist,放在一个的文件夹里面准备之后使用

我就复制在d盘里面并且压缩


 

二、添加PHP项目

1、点击宝塔面板左侧的网站

2、点击PHP项目里面的添加站点

3、成功后点击设置

4、将刚才的域名删除即可


三、部署打包文件

1、点击左侧文件选项,找到刚才域名文件夹

2、在域名文件夹里面上传刚才打包好的dist文件,双击解压

3、点击左侧网站,点击刚才的设置,找到默认文档

4、添加dist则网站部署完成


四、开通防火墙

1、点击左侧安全,添加项目端口

2、添加端口、点击提交

3、打开服务器安全组,也同样添加端口


五、运行网站

1、公网ip+端口访问

2、访问成功!


总结

打包部署分为以下几步:

  • 一、打包前端项目

  • 二、添加PHP项目

  • 三、部署打包文件

  • 四、开通防火墙

  • 五、运行网站

如果这篇文章对你有帮助的话请点点赞和收藏。如果文章有问题的话也可以私信我或指出来!!!

感谢你的支持!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天五分钟深度学习:神经网络和深度学习有什么样的关系?

本文重点 神经网络是一种模拟人脑神经元连接方式的计算模型,通过大量神经元之间的连接和权重调整,实现对输入数据的处理和分析。而深度学习则是神经网络的一种特殊形式,它通过构建深层次的神经网络结构,实现对复杂数据的深度学习…

校园公共广播网络音频解码终端SV-7102

SV-7102T网络播放解码器 一、描述18123651365微信 SV-7102T是一款壁挂式网络播放终端,具有10/100M以太网接口,配置一路本地扩音线路输入和一路线路输出,可将内部音源输出到外接功放,还提供两路立体声15W的功率输出,可…

ios 之 netty版本swiftNio(socket创建)

SwiftNio 简介 用于高性能协议服务器和客户端的事件驱动、无阻塞的网络应用程序框架。 SwiftNIO是一个跨平台异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端。 这就像Netty,但是为Swift写的。 Xcode引入swiftNio 在实…

【LeetCode热题100】46. 全排列(回溯)

一.题目要求 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 二.题目难度 中等 三.输入样例 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,…

C++ //练习 11.2 分别给出最适合使用list、vector、deque、map以及set的例子。

C Primer(第5版) 练习 11.2 练习 11.2 分别给出最适合使用list、vector、deque、map以及set的例子。 环境:Linux Ubuntu(云服务器) 工具:vim 解释 list的元素是有序的,可以重复的&#xff0…

如何生成一个指定长度的空数组?

简便写法:使用constructor构造函数进行创建,第一个空数组 [ ] 表示创建一个空数组,然后调用 constructor 属性并传入参数指定数组长度。 [].constructor(17)可用于遍历,例如使用ngFor进行单纯的遍历,参数为遍历次数。

电商API分享:如何批量获取商品详情页数据(属性图价格sku视频评论)

电商API(应用程序接口)通常提供了丰富的数据获取功能,使开发者能够方便地获取商品详情页的各种数据,包括商品属性、图片、价格、SKU(库存量单位)、视频以及评论等。以下是一个基本的步骤指南,用…

SSM框架学习——SqlSession以及Spring与MyBatis整合

SqlSession以及Spring与MyBatis整合 准备所需要的JAR包 要实现MyBatis与Spring的整合,很明显需要这两个框架的JAR包,但是只是使用这两个框架中所提供的JAR包是不够的,还需要配合其他包使用: Spring的JAR包MyBatis的JAR包Spring…

【信贷后台管理系统之axios的二次封装(四)】

文章目录 一、axios的二次封装二、配置后端接口地址三、登录接口api联调四、贷款申请接口api编写联调 一、axios的二次封装 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。 src下新建utils,新建request.js用来封装axios 控…

VS2022+QT5.9 提示找不到qtmain.lib

从VS2013QT的项目切换到VS2022QT5.9,安装好mscv2017版本的QT5.9,项目工程选择QT project settings中的Qt Installation为mscv2017版本的QT5.9,编译好提示找不到qtmain.lib 解决思路: 提示找到xxxx.lib,第一库目录不对…

中科驭数超低时延网络解决方案入选2023年度金融信创优秀解决方案

近日,由中国人民银行领导、中国金融电子化集团有限公司牵头组建的金融信创生态实验室发布「2023年度第三期金融信创优秀解决方案」,中科驭数超低时延网络解决方案从众多方案中脱颖而出,成功入选,代表了该方案的技术创新和金融实践…

共享社会经济路径(SSP1-5)中国及分省人口预估数据库_v2

v1数据集: 在共享社会经济路径(SSPs)全球框架下,根据本地化人口和经济参数,采用人口-发展-环境(PDE)模型,构建2020-2100年SSPs人口格点数据;采用柯布-道格拉斯&#xff…

网络钓鱼升级 Darcula如何窃取用户信息

近日,网络安全领域一种名为 “Darcula” 的网络钓鱼欺诈(PhaaS)悄然兴起。这种新型钓鱼方式不同于传统的手段,它巧妙地利用了谷歌信息和 iMessage 的富通信服务(RCS),成为了网络犯罪分子的新手段…

基于springboot实现学生读书笔记共享平台系统项目【项目源码+论文说明】

基于springboot实现学生读书笔记共享平台系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个读书笔记共享平台 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者…

Linux——软件管理

目录 Linux应用程序基础 应用程序与系统命令的关系 典型应用程序的目录结构 常见的软件包封装类型 RPM包管理机制 使用YUM源 使用YUM源管理软件的步骤 1、配置YUM源配置文件 2、清空YUM源缓存 yum clean all 3、安装软件 yum install httpd 基本 …

C 练习实例96 - 字符串中的子串

题目&#xff1a;计算字符串中出现字串的次数 例如&#xff1a;789123456123121230中有3个“123”字符串字串 代码&#xff1a; #include <stdio.h> #include <string.h> int func(char *str1, char *str2) {int count 0;int i,j;for( i 0; i < strlen(str…

【随笔】Git -- 高级命令(下篇)(八)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

机器学习 - 提高模型 (代码)

如果模型出现了 underfitting 问题&#xff0c;就得提高模型了。 Model improvement techniqueWhat does it do?Add more layersEach layer potentially increases the learning capabilities of the model with each layer being able to learn some kind of new pattern in…

ConcurrentHashMap线程安全机制

put源码&#xff1a; public V put(K key, V value) {return putVal(key, value, false); }/** Implementation for put and putIfAbsent */ final V putVal(K key, V value, boolean onlyIfAbsent) {if (key null || value null) throw new NullPointerException();int has…

【BlossomConfig】SpringBoot如何实现配置的管控?

文章目录 ConfigurableEnvironment事件监听完成配置变更使用Scope来管控Bean的生命周期什么是配置中心&#xff1f;以及如何实现一个配置中心&#xff1f;SpringBoot如何实现配置的管控&#xff1f;SpringCloud项目是如何对bootstrap配置文件进行加载的&#xff1f;Nacos是如何…