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

Question

(*正如一些评论建议,我按照这个答案删除index.ejs并使用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)添加$locationProvider.html5Mode(true); $locationProvider.hashPrefix('')在app.config(['$stateProvider'....

2)加入<base href="/" />在index.html

因此,在浏览器栏中https://localhost:3000/#/home自动更改https://localhost:3000/home,同样适用于https://www.myapp.io/#/home.

但是,直接进入https://localhost:3000/home或https://www.myapp.io/home在浏览器中会出现错误(我不知道如何将之前<h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>的内容error.ejs转为error.html,所以我没有更多细节).

所以现在,目标是制造https://localhost:3000/home和https://www.myapp.io/home工作.

通过这个帖子,我添加了以下内容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

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

有两件事需要做。

1. 配置$locationProvider

2. 设置相对链接的基础

有关如何完成此操作的更详细说明，请参阅以下链接： AngularJS 中的漂亮 URL：删除 #

对于 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

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

最后，我认为您对 ejs 工作原理的理解是错误的。它需要 HTML 引导（毕竟，您必须有某种 index.html，带有类似的东西<script src="https://npmcdn.com/ejs/ejs.min.js"></script>），或者在服务器上处理（例如，使用 Nodejs 和/或朋友）。