【商城实战(31)】从0到1：商城项目部署全攻略

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。

---

一、选择合适的云服务器及配置服务器环境

在商城项目的部署过程中，选择合适的云服务器并正确配置其环境是至关重要的一步。云服务器作为商城运行的基础设施，其性能、稳定性和安全性直接影响到商城的用户体验和业务运营。

1.1 云服务器的选择

目前市场上主流的云服务器提供商有阿里云、腾讯云等，它们都提供了丰富的产品线和优质的服务，在选择时，我们可以从以下几个方面进行考量：

• 稳定性：云服务器的稳定性是保证商城持续运行的关键。可以通过查看提供商的服务级别协议（SLA），了解其承诺的服务可用性。例如，阿里云和腾讯云通常都能提供高达 99.9% 甚至更高的服务可用性保证，确保商城在大部分时间内都能正常访问。同时，参考其他用户的评价和使用经验，了解其在实际使用中的稳定性表现。一些大型电商平台在选择云服务器时，会进行长时间的测试和评估，以确保云服务器能够满足其高并发、长时间运行的需求。
• 性能：根据商城的业务规模和预计的访问量，选择具备足够计算、存储和网络性能的云服务器。例如，对于一个小型的初创商城，可能选择配置为 2 核 4GB 内存、50GB 硬盘、1Mbps 带宽的云服务器就可以满足初期的业务需求；而对于一个大型的成熟商城，可能需要配置 8 核 16GB 内存、500GB 硬盘、10Mbps 以上带宽的云服务器，以应对大量用户的并发访问和数据存储需求。同时，关注云服务器的 CPU 性能、内存读写速度、磁盘 I/O 性能等指标，这些指标会直接影响商城的响应速度和数据处理能力。
• 价格：综合考虑预算和性能，选择性价比高的云服务器方案。阿里云和腾讯云都提供了多种计费模式，如按量付费、包年包月等。对于业务量不稳定的商城，可以选择按量付费模式，根据实际使用的资源量进行计费，避免资源浪费；对于业务量相对稳定的商城，可以选择包年包月模式，享受一定的价格优惠，降低运营成本。同时，关注云服务器提供商的促销活动和优惠政策，在合适的时机购买云服务器，可以节省一定的费用。
• 服务：良好的售后服务可以在遇到问题时及时得到解决。了解提供商是否提供 7x24 小时的技术支持，以及支持的方式，如电话、邮件、在线客服等。例如，阿里云和腾讯云都提供了专业的技术支持团队，用户可以通过多种方式随时联系到他们，获取技术帮助。同时，查看提供商是否提供丰富的文档和教程，方便用户进行服务器的配置和管理。一些云服务器提供商还提供了在线培训课程和技术社区，用户可以在其中学习和交流经验。

1.2 服务器环境配置步骤

1. 连接服务器：使用 SSH 工具（如 PuTTY、Xshell 等）连接到云服务器。在连接时，需要输入服务器的 IP 地址、用户名和密码。例如，在 PuTTY 中，输入服务器的 IP 地址，选择 SSH 连接方式，点击 “Open”，然后输入用户名和密码，即可成功连接到服务器。
2. 更新系统软件：运行命令更新服务器的操作系统和软件包，以确保系统的安全性和稳定性。对于基于 Debian 或 Ubuntu 的系统，可以使用以下命令：

sudo apt update
sudo apt upgrade

对于基于 Red Hat 或 CentOS 的系统，可以使用以下命令：

sudo yum update

3. 安装必要软件包：根据项目的需求，安装所需的软件包，如 Java 运行环境（JRE）、Node.js、Nginx 等。以安装 Java 运行环境为例，在基于 Debian 或 Ubuntu 的系统中，可以使用以下命令：

sudo apt install default-jre

在基于 Red Hat 或 CentOS 的系统中，可以使用以下命令：

sudo yum install java-1.8.0-openjdk

4. 配置防火墙：设置防火墙规则，允许必要的端口访问，如 Web 服务器的 80 端口（HTTP）、443 端口（HTTPS）等。在基于 Debian 或 Ubuntu 的系统中，可以使用 UFW 工具来配置防火墙，例如，允许 80 端口访问的命令如下：

sudo ufw allow 80/tcp

在基于 Red Hat 或 CentOS 的系统中，可以使用 Firewalld 工具来配置防火墙，例如，允许 80 端口访问的命令如下：

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload

5. 安装和启动所需服务：安装并启动 Nginx 等 Web 服务器，以及其他相关服务。以安装 Nginx 为例，在基于 Debian 或 Ubuntu 的系统中，可以使用以下命令：

sudo apt install nginx
sudo systemctl start nginx
sudo systemctl enable nginx

在基于 Red Hat 或 CentOS 的系统中，可以使用以下命令：

sudo yum install nginx
sudo systemctl start nginx
sudo systemctl enable nginx

通过以上步骤，我们可以选择到合适的云服务器，并完成其环境的基本配置，为后续的项目部署做好准备。

二、移动前端 uniapp 项目打包及部署

2.1 打包步骤讲解

