返回

剖析 Nginx 部署配置：在同一域名同一端口下配置多个 Vue 项目

前端

Nginx 作为一款高性能的 Web 服务器，因其稳定性和灵活性而备受青睐。当我们需要在同一域名和同一端口下配置多个 Vue 项目时，Nginx 的反向代理功能可以派上用场。本文将为您提供详细的步骤和示例，帮助您轻松实现此配置。

1. 安装 Nginx

首先，您需要在您的服务器上安装 Nginx。具体安装方法因操作系统而异。在 Ubuntu/Debian 系统上，您可以使用以下命令进行安装：

sudo apt-get update
sudo apt-get install nginx

2. 配置 Nginx

安装完成后，您需要对 Nginx 进行配置。打开 Nginx 的配置文件 /etc/nginx/nginx.conf，并添加以下内容：

http {
    server {
        listen 80;
        server_name example.com;

        location /project1 {
            proxy_pass http://localhost:3000;
        }

        location /project2 {
            proxy_pass http://localhost:3001;
        }
    }
}

在上面的配置中，我们将项目 1 映射到端口 3000，项目 2 映射到端口 3001。您可以根据实际情况调整端口号。

3. 启动 Nginx

配置完成后，您可以通过以下命令启动 Nginx：

sudo service nginx start

4. 部署 Vue 项目

现在，您可以将您的 Vue 项目部署到相应的端口上。例如，对于项目 1，您可以使用以下命令进行部署：

cd /path/to/project1
npm run build
npm run serve --port 3000

对于项目 2，您可以使用以下命令进行部署：

cd /path/to/project2
npm run build
npm run serve --port 3001

5. 访问项目

配置完成后，您可以通过在浏览器中访问域名来访问您的项目。例如，如果您将域名设置为 example.com，您可以在浏览器中输入以下地址来访问项目 1：

http://example.com/project1

要访问项目 2，您可以输入以下地址：

http://example.com/project2

6. 结语

通过上述步骤，您就可以在同一域名和同一端口下配置多个 Vue 项目。希望本文能够帮助您轻松实现此配置。如果您有任何问题或建议，欢迎在评论区留言。