Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 22, 2021 12:40 am GMT

How to deploy a nextjs app to AWS ECS with Github action

I want to deploy an application to AWS. In the first time, I was overwhelmed with the architecture of AWS and couldn't find tutorials for people without knowledge AWS. So I wrote this post for people who don't want to spend too much time on cloud.

Basic concepts

AWS ECR

AWS ECR is where consists of all encrypted docker images. AWS ECS will consume these docker images.

AWS ECS

AWS ECS controls the way your images is run. It has 3 main concepts: cluster, service, task definitions.

  • Cluster: the center of ECS that consist of services, tasks.
  • Service: help you control tasks how task run, how many tasks will run, etc.
  • Task definitions: where you can add docker image.

AWS EC2

You can think it helps us secure and computes the size of our applications. We can restrict IPs that have permission to access our application.

I'm going to use this flow to deploy my next app.

Flow

Setup project

Next app

  • Let's run this command to initiate a next app with create-next-app:
npx create-next-app --typescript
  • Give it a name: demo-deploy hit enter and wait for it runs.

  • We need to create a docker file for our app. Let's do it:

FROM node:16-alpine3.11WORKDIR /demo-deployENV PORT 80COPY . /demo-deployRUN npm installCMD ["npm", "run", "dev"]

Setup AWS

Create IAM user

We have to have an account in order to interact with AWS console. You need to create a IAM user.

Setup AWS ECS
  • You have to setup an IAM user Administrator, a key pair for EC2 in order to unlock ECS. Click here and do as instructed.

Administrator

And hit Administrator to create a couple of access key - access secret we need to use later.
Access Key

  • We're going to create cluster, service and task definition for AWS ECS. Click here in order to move on the console screen.

Select Create Cluster then choose EC2 Linux Networking,
click Next step. There are three important things you need to set up as the image below.

ECS Cluster

Note: key pair which you have just created in previous steps.

Click Create new Task Definition select EC2

Demo Task

Hit Add container and config like the image below. The first time image we set null temporary.
It will be updated by the image from ECR that was uploaded through Github action.

Demo container

Finally, we will create service:
Demo service

Setup Github action
  • In the nextjs app we're going to create config file .github/workflows/pipeline.yml.
name: Deploy to Amazon ECSon:  release:    types: [created]env:  AWS_REGION: ap-northeast-1 # set this to your preferred AWS region, e.g. us-west-1  ECR_REPOSITORY: demo-deploy # set this to your Amazon ECR repository name  ECS_SERVICE: demo-service # set this to your Amazon ECS service name  ECS_CLUSTER: demo-cluster # set this to your Amazon ECS cluster name  ECS_TASK_DEFINITION:    .aws/task-definition.json # set this to the path to your Amazon ECS task definition    # file, e.g. .aws/task-definition.json  CONTAINER_NAME:    demo-container # set this to the name of the container in the    # containerDefinitions section of your task definitiondefaults:  run:    shell: bashjobs:  deploy:    name: Deploy    runs-on: ubuntu-latest    permissions:      packages: write      contents: read    steps:      - name: Checkout        uses: actions/checkout@v2      - name: Configure AWS credentials        uses: aws-actions/configure-aws-credentials@13d241b293754004c80624b5567555c4a39ffbe3        with:          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}          aws-region: ${{ env.AWS_REGION }}      - name: Login to Amazon ECR        id: login-ecr        uses: aws-actions/amazon-ecr-login@aaf69d68aa3fb14c1d5a6be9ac61fe15b48453a2      - name: Build, tag, and push image to Amazon ECR        id: build-image        env:          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}          IMAGE_TAG: ${{ github.sha }}        run: |          # Build a docker container and          # push it to ECR so that it can          # be deployed to ECS.          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG          echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"      - name: Fill in the new image ID in the Amazon ECS task definition        id: task-def        uses: aws-actions/amazon-ecs-render-task-definition@97587c9d45a4930bf0e3da8dd2feb2a463cf4a3a        with:          task-definition: ${{ env.ECS_TASK_DEFINITION }}          container-name: ${{ env.CONTAINER_NAME }}          image: ${{ steps.build-image.outputs.image }}      - name: Deploy Amazon ECS task definition        uses: aws-actions/amazon-ecs-deploy-task-definition@de0132cf8cdedb79975c6d42b77eb7ea193cf28e        with:          task-definition: ${{ steps.task-def.outputs.task-definition }}          service: ${{ env.ECS_SERVICE }}          cluster: ${{ env.ECS_CLUSTER }}          wait-for-service-stability: true

You only have to change some values in env: that you just created in ECS steps and a value for AWS_REGION.

  • Create a file json .aws/task-definition.json. You need to go to the ECS console hit Task Definitions and copy content from JSON tab then paste it to task-definition.json.

  • Create new repo on Github with name demo-deploy.
    Then hit Settings -> Secrets, create new secret for this repo with name AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY that you created in Setup AWS ECS step.

Secrets

Release repo, confirm result

  • We need to commit code to the remote repo. And trigger an action release then Github action will deploy to AWS ECS.

Github action

  • We need to come back AWS ECS, access the service we just created before.
    Success service

  • Hit the content in task tab we will see
    Success task

  • Click id in EC2 instance id we will redirect to EC2 console.

EC2 instance

  • Click Open address in Public IPv4 DNS we are able to view our app.

Next app

If it doesn't work, you will have to change https -> http or see the VPC ID in EC2 instance and go to Security group in order to add Inbound rules.

Security group

I hope this guide was helpful for those of you looking to deploy a next app to AWS ECS. Feel free to refer source code .


Original Link: https://dev.to/thangphan37/how-to-deploy-a-nextjs-app-to-aws-ecs-with-github-action-3gn4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To