通过以下步骤在 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 服务器块

立即学习“前端免费学习笔记（深入）”；

• 在 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）。
• 如果一切配置正确，您应该看到您的前端项目正在运行。

以上就是nginx怎么部署前端项目的详细内容，更多请关注中国大学网其它相关文章！