1. 打开项目：在 HBuilderX 中打开我们的 uniapp 商城项目，确保项目代码已经完成且没有错误。这就好比我们要准备一场旅行，首先要确保行李都已经整理好，没有遗漏重要物品。
2. 选择发行选项：点击菜单栏中的 “发行”，然后选择 “网站 - PC Web 或手机 H5”。这一步就像是我们选择旅行的目的地，明确我们要将项目发布到哪个平台。
3. 填写网站信息：在弹出的窗口中，填写网站标题和域名 / 服务器 IP 地址。网站标题是商城展示给用户的名称，要简洁明了且能体现商城的特色；域名或服务器 IP 地址则是商城的访问入口，务必准确填写。例如，如果我们的商城叫 “时尚好物商城”，网站标题就可以填写这个名称，而服务器 IP 地址假设是 192.168.1.100，就如实填写在此处。
4. 配置 manifest.json 的 h5：点击高级按钮，进入到 manifest.json 的 h5 配置里面。这里需要特别注意配置 “运行的基础路径”，这是一个非常关键的步骤。如果此路径配置不正确，极有可能导致页面空白或者静态文件 404 错误。比如，我们的项目部署在服务器的根目录下，运行的基础路径就可以设置为 “./”；如果部署在服务器的某个子目录 “/mall” 下，那么运行的基础路径就需要设置为 “/mall/” 。完成以上操作后，这些配置就成为了项目的参数，可以在 “源码视图” 中查看确认。
5. 点击发行：完成上述所有设置后，点击发行按钮，HBuilderX 会自动进行编译。编译过程就像是工厂生产产品，将我们编写的代码转化为可以在服务器上运行的静态文件。编译完成后，会在控制台提示编译成功，并生成一个包含 static 文件夹和 index.html 的打包文件，这就是我们需要部署到服务器上的文件。

2.2 部署至服务器静态资源目录

1. 选择连接工具：使用工具（如 Xftp）连接服务器。Xftp 是一款常用的文件传输工具，它就像是一座桥梁，帮助我们将本地的文件传输到服务器上。首先，打开 Xftp 软件，新建一个连接，填写服务器的 IP 地址、端口号（默认为 22）、用户名和密码，点击连接。如果连接成功，就会进入到服务器的文件目录。

• 传输文件：在本地找到打包好的文件，将其中的 static 文件夹和 index.html 复制到服务器的静态资源目录下。例如，我们的服务器使用 Nginx 作为 Web 服务器，Nginx 的静态资源目录一般为 “/usr/local/nginx/html”，我们就将文件复制到这个目录下。在复制过程中，要确保文件路径的一致性，即服务器上的文件路径和 manifest.json 中配置的运行基础路径要对应。比如，我们在 manifest.json 中配置的运行基础路径是 “/mall/”，那么在服务器上就要将文件复制到 “/usr/local/nginx/html/mall/” 目录下 ，这样才能保证商城在访问时能够正确加载所有的资源文件。

三、PC 前端 Element plus 项目打包及部署

3.1 打包步骤介绍

在项目根目录下，我们需要执行打包命令来生成用于部署的静态文件。一般情况下，我们使用npm run build:prod命令来进行打包。这个命令会根据项目的配置，将所有的源代码、样式文件、图片等资源进行编译和压缩，最终生成一个优化后的dist文件夹，里面包含了可以直接在服务器上运行的静态文件。

然而，在实际操作过程中，可能会遇到一些问题。比如，有些开发者在打包完成后，打开生成的index.html文件时，发现页面是空白的。这是一个比较常见的问题，其原因往往是由于项目的路径配置不正确。在 Vue 项目中，publicPath这个配置项决定了项目在部署时的基础路径。如果publicPath设置错误，就可能导致页面无法正确加载资源，从而出现空白页的情况。

为了解决这个问题，我们需要修改vue.config.js文件中的publicPath配置。将其修改为’./'，这个相对路径表示项目的资源将从当前目录开始查找。这样修改后，项目在部署时就能够正确地找到并加载所有的资源文件。修改完成后，我们需要重新执行打包命令npm run build:prod，生成新的dist文件夹。

3.2 部署至服务器静态资源目录

1. 连接服务器：我们可以使用 FTP 工具（如 FileZilla、8UFTP 等）来连接服务器。以 8UFTP 为例，打开软件后，点击 “文件” 菜单，选择 “站点管理器”，在弹出的窗口中点击 “新建站点”。然后，填写服务器的相关信息，包括主机名（即服务器的 IP 地址）、端口号（默认为 21，若服务器修改了 FTP 端口，则需填写对应的端口号）、用户名和密码。填写完成后，点击 “连接” 按钮，即可连接到服务器。
2. 创建文件夹：成功连接服务器后，在服务器的根目录下新建一个文件夹，用于存放我们的项目文件。这个文件夹的命名可以根据项目的需求和习惯来确定，比如可以命名为mall_pc，以便与其他项目或文件区分开来。
3. 传输文件：在本地找到打包生成的dist文件夹，将其里面的所有内容全选，然后通过 FTP 工具的文件传输功能，将这些文件拷贝到服务器上新建的文件夹中。在传输过程中，要注意观察传输进度和状态，确保所有文件都成功传输到服务器。
4. 访问项目：文件传输完成后，我们就可以通过服务器的主机 IP 地址来访问项目了。在浏览器的地址栏中输入服务器的 IP 地址，再加上我们在服务器上新建的文件夹名称，例如http://192.168.1.100/mall_pc，即可打开我们的 PC 前端商城页面。如果一切配置正确，页面应该能够正常加载并显示，用户就可以在浏览器中访问和使用我们的商城了。

