如何正确配置 nginx 以显示 SPA 应用程序？

Question

我正在设置一个新服务器，我想使用 Nginx 部署我用 Angular 编写的应用程序。 nginx 配置应该如何？

这是一个新的 VPS OVH 服务器。我已经在此服务器上安装了 Nginx，然后我尝试将 Nginx 配置为在进入 "my-app.com" 时甚至显示静态 index.html。不幸的是，我总是得到 "This page is unreachable" 的错误。

我正在传递我的配置：

nginx-conf:


user root;
worker_processes 1;

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

events {

}

http {
    include /etc/nginx/mime.types;
    default_type application.octet-stream;

        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;

    sendfile on;
    keepalive_timeout 65;

    include /etc/nginx/conf.d/*.conf;


}

然后我在 conf.d 中得到了 2 个额外的配置：

default.conf

server {
    listen         [::]:80;
    server_name    my-api.com www.my-api.com;
    root           /var/www/html;
    index          index.html;
    try_files $uri  $uri/ /index.html;
}

好的，最后一个：

my-app.com.conf

server {
    listen      [::]:80;
    server_name    my-api.com www.my-api.com;
    root           /var/www/html;
    index          index.html;
    try_files $uri /index.html;
}

在命令之后： nginx -T（测试没问题），然后我通过 "sudo service nginx stop" 命令停止 Nginx 并重新启动它。到达浏览器并传递 link "my-app.com" 后，错误仍然存在。我的预期结果是来到此页面 "my-app.com" 并查看我的申请。即使是静态的 HTML - 这也会告诉我我正在做正确的事情。

感谢您的帮助！

Answer 1

你的两个附加配置是相同的，你只需要其中一个。也就是说，您的 NGINX 配置为 server_name my-api.com www.my-api.com;。这意味着只有当你的请求 URI 是 my-api.com 或 www.my-api.com 时，NGINX 才会尝试使用这个配置。您可以删除 server_name 行，让 NGINX 为它收到的每个 url 使用此配置。（例如 http://{serverip}/ 或 http://{domain}/）

您正在使用的域（我假设它不是字面上的 my-api.com）可能没有配置到您的网络服务器。您的域应该有一个指向您的网络服务器外部 IP 地址的 A 记录，并且您的网络服务器的防火墙应该打开端口 80 TCP。

此外，您有 listen [::]:80;，我不是 100% 确定，但我认为这暗示了 ipv6 的使用。尝试只使用 listen 80;

尝试检查您域的 DNS 设置，确保它们正确并将您的配置更改为

server {
    listen      80;
    root           /var/www/html;
    index          index.html;
    try_files $uri /index.html;
}

请务必在服务器的 /var/www/html 文件夹中包含 Angular 应用程序的构建版本。

如何正确配置 nginx 以显示 SPA 应用程序？

How to configure nginx properly to show SPA application?

nginx

server

devops

nginx-config