在实际的 web 开发中，经常需要同时部署多个前端项目。Nginx 是一款高性能的 Web 服务器，同时也是一款反向代理服务器，可以通过配置多个虚拟主机来部署多个前端项目。本文将介绍如何使用 Nginx 部署多个前端项目。
安装 Nginx
首先，在 Ubuntu 系统上安装 Nginx，可以通过以下命令进行安装：
sudo apt update
sudo apt install nginx
安装完成后，可以使用以下命令启动 Nginx：
sudo systemctl start nginx
配置 Nginx
创建虚拟主机
在 Nginx 中，每个网站被称为一个虚拟主机。要创建一个虚拟主机，需要在 Nginx 的配置文件中添加一个新的 server 块。默认情况下，Nginx 的配置文件存储在 /etc/nginx 目录下。
打开 Nginx 的默认配置文件 /etc/nginx/nginx.conf，找到 http 块，在其中添加一个 server 块，用于配置一个虚拟主机。
示例代码如下：
http {
# ...
server {
listen 80;
server_name mywebapp.com;
root /var/www/mywebapp;
index index.html;
location /api/ {
proxy_pass http://127.0.0.1:8000/;
}
}
# ...
}
在上述示例代码中，我们创建了一个名为 mywebapp.com 的虚拟主机。其中：
- listen 用于指定监听的端口号；
- server_name 用于指定虚拟主机的域名或 IP 地址；
- root 指定虚拟主机的根目录；
- index 是虚拟主机默认访问的文件；
- location 用于配置反向代理。
配置反向代理
在实际开发中，很多前端项目都需要与后端 API 进行交互。为了避免跨域问题，可以使用 Nginx 进行反向代理。
在上面的示例代码中，我们使用了 location /api/ {} 块来配置反向代理。其中，proxy_pass 指定要转发的 URL 地址。
配置多个虚拟主机
如果需要部署多个前端项目，可以在 Nginx 配置文件中添加多个 server 块，每个 server 块对应一个虚拟主机。例如：
http {
# ...
server {
listen 80;
server_name mywebapp1.com;
root /var/www/mywebapp1;
index index.html;
location /api/ {
proxy_pass http://127.0.0.1:8000/;
}
}
server {
listen 80;
server_name mywebapp2.com;
root /var/www/mywebapp2;
index index.html;
location /api/ {
proxy_pass http://127.0.0.1:8001/;
}
}
# ...
}
在上述示例代码中，我们创建了两个虚拟主机：mywebapp1.com 和 mywebapp2.com。每个虚拟主机都有一个不同的 root 目录和反向代理配置。
重载 Nginx 配置
完成配置后，需要使用以下命令重载 Nginx 配置：
sudo nginx -s reload
文件权限
在部署前端项目时，需要注意文件权限问题。Nginx 进程运行于 www-data 用户下，因此需要将前端项目的目录和文件设置为 www-data 用户可读取和执行。
可以使用以下命令修改文件权限：
chown -R www-data:www-data /var/www/mywebapp
chmod -R 755 /var/www/mywebapp
HTTPS 配置
在实际生产环境中，为了保证数据的安全性，我们通常会使用 HTTPS 加密协议来加密网站的通信。下面是一个简单的设置 SSL/TLS 的 Nginx 配置示例：
server {
listen 80;
server_name mywebapp.com;
# 自动跳转到 HTTPS
return 301 https://{
mathJaxContainer[0]}request_uri;
}
server {
listen 443 ssl;
server_name mywebapp.com;
# SSL/TLS 相关配置
ssl on;
ssl_certificate /path/to/certfile.crt;
ssl_certificate_key /path/to/keyfile.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
root /var/www/mywebapp;
index index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:8000/;
}
}
在上述示例代码中，我们创建了一个名为 mywebapp.com 的虚拟主机，并使用了 SSL/TLS 加密协议。其中，ssl_certificate 和 ssl_certificate_key 分别指定 SSL 证书和私钥的路径。
HTTP 跳转至 HTTPS
为了让用户访问时自动跳转至 HTTPS，可以使用以下代码：
server {
listen 80;
server_name mywebapp.com;
# 自动跳转到 HTTPS
return 301 https://{
mathJaxContainer[1]}request_uri;
}
这段代码会将所有 HTTP 请求自动重定向到 HTTPS。
总结
本文介绍了如何使用 Nginx 部署多个前端项目和配置 HTTPS。要部署多个前端项目，需要在 Nginx 的配置文件中创建多个虚拟主机，并为每个虚拟主机指定根目录和反向代理配置。为了保证数据的安全性，我们还可以使用 HTTPS 加密协议来加密网站的通信。
