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

Question

我正在设置一个新服务器，我想使用 Nginx 来部署我用 Angular 编写的应用程序。 nginx 配置应该是什么样子的？

这是一个新的 VPS OVH 服务器。我已经在这台服务器上安装了 Nginx，然后当我进入“my-app.com”时，我尝试配置 Nginx 以显示静态 index.html。不幸的是，我总是收到“无法访问此页面”的错误消息。

我正在传递我的配置：

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 并再次启动它。进入浏览器并传递链接“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）可能没有配置到您的网络服务器。 您的域应该有一条指向您的 webserver 的外部 IP 地址的 A 记录，并且您的 webserver 的防火墙应该打开端口 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 应用程序的构建版本。