Home > Enterprise >  Apache rewriting rule with VueJs served by .netCore 6
Apache rewriting rule with VueJs served by .netCore 6

Time:08-04

I'am really struggling on this one.

I have a VueJs App that is served by a kestrel server on a C# App :

            PhysicalFileProvider fileProvider = new PhysicalFileProvider(
              Path.Combine(builderEnv.ContentRootPath, "FrontEnd"));

            DefaultFilesOptions defoptions = new DefaultFilesOptions();
            defoptions.DefaultFileNames.Clear();
            defoptions.FileProvider = fileProvider;
            defoptions.DefaultFileNames.Add("index.html");
            app.UseDefaultFiles();

            var spaStaticFileOptions = new StaticFileOptions
            {
                FileProvider = fileProvider,
                RequestPath = "/app"
            };

            app.UseStaticFiles(spaStaticFileOptions);

Now the frontend is served to the user with a reverse proxy configured on apache. Here's the conf :

 <VirtualHost *:443>
        ProxyPreserveHost On
        SSLProxyEngine on
        SSLProxyVerify none
        SSLProxyCheckPeerCN off
        SSLProxyCheckPeerName off
        SSLProxyCheckPeerExpire off
        ProxyPass / https://127.0.0.1:5001/
        ProxyPassReverse / https://127.0.0.1:5001/
        ErrorLog /var/log/apache2/error.log
        CustomLog /var/log/apache2/access.log common
        SSLEngine on
        SSLCertificateFile /usr/local/share/ca-certificates/app.crt
        SSLCertificateKeyFile /usr/local/share/ca-certificates/app.key
</VirtualHost>

So basically when i go on the domain.net/app/ it goes like that : Apache reverse proxy => Localhost kestrel => VueJs Static Files.

Everything is working fine. VueJs is targeted and the history mode kicks in.

BUT, when i refresh the current page, let's say domain.net/app/create-node i have a 404 because apache rightfully is not aware of this page.

So i tried to put in place a rewriting engine. I need only the sub-url "app" to be rewrited. But i cannot make it work.

It should goes like that : domain.net/app/create-node => domain.net/app/index.html So that vueJs router can take the lead.

My last try (after one hundred ones) was this :

<Directory "/app">
        RewriteEngine On
        RewriteCond %{REQUEST_URI} !app/index\.html$
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^app/.*$ app/index.html [L]
</Directory>

Can someone please help me !

CodePudding user response:

Ok so i've found an other way to do this. I didn't use apache's rewrite engine. I used spa static file services in .net.

Here it is if someone needs it In Startup.cs :

ConfigureServices method

 services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "FrontEnd";
 });

Configure method

 if (env.IsProduction())
        {
            app.Map(new PathString("/app"), client =>
            {
                var clientPath = Path.Combine(Directory.GetCurrentDirectory(), "./FrontEnd");
                StaticFileOptions clientAppDist = new StaticFileOptions()
                {
                    FileProvider = new PhysicalFileProvider(clientPath)
                };


                client.UseSpaStaticFiles(clientAppDist);

                client.UseSpa(spa =>
                {
                    spa.Options.DefaultPageStaticFileOptions = clientAppDist;
                });
            });
        }

Right before

 app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
  • Related