قالب وردپرس درنا توس
Home / Tips and Tricks / How to host a website from S3 – CloudSavvy IT

How to host a website from S3 – CloudSavvy IT



aws s3 logo

Chances are you probably do not need a full web server like NGINX running on EC2 to get your site up and running. If you just want to host a static website, you can store all the content in S3 and host it from there.

Wait, I do not need a server?

If your site does not use any server-side processing (such as PHP), simply store the files on S3, configure the bucket to host the site, and point your DNS to the bucket that will replace the use of NGINX or Apache.

“Server side processing”

; is much less broad than it sounds. Just because your site is “static” does not mean it looks like a 1990s GeoCities page, but JavaScript. All that “static” means is that all your assets (HTML pages, JS code, CSS stylesheets) do not change in response to requests. With languages ​​like PHP, all processing is done on the server side; if two users request their profile page, the server sends different pages. This can not be done on S3, so if you use PHP you need to set up a real web server. This is especially true of WordPress, which uses PHP to serve content.

But it is becoming increasingly common for websites to be large JavaScript applications. With a framework like React, all that needs to be delivered is one bundle.js file. It is the client’s job, not the server’s, to run this file and launch the application. Apps like this can be hosted on the S3 without any problems. This is also not released by your backend – you can still get your app to communicate with an API server and talk to a database, you just need to verify requests coming from the client. Combined with AWS API Gateway and Lambda, you may not need to run a single EC2 server.

Do not be fooled by the simple installation – for small websites, S3 can reduce your costs to money on the dollar, and since there are no servers to worry about, it perfectly scales up to millions of users. You simply pay a fixed fee for bandwidth in and out, as well as any associated costs for Lambda, RDS or other services you use with your app. Even for larger companies that use production applications, hosting from S3 is a very viable and cost-saving alternative if your app can support it.

S3 does not support HTTPS for static websites, which would be a dealbreaker, but you can put it behind CloudFront (AWS’s CDN) which, in addition to improved caching and performance, can use a custom domain with HTTPS. It even has a generous free level of data transfer – 50 GB rather than the S3’s 1 GB.

Set this

For this tutorial, instead of distributing simple HTML page, we will distribute the startup project from create-react-app, because it better shows the true potential of the S3.

After driving yarn build, we are left with the following assets in /build folder:

respond to the content of the app

The entire folder is copied to S3. Go to the S3 Management Console and click “Create Bucket.”

create bucket

Give it a name (it must be unique among all AWS accounts) and click “Next.” You can enable versioning in the options here, but there is not much else to think about. Click “Next” again.

On the next screen, uncheck “Block all public access.” This is by default on to prevent objects in buckets from becoming visible to the open internet, which would make your bucket irrevocable. AWS pops up with a warning saying to turn it back on if you are not using “specific and verified use cases”, e.g. static web hosting. Because that’s exactly what we do, you can ignore this.

activate public access

Click “Create” on the bucket and open it.

You can drag the contents of your HTML folder manually into the bucket, but a better method is to use the AWS CLI to synchronize the entire folder up to your bucket. The command is quite simple:

aws s3 sync . s3://bucket-name

Now you should see the folder contents in the bucket:

the contents of the bucket

Once everything is synchronized, you can configure the bucket so that web hosting can be allowed. On the Properties tab, enable the “Static Web Hosting” option and select your index file. You can also select an error file to show users a more personal 404.

enable static web hosting

This enables static web hosting, but does not explicitly provide read access. To do so, you must add the following bucket policy under Permissions> Bucket Policy:

{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::example-bucket/*"
      ]
    }
  ]
}

attach hink policy

Then another warning is displayed stating that public access is on. You can again ignore this.

Your bucket can now be seen from the following end point:

http://BUCKET-NAME.s3-website.REGION.amazonaws.com/

s3 website test

Good! Everything works correctly. The client requests the bucket, which serves index.html file, which downloads all necessary JS and CSS assets, and makes the spinning React logo.

But this endpoint is obviously not user-friendly, so you will probably configure a custom domain for your S3 site. The simplest method is to use CloudFront to serve requests, which is the only way to support HTTPS anyway. If you do not want to use CloudFront, you can set up a custom domain using path 53 to alias to your bucket’s default endpoint.

Switch to the CloudFront console. Select “Create distribution” and select “Web” as the type. On the next screen, under “Origin Domain Name”, select your S3 bucket from the drop-down menu. Be sure to also check “redirect HTTP to HTTPS.”

enter name and redirect HTTP

Further down you want to configure your domain. Enter your alternate domain name and select “Custom SSL.” Request one from ACM; It can take up to half an hour to verify depending on your DNS provider, but if you use Route 53, you can create and verify the record automatically within minutes.

setting of alternative domain

Then click on “Create distribution” at the bottom and wait about 15 minutes for CloudFront to get everything settled. When done, you can visit your custom domain name and see your app appear directly from S3.

To facilitate version control, you can set up an automated distribution pipeline using the AWS CodePipeline. Simply select distribution for S3, and AWS will distribute source code updates automatically, including building artifacts.


Source link