首页 前端知识 如何从零到有将vue nodejs项目部署至云服务器,以及所遇到的问题及解决方法(宝塔面板,全步骤,全网最细,最全,最实用)

如何从零到有将vue nodejs项目部署至云服务器,以及所遇到的问题及解决方法(宝塔面板,全步骤,全网最细,最全,最实用)

2024-05-05 22:05:06 前端知识 前端哥 235 338 我要收藏

如何从零到有将vue+nodejs项目部署至云服务器(全步骤,全网最细,最全,最实用)

  • 前言(什么是项目部署至云服务器)
  • 步骤一、云服务器的购买和域名的申请
    • 云服务器购买
    • 域名申请
  • 步骤二、宝塔面板初步配置
  • 步骤三、数据库部署
    • 云服务器上的数据库
    • 一些操作云服务器上数据库遇到的问题
  • 步骤四、php项目部署
  • 步骤五、node项目部署
  • 问题一、云服务器上的数据库执行sql文件时会报错,而本地不会。
    • 第一、在sql文件中的注释不规范。
    • 第二、在sql文件中表名未区分大小写
  • 问题二、前后台分离或两个及其以上的php项目部署云服务器的方法

前言(什么是项目部署至云服务器)

        相信大家都有在自己的电脑上或多或少地编写自己的项目并在本地运行,并配置环境变量以及下载需求软件(如mysql,nodejs等),但在自己电脑上使用node或pm开启本地服务器后,node方式当关闭命令行时以及pm方式当电脑关机时,本地服务器将会关闭,所以就有了云服务器这个概念。
        在大家能在自己的电脑上运行项目之后,那么项目部署至云服务器也很好理解了。简单来说,就是在远程的一台可以一直不关机的电脑上,也就是云服务器,将自己写好的项目放上去,并且进行项目的配置,使自己的项目能在这台电脑上跑起来。这就是个人对项目部署的一点理解

步骤一、云服务器的购买和域名的申请

        云服务器的可购买的厂商十分多,常见的有腾讯云,阿里云,百度云等,在这里以腾讯云为大家进行演示。

云服务器购买

首先来到腾讯云官网首页,进行登录
在这里插入图片描述
在搜索框输入云服务器搜索
在这里插入图片描述
在这里我们选择轻量应用服务器即可,然后进入产品选购页面
在这里插入图片描述
我们选择默认的应用模板和宝塔面板即可,以及后续的地域和套餐规格和时长,初始使用云服务器可以去到首页进行免费体验一个月或三个月,每个厂商的体验时长不太一样,或实时观看首页有无折扣优惠。
在这里插入图片描述
选购完成后我们直接进入产品控制台,直接搜索轻量应用服务器即可
在这里插入图片描述
进入产品控制台,首页下滑可看到购买的云服务器。
在这里插入图片描述

域名申请

同样在任何一个厂商即可申请自己想要的域名,在首页的搜索框输入域名,在这里点击立即申请。
在这里插入图片描述
在这里挑选域名后在右侧立即购买即可。
在这里插入图片描述
不购买域名也可通过访问云服务器本身的IP地址进行访问,在购买域名后还需进行备案以及域名解析,最后还要和IP地址进行绑定,在这不再过多赘述。

步骤二、宝塔面板初步配置

在产品控制台点击刚刚购买的云服务器或者点击更多查看详情,可以查看更多信息。
在这里插入图片描述
点击防火墙,点击添加规则,将宝塔面板的8888端口添加放行,否则无法访问宝塔面板。
在这里插入图片描述
做完上面步骤后,进入应用管理界面,先复制下方命令,然后点击下方的登录。
在这里插入图片描述
此时进入此页面登录后粘贴刚刚复制的命令后回车,得到宝塔面板地址以及用户名和密码。
在这里插入图片描述
在这里插入图片描述
将外网面板地址复制后在浏览器打开,输入提供的用户名和密码后可进入宝塔面板。
在这里插入图片描述

进入宝塔面板首页,选择LNMP推荐一键安装软件套装即可。
在这里插入图片描述
等待下载完成
在这里插入图片描述

在左侧点击软件商店即可查看下载的软件
在这里插入图片描述

步骤三、数据库部署

云服务器上的数据库

在数据库部署前,先回到产品控制台防火墙一处,在其将数据库常用端口3306进行添加。
在这里插入图片描述
来到宝塔面板,点击左侧数据库,来到数据库界面,在这里我使用的是MySQL,可根据自己使用的数据库更改。
在这里插入图片描述
点击添加数据库,在这里输入数据库名称和用户名密码,自定义即可。
在这里插入图片描述
可以通过点击导入,导入自己的sql文件
在这里插入图片描述
或者点击管理,进入phpMyAdmin,输入刚刚设立的用户密码,即可进入操作
在这里插入图片描述

一些操作云服务器上数据库遇到的问题

