使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

news2024/11/17 7:56:24

准备工作

  • 一台云服务器,可以先用免费试用一个月的服务器进行练手;我这里选择的是腾讯云的轻量云服务器;

1、在云服务器上安装宝塔面板

  • 宝塔面板官网地址:https://www.kancloud.cn/chudong/bt2017/424209
1.1 安装Xshell脚本工具,通过这个工具来连接云服务器,进行宝塔面板的安装
  • 根据云服务器的系统选择对应的命令进行安装
  • 安装步骤参考:https://blog.csdn.net/qq_45890970/article/details/123611747
// Centos安装脚本
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

// Ubuntu/Deepin安装脚本
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

// Debian安装脚本
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh
1.2 安装完成之后,命令行中会出现宝塔面板的外网,内网地址和账号密码;记住这个外网地址,一会我们就需要通过这个连接打开可视化的宝塔面板;
  • 如果忘记了也可以通过宝塔面板的bt指令查看默认信息,或者重置账号和密码;
    在这里插入图片描述
1.3 在云服务器后台的控制台中开放宝塔面板8888端口的访问

在这里插入图片描述

1.4 打开宝塔面板的外网地址,输入账号密码进行登录;登录到首页后可一键安装LNMP推荐的软件应用

在这里插入图片描述

2、Node.js+Mysql项目部署:

2.1 先将本地开发环境数据库中的数据导入到云服务器的数据库中;
1)在本地可视化sql工具中进行sql文件导出;
  • 我用的是SQLyog可视化工具,右键点击导出—>以SQL转储文件备份数据库---->得到.sql文件
    在这里插入图片描述
2)选择结构和数据进行sql文件导出

在这里插入图片描述

3)在宝塔面板中选择数据库菜单,点击添加数据库创建数据库名称;点击导入按钮导入刚刚保存的.sql文件

在这里插入图片描述

4) 通过云服务器的phpMyAdmin的数据库可视化工具查看sql数据是否导入成功

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

2.2 将本地的Node.js+Mysql项目文件上传到云服务器上;
1)在本地将项目压缩,然后通过宝塔面板将这个压缩包上传到云服务器的/www/wwwroot/project目录下,并解压,(node_modules文件包也需要上传上来)

在这里插入图片描述

2)在宝塔面板的应用商店中搜索并安装PM2管理器,点击添加项目添加刚刚上传的文件;
  • 我这个PM2应用是已经安装好了的

    在这里插入图片描述
3)服务启动成功后,项目显示的状态;

在这里插入图片描述

4)开放项目的运行端口8081
  • 在宝塔面板的安全菜单中开放服务运行端口8081;
    在这里插入图片描述
  • 在云服务器后台防火墙中开放服务运行端口8081;
    在这里插入图片描述
5)在postman中通过服务器的公网ip地址进行接口API访问,看是否正常;

在这里插入图片描述

3、Vue3-Admin单页面应用项目部署;

1)先在本地进行项目打包,得到一个dist文件
2)将本地的dist文件压缩上传到云服务器的/www/wwwroot/project目录下,并解压得到如下文件

在这里插入图片描述

3) 点击宝塔面板的网站菜单,新建一个php项目的站点;显示运行中就表示项目已启动

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

4)修改该站点的配置文件,使静态资源css,js文件能正常访问
  • 我这里后台项目打包后index.html引用的静态资源前缀如下:
    在这里插入图片描述
  • 对应的nginx配置文件如下:
    在这里插入图片描述
5)在宝塔面板的安全组和云服务器的控制面板中开放运行端口8089;

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

6)在浏览器导航栏中通过云服务器的公网IP访问项目即可

在这里插入图片描述

全文参考博客
  • https://blog.csdn.net/YAO_1212/article/details/128338946
  • https://blog.csdn.net/qq_45890970/article/details/123611747

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

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

相关文章

SpringCloud Aliba-Seata【下】-从入门到学废【8】

目录 1.数据库创建 1.seata_account库下建表 2.seata_order库下建表 3.seata_storage库下建表 4.在每个库下创建回滚日志 2.创建订单模块 2.1建工程 2.2加pom 2.3改yml 2.4file.conf 2.5registry.conf 2.6domain 2.7Dao 2.8Service 2.9controller 2.10confi…

cidp环境启动步骤及注意事项

1、导入项目 选择file——》import…——》Generate——》Exiting Projects into Workspace——》选择要导入的项目 2、添加tomcat 1)点击Serves——》No servers are available. Click this link to create a new server… 2)点击“Add…” 3&…

阿里巴巴Java开发手册(详尽版)

点击下载 阿里巴巴Java开发手册

C++输入输出流

输入/输出流类:iostream---------i input(输入) o output(输出) stream:流 iostream: istream类:输入流类-------------cin:输入流类的对象 ostre…

【java面试】常见问题(超详细)

目录 一、java常见问题JDK和JRE的区别是什么?Java中的String类是可变的还是不可变的?Java中的equals方法和hashCode方法有什么关系?Java中什么是重载【Overloading】?什么是覆盖【Overriding】?它们有什么区别&#xf…

