There is a stack that uses Next.js as the main dependency. Each page is an independent application. An index page uses www.domain.com/_next/*.js so its base path configured as a / root. Also, another application has a base path same as the homepage but a little difference which is using a query string in the URL.
if the URL is www.domain.com/ then it is a homepage, if the URL is www.domain.com?key=value it means it is a different page and the request will be redirected to the associated application by the Nginx and Load Balancers. So, the problem is:
the main page is serving its statics under the www.domain.com/_next/*.js
the page that parses query strings is serving its statics under the same location same as MainPage www.domain.com/_next/*.js
These applications have different statics created by different pipelines also there is a cache mechanism. Is there a way to solve that conflict just by making some configuration in Next.js?
You can use the basePath settings introduced in Next.js 9.5 (https://nextjs.org/docs/api-reference/next.config.js/basepath)
But your .next/ folder would be changed, something like yourdomain.com/yourbasepath/_next
If you want to change only the .next/ folder location assetPrefix can be used. I think you can take a look at assetPrefix https://github.com/vercel/next.js/issues/5602#issuecomment-673382891
Or we can setup the custom server, for example the Express and custom the base asset path via Express (https://expressjs.com/en/starter/static-files.html)
app.use('/static', express.static('public'))
P/s: The asker choose the assetPrefix solution
Related
I am having trouble serving my static files on Elastic Beanstalk using NodeJS deployed on Linux 2. My local environment works, but my deployment is unable to serve the static files located in a top-level static folder called 'public'.
My configuration is as follows:
option_settings:
aws:elasticbeanstalk:environment:proxy:staticfiles:
/images: public/images
/javascripts: public/javascripts
/stylesheets: public/stylesheets
I am certain that the configuration is processed correctly because I can view the results of the static file configuration within AWS UI. When I navigate to the home directory of my site (using http:// protocol), the HTML page is loaded, but the CSS and JS under the public directory is not. The error I get is as follows:
GET https://<domain name>/stylesheets/layout.css net::ERR_CONNECTION_TIMED_OUT
Note that the https:// protocol is used. From my understanding, the reason my local environment works is that my application serves the static files with the correct protocol. Here are my questions:
Why are my static files being served with protocol https:// when I request my home directory using http://?
I don't want to serve my static files through the application to reduce the number of requests to my application, noted here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/command-options-general.html#command-options-general-environmentproxystaticfiles. Is there anything actually wrong with the configuration?
Issue was resolved. I am using Helmet JS for Content Security Policy (CSP), and it has a directive for converting insecure requests to secure ones: upgrade-insecure-requests. Make sure to remove that in the development phase for a site that is relying on http:// for content. Best practice is to use https:// when possible.
I am new to nodejs/express/coding in general so my apologies if this isn't extremely clear. I am doing a code challenge for a job.
I have most of the project done. Part of the challenge is to have it uploaded to a bucket on S3. I created a bucket, that is all done. My problem is there needs to be a index.html in the root folder of the bucket (I think). All of my html pages (three of them) sit inside of the views directory. When I try to put my index.html in the root folder on cloud9, it says index.html can't be found in the views directory (obviously, since I moved it out). Can I set the views directory to be in the root folder?
Is there a way with express/nodeJS to have all of the files in the root folder? Or is there a way to keep my views folder as it is in Cloud9 and have everything run like it does from there, except in S3? I must be missing something. I am completely lost as to how to host this app on S3. Posting on here was my last resort! Thanks for any help.
Let's make order. Amazon S3 is a cloud file storage service. It can also be used to host static assets of a website.
From what I understand, you are building something with express, using the view directory, used in general for templates and so, I suppose, you are rendering your html pages by your express application. This is called server side rendering and is fully incompatible with amazon s3 that can only serve files.
Now, how can you resolve the problem (considering that you are obliged to use s3)? It depends.
If you are using express only to render your application and to serve static assets (so no API), you should consider some refactoring: in such case, you are basically building a web application without APIs. You don't need express. Maybe you are searching for a client side framework like Vue.js, React or Angular. To be more general, you should render your application client side.
If your express server is also acting as api server, you should divide your project. From one side you have your express api server, deployed somewhere. From the other side, you have your web app, client side rendered.
There is another solution: you could use a prerender like this to generate static assets from your express application. But if you are new to web developement, I advise you not to evaluate this option
When you move your static files to S3, you will need to setup the relative paths accordingly.
Can I set the views directory to be in the root folder?
No. Instead organize your files in S3 where index.html is the root and files with paths such as js/ css/ images/ taken from the root folder.
Note: Its important to understand that you cannot run NodeJS in S3 and instead you will be using the internal web hosting from S3 to serve the static content.
I have managed to configure my Nginx (on top of Nodejs) to serve static files without the html extension (e.g. going to site.com/about serves the about.html page) - with help from these past questions: how to serve html files in nginx without showing the extension in this alias setup and https://serverfault.com/questions/346994/hide-html-file-extensions-using-nginx-rewrites
But I am unable to figure out how to set up Cloudflare page rules to work with this setup (the current page rules are setup to include static html files as well as js, css, etc.).
How do I configure cloudflare to serve the about.html page when the user goes to site.com/about, and also serve the team.html page when the user goes to site.com/about/team? Do I need to do anything special, or is the Nginx setup sufficient?
If CloudFlare caching of your static pages isn't required, there's no need for you do do anything, everything should work out of the box.
If you want CloudFlare to also cache those static pages, try setting up page rules to Cache Everything on your site:
Domain > Page Rules
Pattern: *site.com/*
Custom Caching > Cache everything
Once you setup the page rules, CloudFlare should cache your static pages and site.com/page1 should work. To clarify, your server is still serving the pages, not CloudFlare. With the page rules, you are simply instructing CF to cache what your server sends for site.com/page1, as opposed to fetching the page from your server for every visitor.
You can then add other Page Rules with higher priorities should you want to exclude certain endpoints from caching (e.g. an admin section). You won't need to do this if you're just hosting static HTML.
If this doesn't work, or if you need more control over what's being cached, check this CloudFlare support doc for more options.
Good luck!
I have the following problem:
There's a server with Redis on it.
I want to be able to see Redis data and change it on my web-site. So I installed redis-commander on the server via npm. It usually listens to 8081 port.
And in my front-end part I created a button "Redis manager", which showes view with the following html:
<iframe id="frame" src="{{redisUIUrl}}" />
redisUIUrl looks like: https://example.com/redis
there's NGINX between front-end and server, which is used for reverse-proxy purpose. - it makes proxy_pass to oh_so_very_secret_syte.com:8081
So, when we make this GET, we get views from redis-commander. Everything is fine. But in this views there are links to the static of type: /css/default.css - relative ones.
And the problem is that instead of loading static via the address https://example.com/redis/css/default.css it tries to load it via https://example.com/css/default.css and fails.
I don't really understand, what is the problem and how to deal with it. So, I am asking for your help. Thank you in advance.
/css/default.css may be a relative URL, but it has an absolute path component. Which means that all references are relative to your server root.
If you require a path relative URL you need to drop the leading /.
css/default.css
will reference resources in the same directory as the current document.
I would like to create the following scenario in my web project, but as I am not pro web developer I don't know how to handle this.
Let's assume that I have project with main domain:
http://foobar.com and on this I have a links to the following subdomains:
http://xx.foobar.com
http://yy.foobar.com
I would like to that every site hosted on subdomains used the same code with only one different parameter sent to the subdomain from main page. This parameter will be a JavaScript variable. I am using Azure Web Sites from my project. The main question here is how to manage the code (now I am using Continuos Integration with GitHub) through these subdomains (the source code for every subdomain would be the same, except this one variable). Where should I start to search / read?
Are you passing any value for the parameter? Or is it just a static parameter? If it's static, you could possibly use JavaScript code to read the subdomain name in the URL.
Not sure what language you're using on the server, but you should also able to read the subdomain via server-side code.
But if its value is dynamic, the main page with the links can generate a QueryString parameter to pass along in the URL. Your implantation will vary depending on what language you've selected.
UPDATED, with additional info:
When you say "share the project source code between subdomains", do you mean that you want to deploy the same web app to multiple endpoints?
If so, you can create a separate Web App in Azure (formerly known as Azure Web Site) for each corresponding subdomain, and set up your source control to deploy to both of them whenever you check in your code.
References:
https://azure.microsoft.com/en-us/documentation/articles/web-sites-deploy/
https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control/
Since you have no server-side code, I'm using you have only HTML/JavaScript/CSS files. So, you can write JavaScript code to read the parameter from the URL.
References:
http://www.w3schools.com/jsref/prop_loc_href.asp
http://www.w3schools.com/jsref/prop_loc_pathname.asp
http://www.cssmojo.com/the_location_object/
As I mentioned earler, you would set up the links on the main index page to pass in QueryString parameters:
e.g.
Link 1: http://sub1.mywebsite.com/?param1
Link 2: http://sub2.mywebsite.com/?param2
Hope that helps!
First, make sure you point your domain to your azure website using wildcard (references)
Second, in your html head, find the subdomain using javascript and assign in to the variable you want to use
var full_url = window.location.host; // e.g. subdomain.host.com
var parts = full.split('.'); // split it
var subdomain = parts[0];
now you can use the subdomain variable to change your website based on subdomain value (e.g. change the content)