Deploy a Next JS website within a subdirectory using traefik

I'm having trouble publishing a website in a subfolder (example.com/sitename) using Traefik.

The website is built with Next JS.

When I deploy, all script links in the built site ignore the folder (sitename). For example, a js script named generatedfile.js is accessed by the link example.com/generatedfile.js, when it should be

example.com/sitename/generatedfile.js

My Traefik arguments are:

-l traefik.frontend.rule="Host:example.com; PathPrefixStrip:/sitename" -l traefik.frontend.entryPoints="http, https" -l traefik.frontend.headers.SSLRedirect="true" 

I tried adding a basePath to my next.config.js, but then I can only access the site at the link example.com/sitename/sitename

next.config.js:

module.exports = withFonts({
  basePath: '/sitename'
});

I am using Docker to deploy on AWS.

I have been trying to solve this issue all day, but I am running out of ideas.

Apologies for any mistakes in my English, it is not my first language.

Answer №1

PathPrefixStrip refers to the action of matching the path and removing the matched string before forwarding the request to your application. It is recommended to use PathPrefix instead.

It appears that you are utilizing version 1.x of Traefik. For a clearer understanding of the distinction, you can refer to the documentation provided here:

It is important to note that when dealing with multiple routing rules, Traefik organizes them based on their length in descending order and evaluates them in this sequence to match the incoming request. Essentially, /api will take precedence over /.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

Imagine I have two connected Redux components. The first component is a simple todo loading and display container, with functions passed to connect(): mapStateToProps reads todos from the Redux state, and mapDispatchToProps requests the latest list of todo ...

The initialized Javascript array solely consists of undefined elements, without any of the expected values

I was under the impression that I knew how to declare JavaScript arrays, but in this particular script, I seem to be stuck in an infinite loop of undefined elements within the array. In my code, I define three arrays containing numbers—two with multiple ...

Exports for Express Router Module/Functions

I am currently working on exporting a function and an express router from the same file. The function is intended to verify certificates, while the route is meant to be mounted on my main class for other routes to use. I want to encapsulate both functional ...

Creating a user-friendly HTML form to convert multiple objects into JSON format

Edited content: $.fn.serializeObject = function() { var obj = {}; var arr = this.serializeArray(); $.each(arr, function() { var value = this.value || ''; if (/^\d+$/.test(value)) value = +value; if (obj[this.name] !== u ...

Maximizing the worth of itemtype using jQuery: A guide

My goal is to include an 'itemtype' attribute in the body tag, body.page-body.ng-scope.device-lg(itemscope='', itemtype='') I attempted the following method $('body').add(itemtype='t1'); Unfortunately, ...

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

Issue with rendering Angular templates

Having just embarked on my AngularJS journey, I'm currently facing an issue with this specific code snippet. The following is an excerpt from my JavaScript file named cribsController.js: angular .module('ngCribs') .controller('cribsCo ...

Linking states using AngularJS and jQuery

Imagine I have a scenario with two different states: .state('page1', { url: '/page1', templateUrl: 'pages/templates/page1.html', controller: 'page1' }) .state('page2', { url: '/page2& ...

Tab knockout binding

I have a section in my HTML with 2 tabs. The default tab is working properly, but when I attempt to switch to the other tab, I encounter an error. Can anyone provide assistance in determining why this error occurs? Here is the HTML code: <ul class="na ...

Enhance numerous animated shapes in Three.js

Just dipping my toes into the world of Three.js and tinkering with it for fun. My goal is to create a simple dynamic full-screen background for a webpage. You can check out the example here: function createHexagon( vertices, color ) { var geometry = n ...

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

Are there any NPM packages available for extracting PDF metadata?

Does anyone know of an npm module that allows me to modify the metatags such as Author and Title in PDF files? I am also open to suggestions for any open-license JavaScript library that can do this job. I came across a program called pdftk, which seems s ...

Creating a consolidated System.config mapping for @angular modules using a single .js file

Currently in the process of developing an Angular 2 application, with the specific requirement to consolidate all resulting Javascript files into a single .js file called output.js. Now, the challenge is to incorporate map configuration within System.conf ...

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Currently, I am testing Protractor with a small AngularJS application. Here is the test scenario: describe('Testing Protractor', function() { var draftList; it('should count the number of drafts', function() { browser.get(&ap ...

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

The Angular controller encountered an unexpected token

I have organized all my Angular controllers in one controller file. However, I encountered an issue when trying to print out a specific part of my object array at the end of a controller. Everything worked fine until I added a new controller after the cur ...

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

What is the proper way to define the scope for invoking the Google People API using JavaScript?

I am attempting to display a list of directory people from my Google account. export class People { private auth: Auth.OAuth2Client; private initialized: boolean = false; private accessToken: string; constructor(private readonly clientEmail: strin ...

Fatal error: zoid has obliterated all components inreactjs nextjs

I recently integrated PayPal into my Next.js application. Everything loads fine when I first visit the page, but if I navigate away and then back, it throws an error: unhandled_error: zoid destroyed all components↵ Unfortunately, PayPal does not provid ...

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...