手把手带用宝塔面板发布前端项目

最新推荐文章于 2024-06-25 14:31:15 发布
最新推荐文章于 2024-06-25 14:31:15 发布
阅读量590 收藏
点赞数 1
分类专栏： 全栈成长之路 文章标签： 前端 腾讯云 阿里云 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JIANYMN/article/details/127835853
版权

全栈学习之路

  • 噫吁嚱，全栈之难，难于上青天。万丈高楼平地起，学习还得靠自己，同志们，盘一盘
  • 今天让我们从一个服务器开始，发布我们的一个前端项目，他讲让你快速拥有一个自己的服务器和自己专属页面，以及后续的nodejs后台，甚至go，java后台服务

服务器的获取

1.服务器的选择

在这里插入图片描述
在这里插入图片描述

2.服务器上安装宝塔面板

  • 在自己购买好的服务器上，选择center os的镜像
  • 一定设置登录密码，不然进不了管理员root权限（因为一些操作需要管理员权限）
  • 在这里插入图片描述
  • 进入管理员模式 su root,然后输入自己设置的管理员密码,输入完成后，按回车键
  • 在这里插入图片描述
  • 安装宝塔面板
  • 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

宝塔面板搭建前端页面

1.端口放行

  • 当我们安装好宝塔面板时，他会提供一个初始的账号密码
  • 还有访问地址，当然，直接访问的时候，你会遇到很大的问题，打不开。。。
  • 我们需要进入服务器-防火墙-端口放行，宝塔默认是8888端口
  • 在这里插入图片描述

2.登录宝塔后台

  • 利用初始密码登录宝塔后台，后面可以修改账号和密码
  • 需要绑定一个宝塔账号，自己用手机号注册下就行
  • 选择默认安装插件就行，等待下载完成即可
  • 在这里插入图片描述

3.新建一个前端页面

  • 网站—php项目—添加站点，输入服务器域名等操作，即可新建成功页面
  • 关于如何添加不同端口的问题，先随便添加个，然后再添加个你想要添加的，再删除掉无用的
  • 目前就可以访问我们的页面，
  • 我们也可以上传自己的html，需要前端打包工程，yarn build，然后更改站点目录映射到，打包后的文件即可
  • 在这里插入图片描述

预告：搭建node后端接口

  • 下一期我们需要搭建node后台，并创建自己的数据库
  • 这样我们很简单的完成了，前端代码和后端代码的部署，
  • 又像全栈前进一步，加油加油！！！！！
