nginx配置多个前端项目实现步骤

下面是详细讲解“nginx配置多个前端项目实现步骤”的完整攻略以及两条示例说明。

1. 准备工作

在进行nginx配置多个前端项目之前，需要先保证以下几个条件：

1. 安装并配置好nginx服务器。
2. 确定每个前端项目的访问路径和端口号。
3. 确保每个前端项目已经部署并通过相应端口可以正常访问。

2. 配置nginx

接下来开始配置nginx，下面为nginx配置文件的示例：

# 全局配置
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

# 设置默认文件类型
include /etc/nginx/mime.types;

# 事件模块配置
events {
    worker_connections  1024;
}

# HTTP模块配置
http {
    # 设置访问日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    # 定义访问日志存放的路径和文件名
    access_log  /var/log/nginx/access.log  main;

    # 设置默认编码
    charset utf-8;

    # 配置http服务器信息
    server {
        listen       80;
        server_name  localhost;

        # 默认首页
        index  index.html index.htm;

        # 配置前端项目1
        location /project1 {
            proxy_pass http://localhost:3000;
        }

        # 配置前端项目2
        location /project2 {
            proxy_pass http://localhost:8080;
        }
    }
}

上述配置文件中包含两个前端项目的配置，其中：

• 前端项目1的访问路径是“/project1”，对应端口号是3000；
• 前端项目2的访问路径是“/project2”，对应端口号是8080。

如果有更多前端项目，可以类比添加在配置文件中的server部分，修改访问路径和端口号即可。

3. 启动nginx

将配置好的nginx文件保存到nginx配置文件夹下的“/etc/nginx/nginx.conf”文件中，然后启动nginx服务即可：

sudo nginx

如无报错信息，nginx服务启动成功。

4. 验证配置

在浏览器地址栏中输入“http://localhost/project1”或“http://localhost/project2”，如果可以正常显示前端项目的页面，说明nginx配置成功。

示例说明

示例一：vue-cli3项目

假设要部署的前端项目是基于vue-cli3的单页面应用，在项目根目录下通过命令行工具运行以下命令：

npm run build

该命令会在“/dist”目录下生成最终部署所需的静态文件。

然后将该生成的静态文件拷贝到nginx的默认静态文件夹“/usr/share/nginx/html/”中，即可通过nginx代理访问到该前端项目。

示例二：React项目

假设要部署的前端项目是基于React的多页面应用，在项目根目录下通过命令行工具运行以下命令：

npm run build

该命令会在“/build”目录下生成最终部署所需的静态文件。

然后将该生成的静态文件拷贝到nginx的默认静态文件夹“/usr/share/nginx/html/”中，并将进入该页面的访问路径配置给nginx即可。

例如：要访问React项目的登录页，其访问路径为“http://localhost/login”，则需要在nginx配置文件中添加以下内容：

location /login {
    root /usr/share/nginx/html/build;
    index index.html;
}

其中，“root”指的是静态文件的存放路径，“index”指的是访问该路径时默认打开的文件。