nginx 中 MEAN-stack 应用程序的漂亮 url

Question

(*按照一些cmets的建议，我删除了index.ejs，并按照this answer在项目中使用index.html。所以我调整了我的OP *)

我在 Mac 中使用apache 开发了一个 MEAN-stack 应用程序，可以通过以下方式请求 https://localhost:3000/#/home。在使用nginx 服务器的生产环境中，可以通过以下方式请求应用程序 https://www.myapp.io/#/home。由于angular ui-router，在所有情况下都需要片段标识符#。

所以我想在没有#（例如https://www.myapp.io/home、https://localhost:3000/home）的情况下制作漂亮的网址。我做了以下事情：

1) 在app.config(['$stateProvider'... 中添加了$locationProvider.html5Mode(true); $locationProvider.hashPrefix('')。

2) 在index.html 中添加了<base href="/" />

因此，https://localhost:3000/#/home 在浏览器栏中自动更改为 https://localhost:3000/home，https://www.myapp.io/#/home 也是如此。

但是在浏览器中直接输入https://localhost:3000/home或者https://www.myapp.io/home会报错（不知道怎么把error.ejs中之前的<h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>转成error.html，所以我没有更多详情）。

所以现在的目标是让https://localhost:3000/home 和https://www.myapp.io/home 工作。

通过关注this thread，我将以下内容添加到app.js：

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));    
app.all('/*', function(req, res, next) {
    res.sendFile('index.html', { root: __dirname });
});

而在apache的mac中，这里是我的httpd-vhosts.conf，重启后apache， https://localhost:3000/home 仍然返回错误。

<VirtualHost *:443>
    ServerName localhost
    DocumentRoot "/Users/SoftTimur"

    SSLEngine on
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
    SSLCertificateFile /etc/apache2/ssl/localhost.crt
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key

    <Directory "/Users/SoftTimur">
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]

        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

在生产中，这里是 nginx 服务器块。重启nginx后，https://www.myapp.io/home还是返回错误。

server {
    listen 443 ssl;

    server_name myapp.io www.myapp.io;

    ssl_certificate /etc/letsencrypt/live/myapp.io/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.io/privkey.pem;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:EC$
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;

    index index.html;

    root /opt/myapp

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~ /.well-known {
        allow all;
    }

    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          https://127.0.0.1:3000;

        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock$

        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

有人可以帮忙吗？

Answer 1

我认为你应该问自己一个更好的问题是为什么你没有 index.html？也许我已经睡了太久了，但是浏览器并不能真正能够在网页上执行 JavaScript，没有来自 HTML 文档的底层 DOM。

一旦你弄清楚了，你不妨从 GitHub 上的 angular-ui 官方配置建议中获得成功。

Answer 2

删除你添加的 nginx 配置。这可以通过执行以下操作来实现：

有两件事需要做。

1. 配置 $locationProvider

2. 为相对链接设置我们的基础

有关如何完成此操作的更详细说明，请参阅以下链接： Pretty URLs in AngularJS: Removing the #

对于 Angular 1.6，您还需要更改 hashPrefix：

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
}]);

我知道在您的问题中您说您已经完成了这两个步骤，但是如果您完全按照本教程进行操作，它将可以正常工作，因为我已经在我自己的 Angular 应用程序（也通过 nginx 托管）上对此进行了测试。

要使用服务器配置路线，我建议您点击此链接： AngularJS with Pretty URLs: Removing the # in Amazon S3

此外，here 是要进行的实际服务器配置更改。

最后，我认为您对 ejs 的工作方式有误。它需要 HTML 引导（毕竟，您必须有某种 index.html，例如 <script src="https://npmcdn.com/ejs/ejs.min.js"></script>），或在服务器上进行处理（例如，使用 nodejs 和/或朋友）。