全栈开发的收尾，项目部署上阿里云服务器

一拳干爆显示器
1,292 阅读6分钟

申请或购买服务器

服务器是提供计算资源和网络服务的计算机，它们可以是物理的也可以是虚拟的。物理服务器通常部署在数据中心或企业内部，云服务器属于虚拟服务器提供商如阿里云、AWS、Azure、Google Cloud Platform等提供的虚拟服务器服务，用户可以根据需要动态调整资源。除此之外还有存储服务器、应用服务器等等

在阿里云新用户可以申请免费使用一个月，而作为大学生可以多申请六个月

在这申请ECS云服务器学生权益 (aliyun.com)

65409e4da9db285824028dbbe148f3c.png

得到服务器之后，打开阿里云服务器控制台， 云服务器管理控制台 (aliyun.com)

也可以手动查找

0d852ab296c45bd5d664759a357eb74.png

接下来创建一个实例

c489187aab5fda3d2440d00c09fc448.png

记住设置的用户名和密码后面会使用到，查看你的服务器的信息，找到你的服务器IP地址中的公钥

FinalShell创立服务器连接

FinalShell 是一款功能强大的终端管理工具，它支持SSH、Telnet、串口等协议的终端连接，并提供了一些高级功能，比如会话管理、命令存储、脚本执行等。

FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本4.3.10,更新日期2023.12.31 - FinalShell官网 (hostbuf.com)

打开FinalShell新建一个连接，在主机输入服务器公钥和端口，输入服务器的账号密码

77003f56667c9b23b3cc620aa051947.png

宝塔可视化面板

宝塔可视化面板（BT Panel）是一个服务器管理软件，它提供了一个图形化界面来简化服务器的管理任务。相当于是项目的管家，可以监控服务器的资源使用情况，如CPU、内存、磁盘和网络。提供了防火墙规则设置、安全更新等功能，帮助提高服务器的安全性。可以方便地管理服务器上的软件，包括安装、更新、卸载和配置。轻松管理MySQL、MariaDB等数据库，包括创建、删除、导入、导出数据库。

在FinalShell中下载宝塔www.bt.cn/new/index.h…

5ee9f2d17f61464f02347e154258691.png

在控制台粘贴从宝塔粘贴下来的稳定版万能安装脚本（不懂就安装这个万能的） 0f34688e0b0daa2725c3ac01599dc1f.png 安装完成之后会给你面板账户登录信息

d355451bf2ef72db2a2e6a50b5d8f45.png

在云服务器中的安全组为端口放行

a586b7b606ee76cc9895209d3151d20.png

102671d5e72febd05260ad1534fc618.png

记住账号和密码，进入外网面板地址

在面板中的软件商店下载应用来配置环境，下载node.js版本管理器，选择稳定版安装（得先更新版本列表） 5510ea30121d2959b4a72b5c9ca6d27.png 因为我们需要使用到数据库，因此下载一个MySQL（得选择安装8.0以上的版本） d52b4d8628fd81752e5c1810cf228b2.png

上传后端文件

找到源代码文件夹，将后端代码拖上去

3ef67f368b4ea7505c318c641695236.png

添加数据库

将本地数据库导入进去 9dfddfed3391ca787cc438f0e7bb3a8.png 点击数据库的工具查看是否成功导入

在网站添加node项目

  • 找到要运行的后端项目server
  • 设置启动选项为在后端输入的运行代码，即node index.js来运行server文件中的index来启动后端 710f046b902459b4e157633945c314e.png

设置项目端口3000

和之前设置的项目端口一样得将该端口在服务器放行

ef68551d1c1fdf1aafbbe0d2b0c0f51.png

服务监听：每个后端服务（如Web服务器、数据库、应用程序等）都会监听一个或多个端口，以便接收来自客户端的请求。

后端的项目便上传完成了

前端vue.js项目的上传

配置请求地址

后端更改了请求的地址，从原本的http://localhost:3000变成了http://8.130.120.129:3000

在前端代码中配置新的请求地址

axios.defaults.baseURL = "http://8.130.120.129:3000";//配置请求地址

这个时候可以运行前端项目来测试一下后端是否能被请求到

代码打包

前端代码不能像后端代码一样，直接全部上传项目太大了，包含了各种庞大的工具库，于是需要打包上传

bd54f928c7269f2059c251876d33ffd.png

在vite.config.js中注入这串代码

base: '/dist/'

它指定了应用的基础路径，这个路径会被用作资源URL的前缀。你的应用部署在 /dist/ 目录下，那么所有资源（如CSS、JS文件和图片）的URL都应该是相对于 /dist/ 的，而不是网站的根目录,这可以保证资源链接的正确性，避免404错误。

在终端输入npm run build将代码打包，会发现文件夹中出现一个dist文件夹，它就是打包后的所有代码

358128208a16a9032ac3b420ab1b94a.png

在网站添加PHP项目

如果没有反向代理便会提示你，先下载一个Nginx，那就听他的安装一下

添加项目

  • 域名可以自己随便取一个
  • 设置前端在哪一个端口运行我选了80端口，公钥加:端口
  • 根目录设置在你的项目的目录下

2b3173d2d544d3818cf62930ba448e9.png

设置站点，管理域名

  • 在默认文档中的第一行添加dist
  • 在配置文件中添加这么一串代码
location / {  
    # root定义网站根目录 html 即网页所在目录  
    root /www/wwwroot/notebook/dist;  
    # index定义网站的首页 html/index.html  
    index index.html index.htm;  
    # 避免f5刷新后404  
    try_files $uri $uri/ /index.html;  
}

这段配置定义了Web服务器如何处理对根URL（/）的请求：

  • root 指令指定了Web服务器的根目录，即所有静态文件的存放位置。在这个例子中，它是 /www/wwwroot/noteBook/abc.com/dist。
  • index 指令定义了当请求根URL时，Nginx应该尝试查找的首页文件。这里列出了 index.html 和 index.htm。
  • try_files 指令用于定义当请求的文件不存在时，Nginx应该尝试的文件路径。这里它首先尝试直接访问请求的URI，如果找不到，再尝试访问URI结尾添加斜杠的路径，最后尝试访问 index.html 文件。这有助于防止用户刷新页面时出现404错误。

c1feee25b9d2582e63984ea56aca4e4.png

上传前端文件

将我们之前打包好的dist文件夹上传至根目录notebook文件夹当中

开放前端80端口

设置了前端项目端口为80，同样也需要像后端项目端口3000一样，在安全组中放行端口

0afe0164aaa395614bf4049dfe18f89.png

结语

全栈开发项目的收尾阶段通常包括代码审查、测试、部署和维护等步骤。将项目部署到阿里云服务器是一个重要环节。

  • 用到了云服务器，除了阿里云还有AWS、Azure、Google Cloud Platform等也提供虚拟服务器服务
  • 使用到SSH客户端FinalShell一款多功能的服务器管理软件，具备同屏显示、命令自动提示、服务器网络和性能监控等特色功能此外还有一些好用的SSH工具electerm、Termius、MobaXterm、OpenSSH、WindTerm
  • 在FinalShell中安装了宝塔可视化面板，还有一些其他的服务器管理软件可以作为替代品如AMH面板、HestiaCP
avatar
文章
阅读
粉丝