Monorepo R+RN, Ch 3

Bloğ ? > Monorepo React + React Native > Ch 3 - Automated Deployment

02 Apr 2021

Automated deployments with AWS and CircleCi

Go on and log in to you AWS console.

Now we will have to,

create IAM users in AWS with S3 rights,
note the access keys,
create an S3 bucket for static web hosting,
and later provide those keys to CircleCI as environment variables.

If you have trouble with this section please take the time to check out the resources below

The chapter “Deployment to AWS” in the this tutorial by Eyup Ferhat Guducu,
and this tutorial by Praveen to do this via Circle CI.
You can also review CircleCi’s deployment examples for AWS and other providers.
- https://circleci.com/docs/2.0/deployment-examples/index.html#aws
- https://circleci.com/docs/2.0/env-vars/#setting-an-environment-variable-in-a-project

We create the CircleCI config file seen below inside our root directory “.circleci/config.yml”.

<root>/.circleci/config.yml

    version: 2.1
    orbs:
     aws-cli: circleci/aws-cli@1.4.1
    jobs:
     build_web_client:
       docker:
         - image: circleci/node:10.16.3
       steps:
         - checkout
         - run:
             name: Install Dependencies
             command: cd web-client && npm install
         - run:
             name: Run build
             command: cd web-client && npm run build
         - persist_to_workspace:
             root: .
             paths:
               - .
     aws_deploy_web_client:
       executor: aws-cli/default
       steps:
         - attach_workspace:
             at: .
         - aws-cli/setup:
             profile-name: monorepo-admin
         - run:
             name: Upload file to S3
             command: cd web-client && aws s3 sync ./build/ s3://monorepo-web-client-production --acl public-read --delete
    workflows:
     version: 2
     build-deploy:
       jobs:
         - build_web_client:
             filters:
                 tags:
                   only: /.*/

         - aws_deploy_web_client:
             requires:
               - build_web_client # Only run deploy job once the build job has completed
             context: AWS_monorepo
             filters:
               branches:
                 only: main # Only deploy when the commit is on the main branch
               tags:
                 only: /.*/

Now that we configured our project’s core, we give it a spin locally, and if all is looking good, time to push our changes.

$ git add . && git commit -m “Init React app w TS, Babel, Eslint, Webpack and CircleCI config”

$ git push -u origin main

Let’s behold the magic of automation.

Login to CircleCI using your version control system,
Create a “Context” within your organization setting to set environment variables
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- AWS_DEFAULT_REGION
find your repo listed underneath projects and click “Set Up Project”
Build with your existing config.yml

Hopefully shortly afterwards you will be greeted by a successful workflow in your pipeline. If you have some troubleshooting to do, don’t worry. It will surely be worth it once it’s up and running.