通过以下步骤在 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。 - 将以下内容粘贴到该文件中：
<code>server {
listen 80;
server_name my-app.com;
root /var/www/my-app/public;
}</code>- 将
my-app.com替换为您的实际域名。 - 如果您的项目使用非标准端口（例如 3000），请更新
listen指令。
步骤 4：启用服务器块
- 运行以下命令启用新创建的服务器块：
<code>sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx/sites-enabled/my-app.conf</code>
步骤 5：重新加载 Nginx
- 运行以下命令重新加载 Nginx 以应用更改：
<code>sudo systemctl reload nginx</code>
步骤 6：访问您的项目
- 在浏览器中导航到您的域名（例如
my-app.com）。 - 如果一切配置正确，您应该看到您的前端项目正在运行。
