updated CI with a better way of building and pushing docker images

.github/workflows/ci.yml

@@ -68,19 +68,31 @@ jobs:
         #2. Use `install-ci-test` to do it in a single command, see https://docs.npmjs.com/cli/v8/commands/npm-install-ci-test
         run: npm install-ci-test
 
-  docker:
-      name: Push Docker Image
-      runs-on: ubuntu-latest
+  docker-hub:
+      name: Build and Push Image to Docker Hub
       needs: [lint, dockerfile-lint, unit-tests]
+      runs-on: ubuntu-latest
       steps:
-        - name: Check out code
-          uses: actions/checkout@v2
-
-        - name: Build Docker Image
-          run: docker build -t mdmytrenko/fragments:latest .
-
-        - name: Authenticate
-          run: docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_TOKEN }}
-
-        - name: Push Docker Image
-          run: docker push mdmytrenko/fragments
+        # Set up buildx for optimal Docker Builds, see:
+        # https://github.com/docker/setup-buildx-action
+        - name: Set up Docker Buildx
+          uses: docker/setup-buildx-action@v2
+
+        - name: Login to DockerHub
+          uses: docker/login-action@v2
+          with:
+            username: ${{ secrets.DOCKERHUB_USERNAME }}
+            password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+        # Build and Push an Image to Docker Hub
+        - name: Build and push
+          env:
+            DOCKERHUB_REPO: mdmytrenko/fragments
+            # Define current git commit's sha
+            # https://docs.github.com/en/actions/learn-github-actions/contexts#github-context
+            SHA_TAG: sha-${{ github.sha }}
+          uses: docker/build-push-action@v4
+          with:
+            push: true
+            # Use 3 tags: :latest-commit-sha, :main, and :latest
+            tags: ${{ env.DOCKERHUB_REPO }}:${{ env.SHA_TAG }}, ${{ env.DOCKERHUB_REPO }}:main, ${{ env.DOCKERHUB_REPO }}:latest