I'm using Digital Ocean Spaces CDN to host a static website, so far so good, if I it my index.html everything is working as expected.
The problem I'm facing now, is that if the user hit any path which that is not index.html it gets back an Access Denied error.
I've looked inside the Digital Ocean Spaces CDN Settings and found nothing about redirecting on wrong url/path
Is there a way I could achieve that?
I would need a service like cloudflare in front of my CDN?
Sorry, but looking around on the web got me nowhere so far.
You need to check a couple of things:
You need to make all HTML files public
Enable File Listing
DO Spaces does not support static page hosting (if someone visits your domain, you cant make redirection from "/" to "/index.html". IMO that's big no no. If you want free static hosting, just use https://www.netlify.com/ or git hosts (Github and Gitlab).
Related
I have followed everything from the above link. By following the link .I had hosted my website on google cloud. My static website contains multiple pages(5 pages). In the hosted website I cant find images and other html pages except "index.html" page.
Can anyone please help me by letting me know how to host static website of multiple pages and letting me know how to keep my website secured?, so it would be very helpful for me.
https://codelabs.developers.google.com/codelabs/cloud-webapp-hosting-gcs#5
i think reason behind image is not loading is
you examine the file paths for your files, also be sure that you spelled the name of the image correctly.
refer this link for more details.
Since you didn't provide any more details I can only give you some pointers on what to focus on.
Create a bucket named www.yourdomain.com - www is very important unless you just want to use just yourdomain.com.
Change access permissions so everyone can read it's contents.
Upload your files to the main directory. When someone accesses the site first file that GCP will look for is index.html so make it your home page. Make sure you uploaded all of them. If the images in your page are stored in a folder (img, images etc) then upload that folder with the files inside to your bucket. From your description it looks like either you're missing them or they are in the wrong folder.
Obtain your own SSL certificate or use GCP's managed certificate (free of charge)
Set up a load balancer
Point your domain to your LB's external IP
At that point you're ready to go and your site is up & running.
If this is the first time you're doing it I recommend to start from readin official documentation on how to set up a static website in GCP.
You can access your site without using load balancer to check if it's running correctly by using a link in the format https://storage.googleapis.com/my-bucket/my-object. Have a look at the truobleshooting static websites to get more insight.
Have a look at my other answer covering this topic: https://stackoverflow.com/a/64442826/12257250
Alternatively you can try hosting your site using firebase.
I'm trying to get a prototype Next.js project up by doing a Static html export (i.e. next export) and then copying the generated output to AWS S3 and serving it via Cloudfront.
I've got the following two pages in the /pages directory:
index.tsx
Pricing.tsx
Then, following along from the routing doco I added a Link to the pricing page from the index page, like so:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This results in a link that looks like example.com/Pricing (when you hover over it and when you click the link, the page does change to the pricing page and the browser shows example.com/Pricing in the URL bar).
The problem is, that link is not real - it cannot be bookmarked or navigated to directly via the url bar.
The problem seems to be that when I do a next export, Next.js generates a .html file for each page, but the router doesn't use those .html suffixes.
So when using the site, if the user tries to bookmark example.com/Pricing; loading that bookmark later will fail because Cloudfront will return a 404 (because CF only knows about the .html file).
I then tried changing my Link to look like:
<Link href="/Pricing.html">
<a>Pricing</a>
</Link>
That causes the router to use example.com/Pricing.html and that works fine with Cloudfront - but it actually causes a 404 during local development (i.e. using next dev)!
Other workarounds I could try are renaming all the .html files and removing the extension before I upload them to S3 (and make sure they get a content-type: text/html header) - or introducing a Cloudfront lambda that does the renaming on the fly when .html resources are requested. I don't really want to do the lambda thing, but the renaming before uploading shouldn't be too difficult.
But it feels like I'm really working uphill here. Am I doing something wrong at a basic level? How is Next.js linking supposed to work with a static html export?
Next.js version: 9.5.3-canary.23
Alternate answer if you want your URLs to be "clean" and not have .html on the end.
To get Next.js default URL links working properly with S3/Cloudfront, you must configure the "add a trailing slash" option in your next.config.js:
module.exports = {
trailingSlash: true,
}
As per the documentation
export pages as index.html files and require trailing slashes, /about becomes /about/index.html and is routable via /about/. This was the default behavior prior to Next.js 9.
So now you can leave your Link definition as:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This causes Next.js to do two things:
use the url example.com/Pricing/ - note the / on the end
generate each page as index.html in it's own directory - e.g. /Pricing/index.html
Many HTML servers, in their default configuration, will serve up the index.html from inside the matching directory if they see a trailing / character in the URL.
S3 will do this also, if you have it set up to serve as a website and IFF you access the URL through the website endpoint, as opposed to the REST endpoint.
So your Cloudfront distribution origin must be configured as a Origin type = Custom Origin pointing at a domain something like example.com.s3-website.us-east-1.amazonaws.com, not as an S3 Origin.
If you have your Cloudfront/S3 mis-configured, when you hit a "trailing slash" style URL - you will probably see your browser download a file of type binary/octet-stream containing 0 bytes.
Edit: Beware pages with . characters, as per issue 16617.
Followup to Shorn's self-answer of using the as field in the next/link component. This worked for me, however it would fail if I refreshed the page I was on.
Instead, I used exportPathMap to link my pages to a page.html equivalent that would be created when running next export.
The downside of this approach is that when running next start, those .html files will not be created or accessible. They will, however, from next dev. As I am creating a purely static website, I've now just been using next dev.
While making this change I was validating by manually copying my built assets from next export into S3 and hosting in CloudFront as Shorn was doing -- I no longer do this to validate and haven't had issues so far.
If anyone knows, let me know what I else may be missing by ignoring next start as part of development. This solution has worked for me so far though.
After writing this question, I found a reasonable workaround - though I'm not sure if it's the "right" answer.
Change the Link to:
<Link href="/Pricing" as="/Pricing.html">
<a>Pricing</a>
</Link>
This seems to work in both local dev and for bookmarking the site as served by Cloudfront. Still feels kind of wonky though. I kind of like those non .html urls better too. Oh well, maybe I'll do the renaming workaround instead.
I'm trying to access the http_referer in a bitnami wordpress install on aws. It's returning an empty string even tho I'm loading the page from another page in the site, not by directly entering the url.
Same code worked before I moved the site to AWS.
Am I missing something?
The Bitnami WordPress Cloud Image doesn't block or strips the HTTP_REFERER. Apache and PHP are not configured to modify it.
I recommend you to take a look to the next SO case:
In what cases will HTTP_REFERER be empty
There you'll find a bunch of possible reasons why it could be empty. The problem could be related with your browser or the Firewall configuration on your Server.
I'm trying to point my hostgator domain name to my heroku app, but I keep getting the error when I try to manage my domain names.
An error occurred. Please verify the validity of your nameservers and try again.
I've already added the domain name to heroku in the sites dashboard > settings. My app is free, I'm ready to move up and pay for the full version. I've been figuring some things out and I am ready to deploy. And to do this I have to point my domain name to heroku. I know I'm missing something. I've read the docs already, a lot, But it's not all the way clear. I know it's something simple I'm missing. Thanks in advance
EDIT. I don't want my domain to be a subdoamain. I want it to be the main domain. because you can't monetize a site that is a subdomain.
EDIT to be clear I want the domain name mysite.com from hostgator to be used with my heroku app. So when I type mysite.com my heroku app appears. I want my heroku app to go from this
mysite.herokuapp.com
to this
mysite.com
and I do not want it to be a subdomain
I'm going to outline two approaches here. One works if you still have cpanel because you're paying for hosting with HostGator. (That makes no sense if you're using Heroku for hosting, so it's not a long term solution.) The other works if you just have a domain registered with HostGator and theoretically in either case.
Either way, do this:
heroku domains:add www.mysite.com
heroku domains:wait 'www.mysite.com'
1) If you have hosting with HostGator
Log into your HostGator cpanel interface at mysite.com/cpanel. Scroll down to Domains and open up the Advanced Zone Editor (click the link). You're not going to add a record. Instead, you're going to change one that's already there. Find the record with the name "www.mysite.com." (it has a period at the end) with the type CNAME. Click Edit. Change the CNAME field to the DNS target heroku gives you when you type heroku domains or scroll down to Domains And Certificates under Settings in your Heroku dashboard. Mine looks like www.mysite.com.herokudns.com. Finalize the change.
Visit www.mysite.com. Please put www in the url. www must be in the url. This should now point to your Heroku site. Perhaps you will see a 400 (bad request) error. This might be because your backend isn't allowing Heroku as a host. If you have a Django app, for example, that's not in debug mode (you should set DEBUG to False for security reasons), you must also set the ALLOWED_HOSTS list in settings.py to include 'www.mysite.com'. Otherwise you'll get 400 errors when you try to access the site from the www.mysite.com domain.
The end result is that www.mysite.com points where you want it to, and so will www.mysite.com/some_page.
But what if a user types in only "mysite.com"? They'll be directed to your HostGator site. A simple solution is to go to the CPanel's Redirects section, also under Domains, and make a permanent redirect from your domain (leaving the textbox that starts with "/" blank) to http://(((www.mysite.com/))) [StackOverflow won't let me put it in without something like parentheses there.] All this does is force "www" to appear in the URL even when the user doesn't type it.
Now, whatever the user types in, they'll end up at your Heroku site. I don't mind having a "www" hanging out in the URL box, so this works for me.
2) If you don't have hosting with HostGator, just ditched it, or simply don't like the company (quite understandable)
If you don't have HostGator hosting or ditched it, you probably can't access the cpanel stuff. First, add the domain as shown at the top. Now install the PointDNS add-on for Heroku. It automatically syncs with your custom domains (even after you install it). So when you open up PointDNS in the Heroku dashboard, you'll see it set up with basically everything you need. In HostGator, at https://portal.hostgator.com/domain/manage), click on your domain name and find the link to change the nameservers. Select Manually set my nameservers, and replace the default nameservers with the nameservers you see labelled with NS on the main page of the PointDNS add-on page. (You're also free to add more or or change them in PointDNS.)
HostGator says it will take a couple days to propagate. I saw the change take effect within seconds.
If it doesn't work without www. now (check pages besides the index page), I've outlined a potential solution here.
With this PointDNS solution, you may want to test your site at different places in the world to make sure it's available there. I made sure mine is available from places where I expect people to view it, but it's also available in Beijing, so I don't think you'll have geographic limitations with PointDNS. I like to use www.webpagetest.org to test the site from different locations.
According to https://devcenter.heroku.com/articles/custom-domains you must add a CNAME record like "CNAME www example.herokuapp.com" first at Hostgator. After that, you must add www.example.com (with or without www) as a custom domain to your project. It's really simple.
So, I am looking for a solution to have images through the base website URL.
Example of image url:
www.website.com/image.jpg
Where the homepage lives at the url:
www.website.com/
I am using the django python web framework, and am aware this is a peculiar, if not just bad idea, but my client has linked several hundred images to their base URL in the above format, and refuses to change the existing links.
I know this is a vague question, but I can't seem to find anything relevant. Do I just set the media url to the same as the website?
Why don't you just configure your web server to rewrite the paths?
You could also configure it using an alternate host, assets.example.com for example and serve everything from there. Then you could rewrite all requests going at www.website.com to assets.example.com.