四、Spring Boot 后端项目打包及部署

4.1 打包成 Jar 包

在 Spring Boot 后端项目的部署流程中，打包成 Jar 包是关键的第一步。首先，我们需要确保项目的pom.xml文件中，packaging标签设置为jar，这是 Spring Boot 项目的默认打包方式，它会将项目及其所有依赖打包成一个可执行的 JAR 文件，方便后续的部署和运行。如下所示：

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!-- 其他配置 -->
    <packaging>jar</packaging>
    <!-- 更多配置 -->
</project>

接着，我们使用 IDEA 的 Maven 面板来执行打包操作。在 IDEA 的右侧找到 Maven 工具窗口，如果没有找到，可以在底部工具栏的右侧找到 “View” 图标，选择 “Tool Windows” -> “Maven” 来打开。在 Maven 工具窗口中，展开我们的项目，找到 “Lifecycle” 节点，这里包含了一系列的 Maven 生命周期命令。我们先双击执行 “clean” 命令，它的作用是清理项目之前编译和打包生成的文件，确保我们得到一个干净的构建环境，避免旧文件对新打包结果产生影响。执行完成后，再双击执行 “package” 命令，“package” 命令会根据项目的配置，将项目源代码进行编译，将所有依赖的库文件打包进来，最终在项目的target目录下生成一个 JAR 包，这个 JAR 包就是我们可以部署到服务器上运行的文件。

4.2 部署至服务器并配置启动参数

当我们成功生成 JAR 包后，接下来就需要将其部署到服务器上。首先，使用 FTP 工具（如 FileZilla、8UFTP 等）将 JAR 包上传到服务器上。以 8UFTP 为例，打开软件，新建一个连接，填写服务器的 IP 地址、端口号（默认为 21，如果服务器修改了 FTP 端口，则需填写对应的端口号）、用户名和密码，点击连接成功后，在本地找到生成的 JAR 包，将其拖拽到服务器指定的目录下，比如/usr/local/mall_backend。

上传完成后，我们需要切换到 JAR 包所在的目录。在服务器的终端中，使用cd命令进入该目录，例如：

cd /usr/local/mall_backend

然后，使用nohup java -jar 项目名.jar &命令来启动项目。其中，nohup命令的作用是不挂断地运行命令，当账户退出或终端关闭时，程序仍然运行；java -jar是运行 JAR 包的命令；项目名.jar需要替换为实际生成的 JAR 包的名称；&符号表示让命令在后台运行，这样我们就可以在不阻塞终端的情况下继续执行其他操作。例如：

nohup java -jar mall_backend-1.0.0.jar &

此外，我们还可以配置一些启动参数来满足不同的需求。比如，配置日志输出路径，将日志输出到指定的文件中，便于后续的日志查看和分析。可以使用-Dlogging.file参数来指定日志文件的路径，例如：

nohup java -Dlogging.file=/usr/local/mall_backend/logs/mall.log -jar mall_backend-1.0.0.jar &

这样，项目运行过程中的日志就会输出到/usr/local/mall_backend/logs/mall.log文件中。还可以配置 JVM 的堆内存大小，通过-Xmx和-Xms参数来设置最大堆内存和初始堆内存。例如，如果我们希望将最大堆内存设置为 1024MB，初始堆内存设置为 512MB，可以使用以下命令：

nohup java -Xmx1024m -Xms512m -jar mall_backend-1.0.0.jar &

通过合理配置这些启动参数，可以优化项目的运行性能和日志管理，确保商城后端项目在服务器上稳定、高效地运行。

五、总结

项目部署是商城开发过程中的关键环节，它直接关系到商城能否稳定、高效地运行。在选择云服务器时，要综合考虑稳定性、性能、价格和服务等因素，为商城的运行提供坚实的基础。在部署前端和后端项目时，每一个步骤都需要谨慎操作，确保配置的准确性。例如，在 uniapp 项目打包时，manifest.json 的 h5 配置中 “运行的基础路径” 一定要设置正确；在 Element plus 项目打包时，要注意vue.config.js文件中publicPath的配置；Spring Boot 后端项目打包成 Jar 包后，部署时的启动参数配置也会影响项目的运行性能和日志管理。

正确的项目部署能够保证商城在面对大量用户访问时，依然能够快速响应，提供良好的用户体验，同时也能确保商城的数据安全和系统稳定。希望读者在阅读本文后，能够按照上述步骤和要点，动手实践，成功完成商城项目的部署，开启电商实战之旅。