前后端分离项目部署上线流程-和错误解决

news2025/2/25 9:42:21

需求:就是想把自己写的前后端项目传上去不再是只有本地可以访问,其他人也可以访问我这个项目,以此记录免得后面搞忘了,文章很长,也很细,我自己上线碰到的错误也会发一下,建议看完哦

1.首先买个服务器

因为我有学生特权,这边我就直接白嫖了一个月的免费服务器,一共可以领到7个月的,但是要考试= =,考过了才给你大无语啦,点下面连接就可以,阿里云腾讯云啥的都可以本质上一样

阿里云学生特权免费领7个月云服务器

学生服务器的话地区只有俩个,我这边选择的是河源的,其他的默认选项就行了。

买了之后----------------------点击右上角控制台

再点击左上角选择云服务器就可以看到自己买的服务器了

 如果你不是学生但是第一次购买的话,直接选择右上角产品-云服务器ecs就可以了,如果是个人的话,建议这样选

 

 

 

注意!!!上面配置的账号密码,拿个文本记住了,在xshell配置的时候要用到 

更改的如上图,其他的默认选项就行了,之后点击购买就行了,购买成功后------点击右上角进入控制台---点击左上角选择云服务器ecs,不会的看文章开头的流程图。点开后看到

 点击实例后下图,就可以看到自己买的云服务器了,记住我打码的地方,之后复制公网ip地址,ip后面+(公)就是公网ip

 2-下载Xshell,在xshell中下载宝塔

Xshell官网:NetSarang Homepage CN - NetSarang Websitehttps://www.xshell.com/zh/

 之后随便填下账号密码,这个无所谓不限制的,填了就可以下载了,安装非常简单,什么都不需要配置。注意下下载的路径就行了,打开xshell,步骤如下

 之后点击确认

 3.使用xshell安装宝塔

复制第一个之后直接粘贴到上图#号的后面,右键选择粘贴--回车开始下载------弹出个选项直接选择y------如果还有选择----不动过几秒就会自动下载

宝塔面板下载,免费全能的服务器运维软件 (bt.cn)

 

 宝塔安装完会显示如下,这我复制的啊,我这边外网面板地址是这样,serverip就是你自己的公网ip,直接把这替换就行了:建议把外网内网地址还有用户名密码都复制保存

外网面板地址: http://SERVE:IP:13762/awhe1

 1----------打开外网地址,弹出,直接把上面的username和password的值复制进去就行了,进入后首先先注册个账号并且绑定,这个首页应该会有,先绑定不然之后还要验证什么的

第一次进去先出现弹窗,直接全部下载

4.在宝塔创建数据库,并且绑定本地数据库

注意下图,数据库名用户名密码都设置一样的,好改好配,访问权限设置所有人,设置utf-8格式-最后点击提交完成。

 

点击备份的导入按钮---弹窗-----点击从本地上传------点击选择文件------选择你的.sql数据库文件------点击上传----关闭第一个弹窗-------再点击导入------关闭弹窗-------测试导入成功没

 

 

点击工具,看导入成功没,没导入成功就没文件显示

 

 5.本地数据库连接上宝塔的数据库,进行同步修改操作

连接上了就实现了同步修改了,就这么简单

 

 6.开放端口-宝塔和阿里云都得开不然可能访问不到

宝塔的端口开放---开放8889和3306

 阿里云开放端口-----如下图点击配置规则

 优先级选择1就行了,最高优先级这是

 7.后端项目上传宝塔

点击文件,找到wwwroot下的default文件,点击左边的上传------把打包好的后端文件上传好后-----在列表解压好后就是如下图了

 1-------修改后端的接口地址改为公网的ip地址,我这边是config文件夹下的default.json文件的修改,如下打码的地址都改为公网的ip地址,端口号为8889,database和user,password全改为自己在宝塔上上传的数据库的账号密码

 修改app.js文件监听端口号,改为8889端口号

 8.下载pm2启动项目