因为云服务器上的sql文件使用的是严格模式,使用当初在部署sql文件时遇到了很多问题。
详情请看下方的问题一

步骤四、php项目部署

首先,将自己本地的项目打包,例如:我在所需打包的目录文件的命令行输入npm run build,即可生成一个dist文件夹,将这个文件夹压缩,后续部署时再用。在这里插入图片描述
点击左侧网站,点击添加站点。
在这里插入图片描述
在此页面在域名处,输入自己的申请的域名,若没有也没关系,可以像我一样随便写一个,后续还要更改的。
在这里插入图片描述
此时可以看到以及新建立了一个叫做ddd.com的战点,以及他的根目录地址,我们先点击设置。
在这里插入图片描述

来到此处,这是刚刚绑定的域名,我们在上方填入自己云服务器的IP地址,点击添加,再将原本那个随便输入的域名删除即可,如下图。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

此时点击根目录,会自动跳到文件夹目录下,在此我们以及可以通过刚刚绑定的IP地址进行访问到了,在浏览器输入IP地址即可。
在这里插入图片描述

接下来我们全选将所有文件删除,再点击左上角的上传,将我们刚刚打包压缩的dist文件上传

在这里插入图片描述
将其解压,来到dist文件夹下,全选复制,在上一级文件夹下粘贴,然后将dist文件夹和dist压缩包都删除即可
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后剩下的文件,此时再访问ip地址即可访问到自己的项目了
在这里插入图片描述

步骤五、node项目部署

在部署完前端项目后,此时会发现无法读取接口数据,这是因为后端接口还未部署。现在就开始进入我们的node项目部署部分。
首先来到自己用nodejs编写的接口文件夹下,将除了node——modules以外的所有项目打包压缩。在这里插入图片描述
来到宝塔面板网站下的php项目,点击根目录。
在这里插入图片描述
回到上一级文件夹,在此路径下新建一个文件夹用来存放node项目(因为之前添加php项目时已经自动生成了一个文件夹),打开新建的文件夹。
在这里插入图片描述
在此文件夹下上传刚刚压缩的node文件,将其解压然后删除压缩包。
在这里插入图片描述
在这里插入图片描述
回到宝塔面板网站下的node项目页面,点击添加node项目在这里插入图片描述
在项目目录下选择刚刚建立的文件夹

在这里插入图片描述
选择自定义启动命令,选择index.js,然后输入项目自己的端口号。
在这里插入图片描述
点击设置,来到域名管理,输入自己的IP地址加上端口号。
在这里插入图片描述
来到安全系统防火墙,点击添加端口规则,将刚刚输入的项目端口号添加。
在这里插入图片描述
来到腾讯云产品控制台防火墙,点击添加规则,将3000端口放行。
在这里插入图片描述
然后再访问项目IP地址,此时就可访问项目并且有数据渲染了

问题一、云服务器上的数据库执行sql文件时会报错,而本地不会。

这大概率是因为云服务器上的sql文件是严格模式,所以当初在部署sql文件时遇到了很多问题。

第一、在sql文件中的注释不规范。

在sql文件中,我写的是------很多杠来进行注释,但是实际上标准的注释语法是-- ,在自己的电脑上没有开启严格模式,会自动修正,所以部署时就遇到了很多问题。

------- 这是我没有严格模式的注释方法
---- 看在这里sql代码块里也可以成功注释
----- 但是实际部署服务器上会报错
-- 以下是正确的注释方式,两条“--”后跟一个空格
-- 这样才不会把报错
-- 在云服务上运行sql文件时,里的注释必须严格按照“-- ”的注释方法来编写

第二、在sql文件中表名未区分大小写

同样是因为严格模式引起的,在我建表时,我使用的都是大驼峰命名的方法,例如:TeamWork,但在向表插入数据时就写成了teamwork。
这样的编写方式在本地运行是不报错的,但是在云服务器上的数据库会报错,会在插入数据时找不到表。
后我找到的解决方法最基本的是全部表名都统一大小写。但是如果像我一样sql文件过大,无法一个个修改,那该怎么办呢?
我们可以来到宝塔面板的软件商店的已安装中。在这里插入图片描述
点击设置,来到修改配置页面。
在这里插入图片描述
在这里的27行我加入了一行代码,他的作用是让mysql不区分大小写。

lower_case_table_names=1

加入这行代码后,即可运行表名未区分大小写的sql文件了

问题二、前后台分离或两个及其以上的php项目部署云服务器的方法

之前在部署前后台项目时,遇到了问题,不知道怎么同时部署两个php项目,后面发现,只需要在添加php项目时,给其的IP地址配置端口,就像我给其配置了81端口,之前的项目默认是80端口。然后在安全里添加端口规则,将81端口添加。
最后回到腾讯云产品控制台的防火墙,将81端口放行即可。然后访问不同的项目通过IP地址加端口的方式就可访问,不输端口默认访问80端口。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7043.html
标签
服务器
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!