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

Question

(* 正如一些评论所推荐的，我删除了 index.ejs 并通过关注 this answer 在项目中使用 index.html 。所以我调整了我的 OP *)

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

所以我想在没有 # 的情况下制作漂亮的 url (例如， 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工作。

通过关注 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？也许我睡得太久了，但是如果没有来自 HTML 文档的底层 DOM，浏览器并不能真正在网页上自行执行 JavaScript。

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