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

Posted 2023-02-27

【中文标题】nginx 中 MEAN-stack 应用程序的漂亮 url

【英文标题】：Pretty url of a MEAN-stack application in nginx

【发布时间】：2017-09-08 21:56:18

【问题描述】：

(*按照一些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";
    

有人可以帮忙吗？

【参考方案1】：

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

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

【讨论】：

我有index.ejs 而不是index.html。但我不确定如何修改 GitHub 上 angular-ui 的建议...

index.ejs 中有什么？也许没有 index.html 是根本原因？

这是ejs。当我创建这个应用程序时，我遵循了一些使用index.ejs 的示例（例如this one）。我才发现我并没有真正使用ejs的功能，所以我将其更改为index.html，看看会发生什么，我明天测试并更新......

@SoftTimur，我认为你错过了ejs 的工作原理。我很确定它需要HTML引导（例如，毕竟，你必须有某种index.html，类似于<script src="https://npmcdn.com/ejs/ejs.min.js"></script>），或者在服务器上进行处理（例如，使用nodejs和/或朋友）。

【参考方案2】：

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

有两件事需要做。

配置 $locationProvider

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

有关如何完成此操作的更详细说明，请参阅以下链接： 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 和/或朋友）。

【讨论】：

我的步骤 1) 和 2) 是您的链接所描述的，它们还不够。

您使用的是哪个版本的 Angular？

您使用的是哪个链接 (Angular 1.6)？

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js。这两个步骤从 url 中删除了#（例如，将https://.../#/new 更改为https://.../new），但它不处理新的url（例如，https://.../new）。这就是为什么在 php 服务器中，他们还在这两个步骤之上使用 .htaccess。

我在我的测试应用程序中使用 Angular 1.5。我使用 Angular-CLI，所以我不提供实际链接，只是在配置文件中列出我想要的版本。请参阅服务器配置路由的更新答案，这应该可以完成您想要的