How to deploy affected NX projects to AWS S3 using Github Actions

Lucas Melo - Oct 21 - - Dev Community

First of all, if you don’t know what Nx Workspaces is, I recommend checking it out and learning more! It’s a great tool, especially for monorepos.

In this section of the tutorial, we have an example of how to deploy an application to Netlify.

In this tutorial, I’ve brought details on how to deploy to AWS S3 using GitHub Actions.

1. Create a bucket on S3 with all the necessary configurations for a public page.
2. Set up a role for your application to have permission to modify the bucket’s content.
3. Continue setting up your ci.yml file. I used the following configuration:

Remember to update your AWS credentials

name: CI

on:
  push:
    branches: [main]

permissions:
  id-token: write
  actions: read
  contents: read

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Cache node_modules
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci --legacy-peer-deps
      - uses: nrwl/nx-set-shas@v4

      - run: npx nx affected -t test build build-storybook

      - name: Install AWS CLI
        uses: unfor19/install-aws-cli-action@v1
        with:
          version: 1

      - name: Configure aws credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: <ROLE>
          role-session-name: <ROLE_NAME>
          aws-region: <AWS_REGION>

      - uses: nrwl/nx-set-shas@v4
      - run: npx nx affected -t deploy
Enter fullscreen mode Exit fullscreen mode

With this configured, all affected applications that have the deploy command will be running. Now, let’s create the deploy command for the applications.

Go to your application's project.json and add the new command.
You need to locate the folder where the build is generated (in my case, dist/apps/) and the bucket where the upload will be done.

"targets": {
    "deploy": {
      "executor": "nx:run-commands",
      "options": {
        "command": "aws s3 sync dist/apps/<YOUR APP> s3://<BUCKET_NAME>/ --delete"
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

With this, the deployment of affected applications should work perfectly. This tutorial could have saved me a few hours of research looking for a way to do this.

Thank you for reading ;)

. . .