家雀安知鸿鹄志
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
15个前端页面小项目期末作业 - 手把手教程与源码分享
07-16
这是我期末作业的集合，包含了15个精心设计的前端页面小项目。通过这些项目，你将学习如何运用HTML、CSS和JavaScript来打造优雅、响应式和功能丰富的网页。 资源特点： 适合初学者：每个项目都配有详细的教程，...
222-手把手带你写一个MiniSpring
05-06
【标题】"222-手把手带你写一个MiniSpring" 在编程世界中，Spring框架是Java企业级应用开发的基石，它以其依赖注入（Dependency Injection, DI）和面向切面编程（Aspect-Oriented Programming, AOP）的核心特性，...
【项目部署上线】宝塔部署前端&Docker部署后端
Decade_Faiz的博客
02-25 2080
部署前后端分离项目
宝塔部署vue项目
weixin_44953643的博客
03-06 4934
宝塔部署vue项目
宝塔面板部署前端项目
最新发布
Eliaukoyx
06-25 378
使用宝塔面板 6 步完成前端项目的部署
使用宝塔面板部署前端项目到服务器
m0_62476845的博客
12-22 3518
在此之前，我们已经创建了宝塔面板账号、拥有了一台服务器。现在，我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问，那么我们应该在宝塔面板上面怎样做呢？一、第一步：创建文件夹1、打开我们的宝塔面板后，我们会看到左侧有一列目录，点击里面的文件。2、点击在根目录下名叫www的文件夹3、点击里面叫wwwroot的文件夹4、在里面随便创建一个文件夹准备放入我们的前端代码5、放入我们的前端代码二、第二步：部署前端项目1、在宝塔面板的左侧有个叫网站的名字，点进去并选择node项目。
使用宝塔分分钟部署前端项目
水痕
01-24 7121
一、环境的安装 1、域名解析绑定自己服务器的IP地址 2、安装宝塔 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 3、等待几分钟,安装完成后,页面上会出现登录账户和密码(先复制出来,登录进去后可以修改) 4、在阿里云服务器上安全组上将8888端口开放出来 5、使用上面的账号和密码登录到你的宝塔
将web如vue等项目部署到宝塔docker镜像中，以便能在任意浏览器访问
商务合作 / 项目定制开发 / 前端一对一培训、答疑
01-16 1351
有两个地方都需要添加，宝塔防火墙和对应的云服务防火墙，比如我的服务器是腾讯云的，就需要到腾讯云去添加。添加后，会自动启动容器，可以看到启动状态，你也可以手动启动，如果启动失败，可以查看右侧的日志。添加容器的界面中输入容器名字（任意输入都可以），镜像选择刚刚导入的要部署的镜像。如果你用的是docker desktop等工具制作的镜像，并且也已经推送到了。接下来就可以直接使用你的服务器IP+端口来访问部署好的镜像项目了。中，即可以在该网站搜索看到对应的镜像，就可以在。添加端口，容器端口写。
手把手带你创建微服务项目
07-17
手把手带你创建微服务项目 本资源主要介绍了微服务项目的创建，特别是使用 Spring Cloud 和 Nacos 来实现微服务注册和配置中心。下面是从资源中提取的知识点： 1. 微服务架构：微服务架构是一种软件架构风格，它将...
手把手建立前端知识体系，项目学习资源.txt
04-02
零基础上手前端？没项目练手？亲测这个网站从零基础到项目实践，对入门和编程初学者有实实在在的上手和进阶帮助。无论是想系统学习编程，还是想通过项目为导向学习技术，贵在练习，贵在实践——>...
手把手教你用vue-cli搭建vue项目
04-07
手把手教你用vue-cli搭建vue项目
宝塔面板 -- 打包前端项目并部署提升访问速度
m0_62476845的博客
03-30 1013
在前面写到的文章使用宝塔面板部署前端项目中，并没有将前端项目打包而是直接部署，导致网站访问速度非常慢，加载甚至要十几秒。因此，为了提高访问速度，最有效的方法就是先打包好，然后再去部署，从而实现了1秒打开网站。一、打包前端项目1、打开要部署的前端项目一、打包前端项目二、添加PHP项目三、部署打包文件四、开通防火墙五、运行网站如果文章有问题的话也可以私信我或指出来！！！！！
如何把vue项目部署服务器（宝塔面板）上
热门推荐
weixin_43923808的博客
06-01 1万+
如果输入地址还是打不开，那么可能是以下几个原因。点网站，点击设置，选择网站目录。
使用宝塔面板部署前端网站
weixin_43239880的博客
03-13 2500
添加一个38760的入口（为什么是38760而不是其他的，你要看上面宝塔外网ip的端口号，我的是38760，但是你起的可能是其他的，所以你要注意），其他选择如图。这里的ip地址（公）就是待会你要连接的服务器的ip地址，也是别人访问你网站的地址，可以注意一下。然后你就能找到你的服务器了，其中最重要的就是实例（管理你的服务器状态）和安全组（控制可访问该服务器的端口号）在登录到首页的时候，宝塔会提示你安装环境，你就直接选择左边的一键安装就ok了。在浏览器中输入你阿里云对公ip，就能访问到你的网站啦！
宝塔部署项目&跨域
u014632228的博客
02-16 4845
宝塔部署
【宝塔部署PHP项目】含域名访问部署、IP访问部署、数据库、端口号、Nginx等知识
十一月廿七风雨大作
02-11 7251
2、Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。把PHP项目中连接数据库文件的账号密码改成上图中的，然后把项目打包好。1、在阿里云“DNS解析”中添加放行端口时，有时间延迟，要耐心等一会。[2] 阿里云控制台添加防火墙端口号、宝塔面板放行同样端口号。2、如果PHP项目访问不了，试一试把站点根目录下，宝塔生成的。1. 阿里云控制台添加防火墙端口号、宝塔面板放行同样端口号。
CocosCreator配置资源服务器&Nginx开启文件下载
hhhyyds的博客
01-17 1022
Cocos Creator 是一款轻量、高效、免费开源的跨平台游戏引擎，同时也是实时3D内容创作平台，不仅支持2D、3D的游戏开发，同时在HMI、IoT、XR、虚拟人偶等领域，均可提供一套完善的行业解决方案。在使用CocosCreator游戏引擎构建微信小游戏时，由于微信小游戏限制源码
Linux 使用宝塔部署.NET6项目
weixin_46333911的博客
12-11 3783
本文以CentOS为例讲解如何使用宝塔部署.NET项目，其中服务器系统与.NET 版本都是可以更换的，文中有指引链接。
阿里云宝塔发布项目
Filex的博客
02-09 729
阿里云前言一、安装什么？二、宝塔插件安装三、安装哪些插件 前言 本文章是使用 FinalShell 安装相关的一些插件，弯路走了一些，所以这里就只有实用的一些东西了 一、安装什么？ 由于公司是使用的 Mysql + Nginx + Docker + Vue + Java 的一个整体技术栈，但是对于我只知道 Vue 所以安装就各种弯路了 于是就百度了各种安装包分布安装的方式，也请教过相关工作从事朋友的一些安装调试，但是大过年的，谁有空给你弄，能给你点提示去哪里翻资料，以及告诉你错误点的方向，我都觉得已经很
koa2 mysql项目教程_手把手带你koa2搭建项目
05-22
好的，下面是手把手带你搭建koa2 mysql项目的教程。 1. 安装Node.js和npm 首先需要安装Node.js和npm，可以在官网下载安装包进行安装。 2. 初始化项目 在命令行中进入项目目录，运行以下命令初始化项目： ``` npm init ``` 根据提示填写项目信息，完成后会生成package.json文件。 3. 安装koa2和koa-router 运行以下命令安装koa2和koa-router： ``` npm install koa koa-router --save ``` 4. 安装mysql模块 运行以下命令安装mysql模块： ``` npm install mysql --save ``` 5. 创建数据库 在mysql中创建一个名为test的数据库，并创建一个名为users的表，包含id、name、age三个字段。 6. 创建连接池 在项目中创建一个db.js文件，用于创建mysql连接池： ```javascript const mysql = require('mysql'); const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '123456', database: 'test' }); module.exports = pool; ``` 7. 创建路由 在项目中创建一个router.js文件，用于创建koa-router路由： ```javascript const Router = require('koa-router'); const pool = require('./db'); const router = new Router(); router.get('/users', async (ctx) => { const conn = await pool.getConnection(); const [rows] = await conn.query('SELECT * FROM users'); conn.release(); ctx.body = rows; }); module.exports = router; ``` 8. 创建服务器 在项目中创建一个app.js文件，用于创建koa2服务器并引入路由： ```javascript const Koa = require('koa'); const router = require('./router'); const app = new Koa(); app.use(router.routes()); app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 9. 运行项目 在命令行中进入项目目录，运行以下命令启动服务器： ``` node app.js ``` 在浏览器中访问http://localhost:3000/users，可以看到数据库中的用户数据。 至此，一个简单的koa2 mysql项目就搭建完成了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

家雀安知鸿鹄志

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值