I am trying to host my static application on aws s3 bucket. I have put my build folder files in bucket. It looks like this
But when I go to .s3-website..amazonaws.com index.jade gets downloaded instead of webapp getting opened.
I followed this tutorial https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/
How can I get my web app work?
Update:
When I changed content type of index.jade to text/html, the browser shows html text like this
Here is how I edit metadata key in aws console
now there is no download. But still web page is not getting served.
You need to enable static site hosting on your S3 bucket. To enable website hosting for an Amazon S3 bucket
Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
In the list, choose the bucket that you want to use for your hosted website.
Choose the Properties tab.
Choose Static website hosting, and then choose Use this bucket to host a website.
You are prompted to provide the index document and any optional error documents and redirection rules that are needed.
Make sure to keep your bucket ACL as public. Also you need to parse your jade files to html.
Related
I have created S3 bucket, and done the steps to enable static web hosting on it.
I have verified it works by going to the URL
which looks something as following https://my-bucket.s3.aws.com
I want to put my web assets in a sub folder now
I put the web assets in a folder I called foobar
Now if want to access it I have to explictly enter URL as following:
https://my-bucket.s3.aws.com/foobar/index.html
So my question is, do I need to use some other service such as CloudFront to enable so I can go into the bucket with the following URL instead https://my-bucket.s3.aws.com/foobar, that is I don't want to have to explicit say index.html at the end?
You can't do this with a default document for a subfolder using CloudFront. Documentation says
However, if you define a default root object, an end-user request for
a subdirectory of your distribution does not return the default root
object. For example, suppose index.html is your default root object
and that CloudFront receives an end-user request for the install
directory under your CloudFront distribution:
http://d111111abcdef8.cloudfront.net/install/
CloudFront does not return the default root object even if a copy of
index.html appears in the install directory.
But that same page also says
The behavior of CloudFront default root objects is different from the
behavior of Amazon S3 index documents. When you configure an Amazon S3
bucket as a website and specify the index document, Amazon S3 returns
the index document even if a user requests a subdirectory in the
bucket. (A copy of the index document must appear in every
subdirectory.) For more information about configuring Amazon S3
buckets as websites and about index documents, see the Hosting
Websites on Amazon S3 chapter in the Amazon Simple Storage Service
Developer Guide.
So check out out that referenced guide, and the section on Configuring an Index Document in particular.
I'm setting up an S3 bucket behind CloudFront that is meant to serve static assets. My problem is doing a / on any directory with no file name will have the browser download a download.txt with 0 bytes. I have my S3 bucket setup for Static Website Hosting and is pubic, so I'm able to access my assets.
https://s3-bucket.domain.com/path/to/file.jpg -> get asset, working
https://s3-bucket.domain.com/path/to/file-bad-name -> Error status 403, working. Renders error.html from S3.
https://s3-bucket.domain.com/path/to/ -> sends download.txt, not working
How do I configure #3 to not send a download.txt and render an error page instead?
There are few things happening there.
You need to map it to new origin if you want to point the path to an S3 object.
Your pattern is not having priority in CloudFront.
If you fix one of the above or both, then it should work as expected.
I have my S3 bucket setup for Static Website Hosting and is pubic
...but you selected the bucket from the dropdown list when defining the origin... yes?
You need to configure the origin domain name to use the web site hosting endpoint for the bucket.
When you configure your CloudFront distribution, for the origin, enter the Amazon S3 static website hosting endpoint for your bucket. This value appears in the Amazon S3 console, on the Properties page under Static Website Hosting. For example: http://bucket-name.s3-website-us-west-2.amazonaws.com
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html#concept_S3Origin_website
If you don't do this, and you created folders in the bucket using the S3 console, then what you are currently observing is the expected behavior, a side effect of the way the console creates those imaginary folders.
I am hosting a website using Amazon S3 and Route 53 as part of their Amazon Web Services. The site is up and running fine but would like to be able to easily keep track of how many people visit the site?
I know you have resolved this, but I hope it will help someone else.
Below is a copy/paste from relevant page of AWS site made on Nov 18 (use this link to page for latest version) :
If you want to track the number of visitors who access your website, enable logging for the root domain bucket. Enabling logging is optional.
To enable logging for your root domain bucket
Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
Create a bucket for logging named logs.example.com in the same AWS Region that the example.com and www.example.com buckets were created in.
Create two folders in the logs.example.com bucket; one named root, and the other named cdn. If you configure Amazon CloudFront to speed up your website, you will use the cdn folder.
In the Bucket name list, choose your root domain bucket, choose Properties, and then choose Server access logging.
Choose Enable logging.
For Target bucket, choose the bucket that you created for the log files, logs.example.com.
For Target prefix, type root/. This setting groups the log data files in the bucket in a folder named root so that they are easy to locate.
Choose Save.
You can now review your logs in the logs.example.com bucket, in both the root and cdn folders.
You can use any third-party counter in exactly the same way you would have it on non-S3 site. Do you experience any problem with any particular counter?
Static website hosting is working in the root directory, but this is not working for me:
my.bucket/index.html
my.bucket/subfolder/index.html
https://s3-eu-west-1.amazonaws.com/my.bucket works as expected
https://s3-eu-west-1.amazonaws.com/my.bucket/subfolder doesn't work (Access Denied)
Is this possible?
There are (at least) three ways to access a static website hosted in AWS.
The S3 bucket name
The CDN name. (which is what the "host a static website" wizard tells you to use)
The "Static website hosting endpoint" which is listed on the S3 bucket management page
Only the "static website hosting endpoint" filters incoming requests to give Apache like behaviour; S3 is a RESTful API for storing files with no concept of subfolders.
If you have used the wizard, there is "Manage file in S3" in tiny text at the bottom left of the screen, which will open up the correct page in the console for you, then click the 'properties' button.
You need to modify the permissions of the sub-folder as well to make it publicly accessible.
I have a Python/Flask application that I've deployed in elastic beanstalk. I have been deploying updates via git aws.push, which includes my static js libraries, css, and images.
I now have about 1 GB of static content in the form of images. I want to serve that content from the same location as my application, that is, from the same place I was serving them before, in a /static/img/ folder. However, I obviously don't want to add the images to source control or deploy them with the git macro.
Ideally, I would like to connect to the instance where the files are hosted and upload them manually. However, I do not know how to do this. I have searched through the s3 associated with the elastic beanstalk app, but there is no sign of my app there, only a repository of zipped deployments.
I could create a new bucket and handle things that way, but I haven't been able to map a domain to a new bucket. Whenever I try to add a CNAME record to the bucket, it is rejected because "URL/IP cannot be added as a CNAME." In any case, the process that seems most intuitive is to manually put unversioned static content in place next to versioned, deployed code.
You're correct, this type of static content should not be part of your repository and certainly not stored on EC2 instance's volumes.
AWS' best practice for this use case would be to use S3 and directly link to S3 objects from your HTML code. S3 is a natively HTTP enabled object storage service.
In order to use S3 as web server, you must create a bucket on S3.
You can either use the S3 provided URL <bucket-name>.s3-website-<AWS-region>.amazonaws.com to link to your content from your web pages.
Or you can use your own domain name. In this case, your bucket name must be named after your domain name and you must enable "Website Hosting" option at the bucket level. This is required to let S3 know how to map HTTP requests to buckets.
A high level scenario is described here : http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html
And more details are provided by S3 documentation.
As an added benefit, storage in S3 costs less money than EBS storage.