试试在自己的服务器上部署项目最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了
最近完成了一个全栈小项目,开始接触了服务器部署。步骤还是挺多的,就想着写一写,回顾一遍,忘了直接来看。
一、领取免费服务器
我用的是阿里的服务器,其实也就是一个虚拟机而已。因为是学生,所以目前以这个身份免费。注册一个拿来自己试试还是很有意思的。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;elsewget−Oinstalllts.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