菜单栏找到软件商店-搜索下载---下载完成后---打开首页显示switch

 在首页的软件里面找到pm2,打开后添加项目

 启动成功的话如下

 8-使用postman测试接口是否请求成功

协议+公网ip+端口号8889,有响应就是请求成功了

 注意!!!!有些项目请求的时候报错502问题,是后端项目没有写反向代理导致的,csdn搜索写一下就完事了

9.前端项目配置打包上传

1-先在宝塔添加站点

 

 2-站点添加后点击文件-----找到wwwroot下就会发现多了个html文件夹

前端项目的默认请求地址改为公网的ip地址,其他的不变

 使用npm run build开始打包---------

打包生成dist文件-------压缩dist文件-------把压缩好的dist文件上传到http的文件夹下--------解压dist文件-------点击dist文件后把里面的内容全部剪切到html的目录下,如下图

 10.在网站上输入项目地址

地址为:http://公网ip

这边不需要域名了,直接公网ip就能访问到了

文章到此结束,希望对你所有帮助~~~

 

 

 

 

 

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

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

相关文章

U盘连接电脑不显示怎么办?

对于很多Windows 11/10/8/7系统下的用户,U 盘、SD卡或其他移动硬盘未检测到或磁盘管理中不显示,这是一个非常普遍的问题。下面我们就来了解一下出现这种情况的常见原因和解决办法。 为什么U盘没有显示在磁盘管理中? U盘在电脑磁盘管理中不显…

GPT专业应用:生成实习报告

正文共 1070 字,阅读大约需要 4 分钟 大学生必备技巧,您将在4分钟后获得以下超能力: 快速生成实习报告 Beezy评级 :B级 *经过简单的寻找, 大部分人能立刻掌握。主要节省时间。 推荐人 | Kim 编辑者 | Linda ●图片由…

旅游网站设计方案

针对涉旅企业的旅游网站设计,主要要考虑以下几点: 1、考虑网站的业务开展需求,能够有效将衣、食、住、行、游、购、娱融合在一起,满足旅游企业的业务开展需求。 2、网站的设计结构,符合目前的网站开发结构,…

vue3鼠标经过显示按钮

在前端开发中,我们经常需要在页面中添加一些交互效果来提升用户体验。其中一个常见的需求就是鼠标经过某个元素时显示一个按钮,这个按钮可以用于触发一些操作或者显示更多的内容。 在本篇文章中,我将会介绍如何使用 Vue3 实现一个鼠标经过显…

七人拼团系统开发模式常见问题详解

七人拼团模式最近在市场上非常火爆,很多企业商家都在用这个模式。但同时也有很多人对这个模式不太了解,纷纷私信问我,今天就在这里简单说一下七人拼团模式的常见问题。 1、什么是七人拼团? 七人拼团就是用户购买专区礼包后&#…

Redis的数据类型

参考文档:https://www.runoob.com/redis/redis-tutorial.html redis当中一共支持五种数据类型,分别是: string字符串 list列表 set集合 hash表 zset有序集合 1、对字符串string的操作 下表列出了常用的 redis 字符串命令 1 设置值 获取…

