Where to upload media content on AWS S3? - amazon-web-services

I have a static website hosted on S3 with CloudFront.
The bucket name is "www.domain.com" and it's a react website built with npm build.
I was wondering, for CloudFront to work with posts uploaded by the user, does the content need to be inside this bucket or can it be a different bucket called "domain-media", for example?
I'm not yet sure how this all works exactly.

Related

CloudFront for website with custom CMS hosted out of AWS

I've got a website with custom CMS hosted outside of AWS.
How can I set up CloudFront?
My idea is to upload current content to S3 bucket. Set CloudFront up with origin from that S3.
This also require some changes in CMS itself:
To replace static content (pics) urls for the one from S3bucket.
Check if file exists on S3 then use S3 if not use copy on local server.
To interact with S3 butcket API. (uploading/deleting)
When uploading new file, upload it to S3bucket too
When deleting file, delete it from S3 too
Delete only from the bucket.
Is there any other easier way? Mayby I'm just overthinking and cannot see the simplest solution.

AWS S3 sending download.txt file

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.

Hosting a Static website in S3 Bucket Folder

I am trying to host static websites on S3. I know how to do it using S3 buckets (Link)
Question:
Can I do it using S3 folder instead of S3 bucket? So that I don't have to create a new bucket when I want to host a static site and simply host it by creating a new folder in the same bucket.
If you want to point a custom domain name to the site you are hosting in S3, then the bucket name must match the domain name, so you can't have multiple sites with multiple domains in the same bucket. Also, the static site hosting settings are at the bucket level not the "folder" level. NOTE: There is actually no such thing as a folder in S3, just key prefixes.

Hosting react app on aws S3

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.

How to manually upload static content with elastic beanstalk and s3

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.