我想在同一台服务器上使用nginx部署独立的后端和前端应用程序。

Question

我已经使用Node.js创建了一个RESTful API，并计划使用Sapper/Svelte进行前端开发。最终，这些将是独立的应用程序，我希望它们在同一台服务器上以相同的域名运行。这种方法可行吗？如果可以，请问我的Nginx配置文件应该是什么样子的？如果不行，那应该采取什么方法？

这是我的API配置文件：

server {
    server_name domain.name;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
   .
   .
   .
}

- Kerem

---

为什么要两个应用程序？Sapper已经在做后端和前端了。你可以把你的API放在Sapper服务器路由中。或者你可以将你的Sapper应用程序导出为静态文件，以去除服务器部分。 - three

我已经创建了API。我一开始考虑的是Vue或React作为前端，但后来我发现了Sapper。这将是我使用Svelte的第一个项目。我喜欢服务器端呈现SEO目的的想法。因此，不会进行静态导出。也许我可以尝试合并它。但是，配置Nginx双应用程序单域名会很困难吗？ - Kerem

不，你可以使用nginx完成这个。只是感觉有点臃肿。你可以使用纯svelte网站或者使用不同的静态路由器来处理前端。也许你可以加入Discord聊天以获取更多详情。 - three

Answer 1

遵循最佳实践，您的API将位于BASE/api/下。

这将使您能够在同一服务器上托管后端和前端。

server {
    server_name domain.name;

    location /api/ {    # Backend
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        ...
    }

    location / {    # Frontend
        root        /app-path/;
        index       index.html;
        try_files   $uri $uri/ /index.html;

        ...
    }
}

- J-Jacques M

---

为什么前端的位置块没有任何代理相关的配置？ - Ulvi

Answer 2

既然这是您的第一个svelte / sapper项目，我建议将事情分开处理，并尝试使用svelte来访问nginx上的API。解耦并将{{link1：svelte on gitlab pages}}或其他您喜欢的CI目标发布。

如果到了使用sapper的时候，我的建议仍然是一样的-让它外部访问您的API，以保持您的项目清晰和独立。您已经在前端之前启动了API-不用担心，但我不明白为什么您的配置需要知道前端将在哪里运行，或者为什么将它们交织在一起会有益。

- bmike

Answer 3

你可以为你的后端创建一个子域名 api.example.com，并在 nginx 中创建另一个服务器配置。你只需要为你的 API （后端）编写代理设置，因为你的前端将在端口 80 上运行。

- Ermiyas Tsegabu