DEV Community: David Meadows

Explain Forward and Reverse proxies Like I'm Five

David Meadows — Sat, 25 Mar 2023 04:06:41 +0000

Hosting a static website in AWS

David Meadows — Mon, 20 Feb 2023 02:29:31 +0000

Summary

It is easy to forget how overwhelming software developing can be. Let's say you are a frontend developer who is passionate about creating a website and getting it out in front of users. The journey of learning how to code a frontend and all that goes with it is already a long journey.

However, it does not stop there, you realize that your wonderful website does no good to anybody unless you deploy it. The reality is that frontend developers can benefit from having at least some knowledge of deploying and maintaining a backend.

In this post, I will detail how to set up and deploy a static website using an AWS S3 bucket.

Create Bucket
Update Bucket Permissions
Enable Static Website Hosting
Upload the Website Files
Summary

Create Bucket

Fist navigate to the service S3 and click on the Create bucket button to provision your bucket.

I will enter a bucket name and then go with the default/recommended configuration options for now.

Note: Bucket names need to be unique across all accounts for all AWS regions within a particular partition.
AWS documentation - Buckets overview

When finished selecting the desired configurations, click the Create bucket button and wait for the bucket to be provisioned.

Update Bucket Permissions

Next, navigate to the Permissions tab and update the public access settings.

Uncheck the Block all public access checkbox. This should uncheck all of the checkboxes beneath. Save changes and continue.

You will be warned and asked to confirm.

Next update the Bucket policy. This will provide access to the files that are uploaded to the bucket.

Here is the JSON object I used for the bucket policy:

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

Enable Static Website Hosting

Next navigate to the Properties tab where the Static website hosting can be enabled.

Select Enable Static website hosting and other options will appear. I will stick with the default settings except for the Index document. The index document is where you can specify the default page for the website. I will choose index.html and leave the Error document field empty.

Once the changes are saved there will now be a Bucket website endpoint.
This endpoint is the url used to access the website.

Upload the Website Files

Next, we can upload the files into the bucket that are needed for the website. In this example, I will only upload the index.html file.
Click on the Objects tab and then click on the Upload button.

I will select my index.html file that I made for this website.

Here is the contents of my simple index.html:

<html>
    <head>
        <title>My example Webpage</title>
    </head>
    <body>
        <h1>Hello There!</h1>
    </body>
</html>

That is it! Now use the endpoint that was created earlier in the Enable Static Website Hosting step to navigate to the website. The Bucket website endpoint can be found under the Properties tab.

Summary

In this post I summarized how to create a S3 bucket and then configure it as a static website. Although this example is extremely simple, using S3 in this way can be powerful. Imagine hosting a dynamic application built with React or Vue. Also adding a code pipeline for ease of build and deployment with a CDN distribution in front of the bucket. The sky is the limit to what can be built around this S3 static website bucket.

If you run into any issues (particularly access issues), please refer to the section Update Bucket Permissions. Permission issues are usually the main culprit for issues.

Explain CORS Like I'm Five

David Meadows — Tue, 14 Feb 2023 02:10:24 +0000

At a basic level, I think I understand CORS. I've read the wiki and have seen the diagrams. I have even been able to solve a couple of CORS issues I have had. However, I would love to hear simple explanations on the subject to get a different perspective. This will also help me explain the subject to other people who may not be familiar with the issues that arise with it.

Creating a code pipeline for your S3 static website

David Meadows — Fri, 10 Feb 2023 04:35:09 +0000

Having the ability to create a code pipeline to automate certain tasks is truly a gift. This is my attempt to summarize the following:

how to create a code pipeline in AWS
how to use an existing GitHub repository as the code source
how to build a static NextJS site
how to sync the static files to an existing S3 bucket

This summary does NOT detail how to create a static website with S3.
I detailed how to do that in the following post: Hosting a static website in AWS

Create a CodePipeline in AWS
Add Source Stage
Create a connection
Add Build Stage
Run the pipeline
Summary
Troubleshooting a failed stage

Create a CodePipeline in AWS

First log into AWS console and go to service CodePipeline

Next, click on the Create pipeline button. For this pipeline, I am going to use my NextJS portfolio application as the code source. So I will simply name the pipeline my-portfolio-app.

Note: Check the box to allow AWS CodePipeline to create a service role for this new pipeline.

Add Source Stage

Next, this is where a code source is connected as an input to the pipeline. The drop down menu for the "Source provider" will have a few options to select from. In this case, I will select GitHub.

There are two options to choose here (Version 1 & 2). Choose whichever option to connect to GitHub that suites you best.

Note: In the AWS documentation version 2 is recommended.
GitHub source action

Create a connection

Once a connection has been made to GitHub, you will be able to access your existing repositories. Choose the desired one from the drop down menu.

Add Build Stage

Next is the build stage. This stage is optional, however a pipeline needs more than one stage. So I will add a build stage and skip the Deploy stage.

If you do not have an existing build project you want to use, then click on the Create project button.

Create build project

For the Environment configuration, I choose the following options:

For the Buildspec option I selected Use a buildspec file and left the Buildspec name empty.

The rest I left as defaults.

Here is my buildspec.yml as an example

Note: There are many ways to set up your buildspec file to successfully build a NextJS or ReactJS app. This is a very simplistic version.

version: 0.2
phases:
  pre_build:
    commands:
      # install npm
      - echo Performing a npm install...
      - npm install
  build:
    commands:
      # run build script
      - npm run build
  post_build:
    commands:
      - aws s3 sync out <s3 bucket name>

artifacts:
  # include all files required to run application
  #    name: BuildArtifact
  files:
    - '**/*'
  base-directory: out
  discard-paths: no

Notice that for the build stage there is a command "npm run build"

The build script I used to build my NextJs app is the following:

"build": "next build  && next export"

This will build the application in a directory named "out".

In order to sync the built files that are in the "out" directory to a S3 bucket, I used the "aws s3 sync out " command.

Note: To use the aws s3 sync command, make sure the codeBuild service role has the proper permissions (s3:ListBucket).

Add Deploy Stage

For this particular pipeline example I skipped this stage.

Next, review all steps and configurations. Click Create pipeline button to continue.

Run the pipeline

The pipeline will automatically run for the first time. This particular pipeline is simple and hopefully will not have any issues.

Troubleshooting a failed stage

If the build stage fails, here are two common causes:

the buildspec.yml file has an error (typo, incorrect command, etc.)
role permissions are incorrect (check specific policies attached to the codeBuild service role)

Summary

Once the pipeline has been created, each commit that is made to the selected repository branch ("main" in my case) should trigger the pipeline to build and sync the files to the specified S3 bucket. That means no more manually copying the built files over to a S3 bucket. 🎉🎉

I hope this is helpful to someone. Good luck out there 👋

DEV Community: David Meadows

Explain Forward and Reverse proxies Like I'm Five

Hosting a static website in AWS

Summary

Contents

Create Bucket

Update Bucket Permissions

Enable Static Website Hosting

Upload the Website Files

Summary

Explain CORS Like I'm Five

Creating a code pipeline for your S3 static website

Contents

Create a CodePipeline in AWS

Add Source Stage

Create a connection

Add Build Stage

Create build project

Here is my buildspec.yml as an example

Add Deploy Stage

Run the pipeline

Troubleshooting a failed stage

Summary