Giter Club home page Giter Club logo

aws-project-2-staticwebsite's Introduction

AWS-Project-2-StaticWebsite

Intro

This is a repository that will contain code and steps for hosting a simple website using AWS S3, and setting up a login system to access a private webpage.

Project progress can be tracked here: https://github.com/users/mphemming/projects/2/views/1

Project information

The below sections will contain notes and information useful to replicate the project process.

IAM user

MFA was enabled for the root user as recommended, and an IAM user 'Michael_developer' with console access and full admin rights was created. This IAM user will be used to work on this project. The password for this IAM user is stored in Michael's Dashlane account.

Regions

I am working within the ap-southeast-2 (Sydney) region.

Host a simple website on AWS S3

Create an S3 bucket to host the website

An S3 bucket was created with the standard option within the ap-southeast-2 (Sydney) region spread across >= 3 AZs. This bucket is called 'aws-project-2-staticwebsite'.

The simple website file 'index.html' was added to the S3 bucket. This simple website displays 'Hello World'.

Configure the S3 Bucket for Static Website Hosting

Enable Static Website Hosting:

  1. Click on the "Properties" tab in your S3 bucket.
  2. Scroll down to the "Static website hosting" section and click "Edit".
  3. Select "Enable".
  4. For the "Index document", enter index.html.
  5. Click "Save changes".

ℹ️ Note that 'index.html' used here was renamed to 'index.html.legacy' in this repository in order to setup a new 'index.html' in the next section.

Turn off 'Block public access' (if enabled when creating the S3 bucket):

  1. Click on the "Permissions" tab in your S3 bucket.
  2. Click on "Block public accessy" and then "Edit".
  3. Uncheck the box for 'Bloack all public access.
  4. Click "Save changes".

Set Bucket Policy for Public Access:

  1. Click on the "Permissions" tab in your S3 bucket.
  2. Click on "Bucket Policy" and then "Edit".
  3. Add the following bucket policy to allow public read access:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::aws-project-2-staticwebsite/*"
    }
  ]
}
  1. Click "Save changes".

Enable Static Website Hosting:

  1. Click on the "Properties" tab in your S3 bucket.
  2. Scroll down to the "Static website hosting" section and click "Edit".
  3. Select "Enable".
  4. For the "Index document", enter index.html.
  5. Click "Save changes".

Access Your Website - get the Website URL:

  1. Go back to the "Properties" tab.
  2. In the "Static website hosting" section, you will see the "Bucket website endpoint".
  3. In my case, the URL is http://aws-project-2-staticwebsite.s3-website-ap-southeast-2.amazonaws.com
  4. Open the provided URL in a web browser to see the "Hello World" page.

ℹ️ Note that 'index.html' used here was renamed to 'index.html.legacy' in this repository in order to setup a new 'index.html' in the next section.

ℹ️ Note the AWS link in step 3 now directs to the newer index.html described in the section below.

Add user/login capability to access a private webpage

Create a User Pool using AWS Cognito

  1. create a user pool via the Cognito console with the following settings:
  • Users can sign-in using either a username or email address
  • The minimum password length is 8 characters, and must contain at least 1 number, and at least one upper and lower case letter.
  • The temporary password expires after 7 days
  • no multi-factor authentication required (although this is an option if better security needed)
  • "forgot your password" option available to users, delivered via email
  • disable self-registration option so that only a select few can access information (organised by website admin)
  • Allow Cognito to automatically send email messages to verify and confirm (recommended)
  • the following attributes are required when a new user is created: birthdate, address, given_name, family_name, phone_number, preferred_username. There is also an option to create custom attributes but I left this blank for now.
  • send email with Cognito, but replies are forwarded to my personal email address (temporary)
  • user pool name 'StaticWebsite'
  • Public app client created called 'StaticWebsite'

For the next steps, this Youtube video was very helpful: https://www.youtube.com/watch?v=8a0vtkWJIA4

  1. Upload 3 html scripts to the same S3 bucket 'aws-project-2-staticwebsite': 'index.html', 'logged_in.html', and 'logged_out.html'. These are found in this repo and all 3 will be used for setting this up.
  2. I used the Hosted UI for the login interface. To set this up you will need to do the following:
  • Navigate to the App client 'StaticWebsite'
  • Edit the 'Hosted UI' section to include a callback URL as https://aws-project-2-staticwebsite.s3.ap-southeast-2.amazonaws.com/logged_in.html and the allowed sign-out URL as https://aws-project-2-staticwebsite.s3.ap-southeast-2.amazonaws.com/logged_out.html.
  • Select 'Cognito user pool' as the identity providers
  • Select 'Authorization code grant' for OAuth 2.0 grant types
  • select 'OpenID' and 'Email' for the OpenID connect scopes
  • Add a domain name for the hosted UI. You can call it anything, but it has to be unique.
  1. After saving changes, click on the 'view hosted UI' button to test the login interface.
  2. Copy the URL for this hosted UI into the three html scripts uploaded in the S3 bucket, making sure to change some parts of the URL for 'logged_in.html'. I have removed the app client ID in the scripts available in this repository so you will need to add your own ID to the URL link.
  3. create a user to test the login mechanism. You do this by going to the Cognito user pool and then click on 'create user'. An email will be sent with the username and temporary password, and then once logged in the user will have the opportunity to input required info and change the password.

ℹ️ Note that I did not receive an email when I used the same email for the user as used for the user pool email setup.

ℹ️ Note that 'login.html.legacy' is a previous attempt to create a login interface. It didn't work because it couldn't find the 'amazon-cognito-identity.min.js' script. I think ChatGPT probably made this up. I have uploaded the code still in case it might be useful for something else.

Access data from DynamoDB table on secure webpage

Update the website to use a BootStrap template

Other notes

  • The website URL might not work at first relating to http vs https. Changing the URL to 'https' usually works.
  • For Cognito, it is better to not use the same email address for the testing user as used when creating the user pool

aws-project-2-staticwebsite's People

Contributors

mphemming avatar

Watchers

 avatar

aws-project-2-staticwebsite's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.