“从零开始：阿里云服务器与宝塔面板的完整部署流程”

脑子已丢
471 阅读4分钟

前言

在当今的互联网时代，拥有一个稳定、可靠的服务器环境对于开发和部署应用至关重要。阿里云作为国内领先的云服务平台，提供了高效、灵活的云服务器解决方案。为了帮助大家快速上手并成功部署应用，本文将详细介绍如何在阿里云上申请并配置服务器，使用 FinalShell 连接服务器，安装宝塔面板，以及最终如何部署前后端项目。

无论你是初学者还是有一定经验的开发者，本文都将为你提供从申请服务器到完成项目部署的全流程指导。通过以下步骤，你将掌握在阿里云环境下进行项目配置和管理的基本技能，助力你的开发和运维工作更加高效、顺畅。

请跟随我们一起，逐步完成服务器的设置和项目的部署，让你的应用在阿里云的强大平台上顺利运行。

申请服务器

因为小编是申请的阿里云服务器，所以我们以阿里云服务器为例子

Snipaste_2024-08-01_13-02-32.png

由于小编使用的是阿里云服务器，因此本文将以阿里云为例进行说明。如果你是学生，可以申请免费的ECS资源，具体情况可以根据个人条件决定。

首先，进入阿里云的控制台，选择云服务器 ECS，然后点击创建实例。在这里，我们将跳过详细的创建步骤，直接进入下一步。

使用 FinalShell 连接服务器

  • 下载并安装 FinalShell。

  • 安装完成后，打开 FinalShell，创建一个新的连接：

79C96305-1B0D-43FB-9E6C-F9C91CD4200E.png

Snipaste_2024-08-01_13-14-50.png

在创建连接时，填写连接名称，主机为阿里云服务器的公网IP，密码为创建实例时设置的密码。

在 FinalShell 中安装宝塔面板

在 FinalShell 中，输入以下命令进行宝塔面板的安装（也可以参考宝塔官网的安装指南）：

url=https://download.bt.cn/install/install_lts.sh;if [ -f /usr/bin/curl ];then curl -sSO $url;else wget -O install_lts.sh $url;fi;bash install_lts.sh ed8484bec

安装完成后，你可以通过浏览器访问宝塔面板的外网地址。

第一次访问时，需要在阿里云控制台设置放行规则：

Snipaste_2024-08-01_13-32-38.png

  • 进入阿里云控制台，找到你的ECS实例。
  • 进入“网络与安全” -> “安全组”，选择对应的安全组。
  • 创建或修改规则，手动添加需要放行的端口（根据 FinalShell 的要求）。
  • 授权对象设置为自己的IP地址，不建议公开所有IP以确保安全。

登录宝塔面板，使用 FinalShell 提供的账号和密码进行登录。

在宝塔中导入文件

后端

下载插件

在宝塔面板的软件商店中：

  • Node.js：选择合适的版本安装。安装 Node.js 版本管理器，并在设置中安装一个稳定版。
  • 数据库：选择 MySQL，安装合适的版本。

数据库导入

Snipaste_2024-08-02_19-37-56.png

  • 设置 root 密码。

  • 进入宝塔面板中的数据库管理，添加新的数据库。密码为之前设置的 root 密码。

Snipaste_2024-08-02_19-40-42.png

  • 点击“导入” -> “导入文件”，选择文件后点击“导入”。

  • 验证是否导入成功，可以通过宝塔的工具查看数据

后端文件导入

Snipaste_2024-08-02_19-34-29.png

进入“文件” -> “新建”，进入文件夹后上传后端文件。注意删除 node_modules 文件夹，因为它可能会很大。

启动后端

Snipaste_2024-08-02_19-54-28.png

  • 进入“网站” -> “Node.js 项目” -> “添加 Node 项目”。

  • 填写相关信息，确保项目端口已放行。

  • 修改前端的后端 URL。

到这个时候后端文件就上传成功了

前端

我们先打包文件：

在 vite.config.js 文件中的 defineConfig 配置中，添加 base: '/dist/'，然后执行 npm run build。到此前端项目就打包成功了

Snipaste_2024-08-02_19-53-47.png

现在到宝塔面板：网站 -> PHP 项目 -> 添加站点 -> 域名

域名这里就要注意一下了，先输入一个abc.com(这个可以随便输入，后期要删去)，然后输入公网IP+端口端口记得放开

设置 -> 删除abc.com -> 默认文档 -> 添加一个dist -> 保存

设置 -> 配置文件 -> 找到第11行的位置添加以下代码:

location / {  
# root定义网站根目录 html 即网页所在目录  
root /www/wwwroot/noteBook/abc.com/dist;  
# index定义网站的首页 html/index.html  
index index.html index.htm;  
# 避免f5刷新后404  
try_files $uri $uri/ /index.html;  
}

到这里我们前端后端都部署完成了，希望这篇文章对你有帮助!!!

avatar
文章
阅读
粉丝