React front-end application Production-Grade workflow

Basic react app in Production-Grade workflow with CICD and automatic deployment onto AWS Elastic Beanstalk. We are going to Docker to facilitate development, test and production deployment.

Development

Developers can run docker-compose -f docker-compose-dev.yml up --build to bring up 2 docker containers simultaneasly, one for development and one for testing. Because we are making use of Volumes, developers can edit in real-time the source code, and both the containers will automatically reflect the changes.

Production

For production deployment, we are using a multi-step build process:

1. Built the NodeJS application in the first container
2. Create a new Nginx container and move the build folder across to leave behing all the binaries that aren't suitable for a production environment

CI/CD

In this repository you can find the pipeline configurations for both GitHub Actions and TravisCI (use one at time).

Every time you merge code into main your code will be tested and, if successful, deployed onto AWS Elastic Beanstalk.

Elastic Beanstalk Setup and Configuration

Docker Compose config

Create a production docker-compose.yml file in the root of the project and paste the following:

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '80:80'

Create EC2 IAM Instance Profile

1. Go to AWS Management Console
2. Search for IAM and click the IAM Service.
3. Click Roles under Access Management in the left sidebar.
4. Click the Create role button.
5. Select AWS Service under Trusted entity type. Then select EC2 under common use cases.
6. Search for AWSElasticBeanstalk and select the AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier and AWSElasticBeanstalkMulticontainerDocker policies. Click the Next button.
7. Give the role the name of aws-elasticbeanstalk-ec2-role
8. Click the Create role button.

Create Elastic Beanstalk Environment

1. Go to AWS Management Console
2. Search for Elastic Beanstalk and click the Elastic Beanstalk service.
3. If you've never used Elastic Beanstalk before you will see a splash page. Click the Create Application button. If you have created Elastic Beanstalk environments and applications before, you will be taken directly to the Elastic Beanstalk dashboard. In this case, click the Create environment button. There is now a flow of 6 steps that you will be taken through.
4. You will need to provide an Application name, which will auto-populate an Environment Name.
5. Scroll down to find the Platform section. You will need to select the Platform of Docker. This will auto-select several default options. Change the Platform branch to Docker running on 64bit Amazon Linux 2. The new 2023 branch currently has issues with single-container deployments.
6. Scroll down to the Presets section and make sure that free tier eligible has been selected:
7. Click the Next button to move to Step #2.
8. You will be taken to a Service Access configuration form. Select Create and use new service role and name it aws-elasticbeanstalk-service-role. You will then need to set the EC2 instance profile to the aws-elasticbeanstalk-ec2-role created earlier.
9. Click the Skip to Review button as Steps 3-6 are not applicable.
10. Click the Submit button and wait for your new Elastic Beanstalk application and environment to be created and launch.
11. Click the link below the checkmark under Domain. This should open the application in your browser and display a Congratulations message.

Update Object Ownership of S3 Bucket

1. Go to AWS Management Console
2. Search for S3 and click the S3 service.
3. Find and click the elasticbeanstalk bucket that was automatically created with your environment.
4. Click Permissions menu tab
5. Find Object Ownership and click Edit
6. Change from ACLs disabled to ACLs enabled. Change Bucket owner Preferred to Object Writer. Check the box acknowledging the warning.
7. Click Save changes.

Create an IAM User

1. Search for the "IAM Security, Identity & Compliance Service"
2. Click "Create Individual IAM Users" and click "Manage Users"
3. Click "Add User"
4. Enter any name you’d like in the "User Name" field.
5. Click "Next"
6. Click "Attach Policies Directly"
7. Search for "beanstalk"
8. Tick the box next to "AdministratorAccess-AWSElasticBeanstalk"
9. Click "Next"
10. Click "Create user"
11. Select the IAM user that was just created from the list of users
12. Click "Security Credentials"
13. Scroll down to find "Access Keys"
14. Click "Create access key"
15. Select "Command Line Interface (CLI)"
16. Scroll down and tick the "I understand..." check box and click "Next"