likes
comments
collection
share

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

作者站长头像
站长
· 阅读数 22

最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了直接来看。

一、领取免费服务器

我用的是阿里的服务器,其实也就是一个虚拟机而已。因为是学生,所以目前以这个身份免费。注册一个拿来自己试试还是很有意思的。developer.aliyun.com/plan/studen… 注册账号后,完成学校身份的认证就可以领取了,直接点会有让你认证的提示,一步步完成就行。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

因为我已经选好了服务器,所以该选择服务器就记录不了了。这里就写一下更换操作系统时选择的配置吧。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

都是第一个,直接选就行了。像可视区域这些随便选都行,本国速度大差不差,我记得我选的是华南。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了 选好后,应该就可以来到云服务器管理控制台 ecs.console.aliyun.com/server ,我们用这个平台管理选择的服务器。在左边的导航栏中找到 实例 就可以看到自己选的服务器的一些配置情况了。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

点击 实例 ID / 名称 ,来到实例详情页面,把密码重置一下,不然大家可以滥用你的服务器,这是十分重要的,虽说这个服务器是作为学生免费领的。

到这里,我们就安安稳稳地买好了这个服务器。

二、连接服务器

接下来就要考虑将我们自己的项目跑在这个服务器上面,也就是如何将代码上传到远程的服务器。第一个问题是,我们该怎么才能连到那个服务器呢?虽然我们知道 IP 地址,但是我们需要远程操作它。

最省事的办法就是使用自己电脑上的终端,输入一些花里胡哨、乱七八糟的指令。但是我应该是记不住的,所以找到一个专门为我们连接服务器的工具 FinalShell ,我是直接在联想商城一键下载的,简单快捷。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

下载好后就开始新建连接了。名称可以随便取,也只是表示这一次的连接。主机要到 云服务器管理平台 ,就是上面展示过的那个页面,拿到公网 IP 地址。端口内定 22 ,因为操作系统装在这个机器上,默认跑的就是 22 端口。用户名填的 root ,密码是刚刚设置的那个,填好后直接确定就行。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

确定后,就可以看到这样的一个页面。接着我们使用一个可视化部署的面板工具,百度搜 宝塔。 这个面板就像是软件管家,可以这样去理解。

url=download.bt.cn/install/ins… [ -f /usr/bin/curl ];then curl -sSO url;elsewget−Oinstalllts.shurl;else wget -O install_lts.sh url;elsewgetOinstalllts.shurl;fi;bash install_lts.sh ed8484bec

把上面的内容直接全部复制下来,放到上面那个页面中的输入框中,敲下回车,再敲个 y ,等着就行了。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

下完后,就一定可以看到这个,记录账户登录信息。外网面板地址就是服务公网 IP 地址,下载的宝塔就跑在了这个地址的 19310 端口。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了 也可以敲下 bt 进行一些操作,自己慢慢试试。

接着就根据指示去到云服务器管理平台在安全组放行这个端口。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

点击安全组 ID / 名称 ,手动添加, 端口范围的目的那一处填的就是宝塔中的那个端口号,其他的和我下面已经允许放行的一样写就行。

接着我们打开宝塔中的外网面板地址,会显示 “您的连接不是私密连接”。我们点击左下方的高级按钮,继续前往,就可以看到这个页面了。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

账号和密码就在宝塔给的 面板账户登录信息 中直接复制过来就好了。登录完成后,会跳出一个页面让你登录宝塔,没有账号的话注册一下。完成这些后,我们就来到了外网面板地址显示的页面了,在这里开始部署。

三、项目部署

后端部分

既然是让项目跑在服务器上,那所需要的环境是必不可少的。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

点击左侧的 软件商店 ,搜索 node ,安装 Node.js版本管理器 2.5 。一秒完成,点击设置。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

要更新版本列表,显示最新的版本。我下载的是 20.16.0 这个版本,直接安装。因为是全栈项目,所以接着搜索 mysql ,选择第三个,因为免费,也就是 MySQL 8.0.24 。注意安装的版本,尽量 8 以上的版本,太老的许多mysql语句都不兼容,更高的版本随便选。

接着上传代码文件。 试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

文件 中点击新建文件夹,我这里就叫server,然后在里面上传自己的代码,压缩一下直接拉进来就行,上传前记得把依赖文件删掉,不然浪费时间,这些依赖服务器中的node都会再次下载回来的。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

接着就是添加数据库了。这个 数据库名 要和自己的代码中的数据库名一致,它是不能大写的,会强行写成小写。密码会给一个默认密码,我们可以在 添加数据库 旁边点击 root密码 修改一下密码,也和自己代码中一样。这些数据库名和密码都和本地的数据库没关系了,这是服务器中下载的数据库。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

这里的 导入 可以直接导入sql文件,使得数据库中有一些数据。可以在右边的 工具 中看得到。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

接着又来到 网站 中,添加Node项目 ,项目目录就是到刚刚创建的文件夹,项目名称随意,启动选项一般都是所示那个。注意项目端口,要放行端口,允许经过防火墙。完成后点击确定,这时候显示修改中,代表正在下载所需要的依赖。

完成后,可以自己先试试本地能不能访问到后端的接口,能的话,那么后端的部分就做好了。

前端部分

现在开始前端的部分。在前端项目文件夹的配置文件 vite.config.js 中加入以下代码:

export default defineConfig({
  base: '/dist/', 
  // 其他不变...
})

我们使用指令 npm run build 来打包这个项目,然后就可以看到项目中多了一个 dist 文件夹,里面是所有的 vue 代码,这个 dist 就是我们要上传的文件。

来到宝塔面板,点击 网站 中的 PHP项目 ,也可以用其他,比如 HTML项目,只是 PHP 更简便。跳出框中显示“未安装运行环境”,直接点击 安装Nginx ,这是反向代理,就是多写几行代码,帮我们的前端后端请求做好个代理。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

添加站点 ,传统项目,这个域名是不需要的,但还是要先写一下,要求 .com 后缀。第二行写公网地址加随意一个合法端口,注意这行写完不能换行,不然就死活添加不了。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

点击 网站名 ,将刚刚的 abc.com 删掉。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

保存后还是这个页面,点击 默认文档 ,在第一行加上 dist ,是我们一开始创建的文件名。

试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了

还是这个页面,来到 配置文件 中,在第十行代码后加入以上内容,注意自己的路径。

接着去到 文件 中,就可以看到 notebook 文件夹下多了一个 abc.com 文件夹。如果没有,那就在那手动新建。然后在 abc.com 中上传文件夹,把 dist 文件夹上传。

完成后,也需要去到 云服务管理控制台 ,把端口放开。你在添加站点中域名第二行填的是什么端口,那就去放开什么端口,像我写的 80 端口是默认已经放开了的。

到此为止,我们项目应该就部署成功了。整个过程都不要钱,有空可以自己试试。步骤有错,欢迎JY们指出。

转载自:https://juejin.cn/post/7397622646630907913
评论
请登录