通过以下步骤在 Nginx 中部署前端项目：创建项目结构，将代码分为 public 和 src 目录。编译源代码（可选）。配置 Nginx 服务器块，指定根目录和域名。启用服务器块。重新加载 Nginx。访问已部署的项目。
如何在 Nginx 中部署前端项目
步骤 1：创建项目结构
- 创建一个新目录作为项目根目录，例如
/var/www/my-app。 - 在根目录下创建两个子目录：
public和src。 - 将所有前端代码（HTML、CSS、JavaScript）放在
public目录中。 - 将源代码（例如 Sass 或 TypeScript）放在
src目录中。
步骤 2：编译项目（可选）
- 如果您使用 Sass 或 TypeScript 等预处理器，需要编译它们以生成用于部署的优化代码。
- 运行必要的命令来编译源代码并将其放置在
public目录中。
步骤 3：配置 Nginx 服务器块
立即学习“前端免费学习笔记（深入）”；
mallcloud商城
下载
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
- 在 Nginx 配置文件中创建一个新服务器块，例如
/etc/nginx/sites-available/my-app.conf。 - 将以下内容粘贴到该文件中：
server {
listen 80;
server_name my-app.com;
root /var/www/my-app/public;
}- 将
my-app.com替换为您的实际域名。 - 如果您的项目使用非标准端口（例如 3000），请更新
listen指令。
步骤 4：启用服务器块
- 运行以下命令启用新创建的服务器块：
sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx/sites-enabled/my-app.conf
步骤 5：重新加载 Nginx
- 运行以下命令重新加载 Nginx 以应用更改：
sudo systemctl reload nginx
步骤 6：访问您的项目
- 在浏览器中导航到您的域名（例如
my-app.com）。 - 如果一切配置正确，您应该看到您的前端项目正在运行。
