Creating a React deployment pipeline with AWS S3 and GitHub Actions

In this article, we will explore how to deploy a React project using Amazon services and manage the CI/CD process using GitHub Actions. We will address questions such as how to deploy the project and how to manage the CI/CD process using GitHub Actions, using an example project.

What is AWS S3?

At its core, AWS S3 (Simple Storage Service) is a storage service provided by Amazon that allows hosting static files. Generally, this service is used for hosting files such as images, videos, and more. Additionally, React builds do not require a web server on the React side, so they can be hosted on this service. If desired, different services provided by Amazon can also be chosen instead of S3.

a) Creating an S3 Bucket

Having the bucket name on Amazon to be the same as your domain name can be highly beneficial for future use with the Route 53 service.

After creating the bucket, you need to open the necessary permissions from the "Permissions" tab.

In the initial stage, by setting up the bucket in this way, we are preparing it for the installation of our project.

What is GitHub Actions?

Before defining GitHub Actions, it would be more appropriate to answer the questions of why we need a CI/CD workflow in a project and what contributions it provides.

As the software ecosystem continues to grow, managing the development process, ensuring code quality, and minimizing disruptions during updates have become crucial considerations. There are various tools available to manage these processes, and GitHub Actions is one of them.

Regarding our project, instead of manually uploading our React project to the S3 bucket after creating it, we will use the GitHub Actions service to automate this process.

If you're not using GitHub Actions, you can simply enable static website hosting in the properties section of the bucket and upload your React project into it.

a) Preparing the GitHub Actions .yml file

First, we create our project on GitHub.

Afterwards, we clone the created repository to our local machine and place our React application inside it.

Finally, we need to prepare a .yml file that specifies how the GitHub Actions process will be executed and which actions will be performed. We create this file within our project, under the path .github/workflows/.

You can refer to the example .yml file below, which we have prepared for the sample React project:

#Oluşturduğumuz actionun ismini belirtiyoruz
name: thinkerfoxTestClient 
#Aksiyonun hangi durumda tetikleneceğini belirtiyoruz
#Bu örnekte master brachine her push işleminde action devreye girecek
on: 
  push:
    branches: 
      - master
#Jobs kısmında action tarafından yapılacak işleri beli
jobs:
  test-project-push:
    #İşlemlerin gerçekleştirilmesi için ayağa kalkacak işletim sistemi
    runs-on: ubuntu-latest 
    #Çalışacak her bir adımı steps bu steplerın parametlerını de wıth ıle tanımlıyoruz.
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: "12.10.0"
      # Bu aşamadan sonrası react yazan kişilerin genelde kullandıkları komutlar
      - name: Install Dependencies
        run: yarn

      - name: List Installed Dependencies
        run: yarn list
        
      # İstenildiği taktirde test süreci de bu steplere dahil edilebilir. 
      # - name: Run Linter
      #   run: yarn lint
      # - name: Run Test
      #   run: yarn test
      # - name: Run Cypress
      #   run: yarn ci:cypress-run
      
      - name: Run Build
        run: yarn build
      #Bu aşamadan sonra derlenen kodun s3 bucketına upload edimesini sağlıyoruz
      #Github Actions tarafında AWS ClI hazır olarak gelmekte 
      - uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete --debug
        env:
          SOURCE_DIR: build
          #Aws te bulunan bucket ismimiz.
          AWS_S3_BUCKET: thinkerfox.website.com
          #Aws tarafından aldığımız s3 tarafına erişim için kullanacağımız keyler 
          #Bu keyleri reponun içinde tutmak yerine github secret hizmetini kullanıyoruz
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: "eu-central-1"

While creating our .yml file, it is important to enter the correct information for the AWS CLI. If you are unsure how to obtain the secret key from your Amazon account, you can learn from this link. For security purposes, instead of storing these keys directly in the .yml file, you can store them in the project's secret store on GitHub. To do this, navigate to the "Settings" tab in your project, create two records named AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, and then reference these records as variables in the .yml file as shown in the example.

Once you have created the .yml file as specified, the action will run every time you push to the master branch. You can control the processes specified in the .yml file through this file.

Once the action is successful, your project will be built and deployed to the S3 bucket. Finally, you need to go to your S3 bucket and activate static web hosting from the properties tab. From the same panel, you can access your project using the endpoint provided by Amazon. If you wish to use a different domain, you can utilize the Route 53 service provided by AWS.

Summary:

In this article, we looked how to manage the CI/CD process of a React project using GitHub Actions and host our project in an AWS S3 bucket at a low cost.

To summarize the process:

Creating an AWS S3 bucket

Setting up the necessary policies

Preparing the .yml file for GitHub Actions

Creating GitHub secrets

Pushing the .yml file and triggering the initial action

Activating static web hosting on the bucket