React进阶 - 14(说一说”虚拟DOM“中的”Diff算法“)

本章内容 目录 一、了解 Diff 算法二、key 值的重要性三、为什么不建议使用 index 做 key 值 上一节我们初步了解了 React中的”虚拟 DOM“ ,本节我们来说一说”虚拟DOM“中的”Diff算法“ 一、了解 Diff 算法 在上一篇中,我们有讲到:当 st…

【Computer Networks】FDM、TDM、WDM、CDM

目录 FDM TDM ​WDM CDM FDM TDM WDM CDM

C语言每日一题(47)两数相加II

力扣 445 两数相加II 题目描述 给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外,这两个数字都不会以零开头。 示例1: 输入&#xff…

Java如何对OSS存储引擎的Bucket进行创建【OSS学习】

在前面学会了如何开通OSS,对OSS的一些基本操作,接下来记录一下如何通过Java代码通过SDK对OSS存储引擎里面的Bucket存储空间进行创建。 目录 1、先看看OSS: 2、代码编写: 3、运行效果: 1、先看看OSS: 此…

FPGA高端项目:Xilinx Zynq7020系列FPGA多路视频拼接 工程解决方案 提供6套工程源码和技术支持

目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我已有的FPGA视频拼接叠加融合方案本方案在Xilinx Kintex7 系列FPGA上的应用本方案在Xilinx Artix7 系列FPGA上的应用 3、设计思路框架视频源选择ov5640 i2c配置及采集动态彩条多路视频…

实用工具合集(持续更新...)

一、搜索引擎 1.1、小白盘 网站:https://www.xiaobaipan.com 度盘资源搜索的网站,能够搜索电影、电视剧、小说、音乐等资源(注意:评论区很多小伙伴说小白盘有毒,我用谷歌浏览器搜索过几次并无大碍,请慎用…

JeecgBoot集成TiDB,打造高效可靠的数据存储解决方案

TiDB简介 TiDB是PingCAP公司自主设计、研发的开源分布式关系型数据库,同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 的融合型分布式数据库产品,具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生…

三篇论文联合复现:高比例新能源下考虑需求侧响应和智能软开关的配电网重构程序代码!

适用平台:MatlabYalmipCplex 程序在高比例新能源接入的情况下提出了考虑需求响应(DR)和智能软开关(SOP)的多时段主动配电网重构策略,进一步降低配电系统重构费用,减少弃风率和弃光率&#xff1…

CSS自适应分辨率 postcss-pxtorem(适用于 Vite)

前言 此篇是基于 Vite Vu3 项目的 CSS 自适应分辨率! 如果想知道基于 Webpack Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem(适用于 Webpack)》 项目对应的主要插件版本如下: "vite": "^4…

PMU || PMIC(Power management IC):电源管理集成电路

1、PMU(电源管理芯片)是一种高度集成化的电源管理方案,可以简单理解为集成多路的LDO和DC-DC,以及相应的检测和控制电路,其核心结构通常是PWM控制器和MOSFET。高集成度的PMU器件可以有效减小电路板占用面积和器件数量&a…

谷歌出品!读懂 QUIC 协议:更快、更高效的通信协议

QUIC结构 QUIC协议模型如下图所示,其放弃了TCP∕IP网络中使用五元组(源IP,源端口,目的IP,目的端口,协议标识符)来唯一标识一条连接的方式,而使用一个全局唯一的随机生成的ID(即Connection ID) 来标识一条连接。 由低向上分层讨论QUIC协议: •UDP层:在U…

心理学大纲

简介 psychology,“psyche”(ψυχή):意为"soul"(灵魂),即对我们灵魂的研究 我的学习的目的 了解人精神世界的模型,人格的形成],作为观察分析他人内心的理论指导,便于我实践了解情绪的机理,…

vue---打印本地当前时间Demo

<template><view class"content" tap"getCurrentTime()">打印时间</view> </template><script>export default {data() {return {title: Hello}},onLoad() {},methods: {getCurrentTime() {//获取当前时间并打印var _this …

【驱动】TI AM437x(内核调试-07):devmem2直接读写内存、寄存器,devkmem读取内核变量

1、/dev/mem 和 /dev/kmem 1)/dev/mem: 物理内存的全镜像。可以用来访问物理内存 2)/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。kernel部分内存用户空间本不可访问。但是因为所有进程共享内核空间的页表。所以内核虚拟地址对应物理地址是确定的…

紫光展锐T760_芯片性能介绍_展锐T760安卓核心板定制

展锐T760核心板是一款基于国产5G芯片的智能模块&#xff0c;采用紫光展锐T760制程工艺为台积电6nm工艺&#xff0c;支持工艺具有出色的能效表现。其采用主流的44架构的八核设计&#xff0c;包括4颗2.2GHz A76核心和4颗A55核心设计&#xff0c;内存单元板载可达8GB Ram256GB ROM…