报错:To install it, you can run : npm install --save @api/***解决方法

启动项目时,控制台报错,在此记录一下 以下是报错原因: 报错信息如下 To install it, you can run: npm install --save /api/tNursingStaffCirculation Proxy error: Could not proxy request auth/code from localhost:8013 to http://local. See ht…

【下载】【you-get】用电脑下载网页视频

分享一下,此方法是在网络上看到的,但忘了出处。 一、前提 电脑安装了python软件,版本无要求。建议上官网下载软件。记得配置好环境(将pyhton的scripts文件夹的路径加到用户变量里)。 二、方法 1、安装you-get库 &am…

本周精彩!关于 Linux 内核宕机和超融合 Kata 虚拟化容器技术介绍 | 第 77-78 期

本周「龙蜥大讲堂」预告来啦!我们邀请了系统运维 SIG Contributor 刘馨蔚分享《Linux 内核宕机介绍和简单分析思路》,浪潮数据超融合云原生工程师王永超分享《超融合产品中的 Kata Containers》主题演讲,精彩多多,快来扫码入群&am…

linux0.12-9-1-总体功能

[395页] 9-1 总体功能 对硬盘和软盘块设备上数据的读写操作是通过中断程序进行的。内核每次读写的数据量以一个逻辑块(1024字节)为单位,而块设备控制器则是以扇区(512字节)为单位。在处理过程中,使用了读写请求项等待队列来顺序缓冲一次读写多个逻辑块…

测试用例常见的几种设计方法

我们将从以下几种常见的方法入手,讲解测试用例的设计方法: 基于需求的设计方法、等价类、边界值、因果图、正交排列、场景设计法、错误猜测法。 1.测试用例的基本要素 测试用例(Test Case)是为了实施测试而向被测试的系统提供的一…

Android中AIDL的简单使用(Hello world)

AIDL:Android Interface Definition Language(Android接口定义语言) 作用:跨进程通讯。如A应用调用B应用提供的接口 代码实现过程简述: A应用创建aidl接口,并且创建一个Service来实现这个接口&#xff08…

使用阿里云服务器

一、购买阿里云服务器(如果是学生可以免费体验几个月) 二、开启安全组: (开启安全组): 现在这台服务器是专用网络的,那这边的网卡类型的话就内网。如果您是一个经典网络的服务器,那…

_fs.readFileSync is not a function

背景 项目需要通过读取本地一个 xlsx 的可配置文件,并生成 json 格式的文件。 查找资料发现 js 的 xlsx 库可以对 xlsx 文件进行读写和格式转换的操作,也看到了几篇xlsx结合elementui处理文件的博文,于是写下了如下代码,结果报错…

Servlet技术及代码实现

Servlet概念 Servlet是JavaEE规范之一,规范指的就是接口。Servlet是JavaWeb三大组件之一,三大组件分别是:Servlet程序、Filter过滤器、Listener监听器。Servlet是运行在服务器上的一个java小程序,它可以接收客户端发送过来的请求&#xff0c…

5个设计师都在用的在线网页设计编辑器!

在当今的设计领域,选择一款适合的在线网页设计编辑器对于产设研团队来说至关重要。有许多选择可供考虑,其中包括即时设计、Axure RP、Adobe Illustrator、Sketch 和 Figma 等工具。在这些选择中,即时设计是一款备受推荐的在线网页设计编辑器。…

搭建免费的文件自动同步服务器,无公网IP外网远程访问【Syncthing私人云盘】

文章目录 1. 前言2. Syncthing网站搭建2.1 Syncthing下载和安装2.2 Syncthing网页测试2.3 注册安装cpolar内网穿透 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 转发自CSDN远程穿透的文章:Syncthing文件同步 - 免费搭建开源的文件…

计算机网络 | 基于UDP的C/S模型代码实现

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和…

高端NEV社媒阵地火热加温,蔚来最来“电”,极氪最“美丽”

Social Power 核心解读 汽车高端NEV SMI本月新势力领衔 极氪、凯迪拉克美誉度拉满 社媒阵地,已开局,战不休。 本月由数说故事行业首创的SMI社媒心智品牌榜单中,蔚来最来“电”荣登榜首,理想紧随其后,智己已是三哥。 …

BFT 最前线 | 互联网惊现 AI 鬼城,中国电信天翼云将发布预训练大模型,周鸿祎谈“万模大战”

文 | BFT机器人 01 网易CEO 丁磊:人工智能价值已被引导到生产第一线 网易数帆推出 CodeWave 智能开发平台。据了解,网易数帆结合自身产品的定位,面向智能编程垂直领域推出大模型,并接入到智能开发平台中。网易 CEO 丁磊表示&…