想要使用 Nginx 部署多个前端项目,可行吗?

简介: 想要使用 Nginx 部署多个前端项目,可行吗?

在实际的 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 加密协议来加密网站的通信。

目录
相关文章
|
4天前
|
监控 物联网 应用服务中间件
流媒体方案之Nginx——实现物联网视频监控项目
流媒体方案之Nginx——实现物联网视频监控项目
流媒体方案之Nginx——实现物联网视频监控项目
|
4天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
66 0
|
2天前
|
前端开发 JavaScript 安全
Mac部署Jenkins(保姆级教程!)_前端jenkins自动部署 mac
Mac部署Jenkins(保姆级教程!)_前端jenkins自动部署 mac
|
2天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
|
2天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
|
2天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
|
2天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
|
4天前
|
应用服务中间件 nginx
如何在树莓派部署Nginx并实现无公网ip远程访问内网制作的web网站
如何在树莓派部署Nginx并实现无公网ip远程访问内网制作的web网站
12 0
|
4天前
|
监控 前端开发 jenkins
Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程
【4月更文挑战第29天】本文探讨了Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程。前端持续部署涉及代码提交、构建、测试和部署四个步骤。实现过程中需配置代码仓库、构建、测试和部署任务,安装相关插件并确保环境一致性。注意事项包括代码质量控制、环境一致性、监控预警和安全管理。通过Jenkins,可提升前端开发效率和质量,但需不断学习以应对技术发展。
|
4天前
|
运维 Serverless 应用服务中间件
Serverless 应用引擎产品使用之在阿里云Serverless中函数计算FC nginx 部署上去之后放置静态页面如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
265 0