Pretty MEAN stack app url in nginx

Question

(* In some comments, it is recommended to delete index.ejsand use index.htmlin the project by following this answer . Therefore, I adjusted my OP *)

I am developing on a Mac with apachea MEAN stack application that you can request https://localhost:3000/#/home. In production with a server, an nginxapplication may be requested   https://www.myapp.io/#/home. The fragment identifier is #required in all cases due angular ui-router.

So, I wanted to make beautiful without url #(for example https://www.myapp.io/home, https://localhost:3000/home). I have done the following:

1) added $locationProvider.html5Mode(true); $locationProvider.hashPrefix('')in app.config(['$stateProvider'....

2) added <base href="/" />toindex.html

As a result, it https://localhost:3000/#/homeautomatically changes to https://localhost:3000/homein the browser bar, similarly to https://www.myapp.io/#/home.

However, a direct entry https://localhost:3000/homeor https://www.myapp.io/homein the browser will cause an error (I don’t know how to turn the previous one <h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>into error.ejsc error.html), so I don’t have more details).

So now you need to do https://localhost:3000/homeand https://www.myapp.io/home.

Following this thread , I added the following to 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 });
});

And in apachefrom mac, here's mine httpd-vhosts.conf, after a restart apache, https://localhost:3000/homeit still returns an error.

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

In production, this is a nginx server block. After restarting, nginx https://www.myapp.io/homestill returns an error.

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";
    }
}

Can anyone help?

Answer 1

, , , - index.html? , , JavaScript - DOM HTML-.

, , angular -ui GitHub.

Answer 2

nginx. , :

2 , .

• $locationProvider

. , : URL- AngularJS: #

Angular 1.6 hashPrefix:

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

, , , , , Angular ( nginx).

, : AngularJS URL: # Amazon S3

, - , .

, , , , ejs. HTML ( , - index.html, - <script src="https://npmcdn.com/ejs/ejs.min.js"></script>), (, / ).