用 Nginx 部署两个前端（超简单，三步！）
在现代web开发中，常常需要同时部署多个前端项目，比如一个主应用和一个管理后台，这时就可以使用Nginx来进行反向代理和负载均衡。本文将为你介绍如何在Nginx中部署两个前端应用，只需三步即可完成。
步骤一：安装 Nginx
首先，我们需要在服务器上安装 Nginx。在大多数 Linux 发行版上，你可以使用包管理器安装 Nginx。以下是在 Ubuntu/Debian 系统上的安装命令：
sudo apt update
sudo apt install nginx
在 CentOS 系统上，你可以使用以下命令：
sudo yum install nginx
安装完成后，我们可以使用以下命令启动 Nginx：
sudo systemctl start nginx
并设置 Nginx 为开机自启：
sudo systemctl enable nginx
步骤二：准备前端项目
假设我们有两个前端项目，分别是 "app1" 和 "app2"，它们的构建文件都在本地的 /var/www/html/app1 和 /var/www/html/app2 目录下。我们需要确保这两个项目已经通过构建工具（如 npm run build）打包好，并输出到相应的目录中。
项目目录结构示例如下：
/var/www/html/
├── app1/
│ ├── index.html
│ ├── css/
│ └── js/
└── app2/
├── index.html
├── css/
└── js/
步骤三：配置 Nginx
接下来，我们需要配置 Nginx，以便能够正确路由到这两个前端应用。打开 Nginx 的配置文件，通常是 /etc/nginx/sites-available/default 或者 /etc/nginx/nginx.conf，使用你喜欢的文本编辑器进行编辑：
sudo nano /etc/nginx/sites-available/default
在配置文件中，添加以下内容：
server {
listen 80; # 监听80端口
server_name your_domain.com; # 替换成你的域名
location /app1 {
alias /var/www/html/app1; # 指定app1的目录
try_files $uri $uri/ /app1/index.html; # 如果找不到文件，返回index.html
}
location /app2 {
alias /var/www/html/app2; # 指定app2的目录
try_files $uri $uri/ /app2/index.html; # 如果找不到文件，返回index.html
}
}
请注意，server_name 需要替换为你实际使用的域名或IP地址。同时，alias 指令指向了各应用的文件目录。
配置完成后，保存并退出编辑器。接下来，测试 Nginx 配置是否有语法错误：
sudo nginx -t
如果没有错误，重启 Nginx 使配置生效：
sudo systemctl restart nginx
总结
到此为止，你已经成功地使用 Nginx 同时部署了两个前端应用。在浏览器中输入 http://your_domain.com/app1 和 http://your_domain.com/app2，你应该能够访问到对应的应用。
这就是用 Nginx 部署多个前端项目的简单流程！通过这三步，你可以轻松地将多个前端项目部署到同一个服务器，极大地方便了资源的管理和使用。希望对你的项目有所帮助！
