DEV Community: Sonia

Deploy a Next.js application on AWS using CDK & Fargate

Sonia — Wed, 08 Sep 2021 11:55:50 +0000

What is Fargate ?

Why Next.js on AWS ?

The Next.js documentation says :

The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js

Well, if you are just getting started with your project, i will say go for Vercel.

But in my case, i had all my projects on AWS using CDK, and i don't wanted to have to manage my Next.js app on another platform.

Let's get started

Let's create the main folder of the project

mkdir nextJsOnAws
cd nextJsOnAws

NextJS part

npx create-next-app

and name it the way you want (i named it front)

We are going to create a Dockerfile ( i am using the official one from the Vercel documentation)

# Install dependencies only when needed

FROM node:alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed

FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline

# Production image, copy all the files and run next

FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001


COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

CMD ["yarn", "start"]

CDK part

Let's create a new CDK project on a dedicated folder

mkdir cdkPart
cd cdkPart
cdk init --language typescript

Then let's install the package we need

npm install @aws-cdk/aws-ec2 @aws-cdk/aws-ecs @aws-cdk/aws-ecs-patterns

In the lib folder, a file was created called cdk_part-stack, open it and complete it like this

import * as cdk from '@aws-cdk/core';
import * as ec2 from "@aws-cdk/aws-ec2";
import * as ecs from "@aws-cdk/aws-ecs";
import * as ecs_patterns from "@aws-cdk/aws-ecs-patterns";
import { DockerImageAsset } from "@aws-cdk/aws-ecr-assets";

export class CdkPartStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

 const APP_PORT = 3000
 const pathToDockerFile = "../front"

    const vpc = new ec2.Vpc(this, "MyVpc", {
      maxAzs: 2,
    });

    const taskDefinition = new ecs.FargateTaskDefinition(this, "MyTaskDefinition", {
      memoryLimitMiB: 512,
      cpu: 256,
    });

    const dockerFile = new DockerImageAsset(this, 'DockerFileAsset', {
      directory: pathToDockerFile,
      file: 'Dockerfile',
    });

    // cdk will build it and push it to en ecr repository
    const image = ecs.ContainerImage.fromDockerImageAsset(dockerFile);

    const container = taskDefinition.addContainer("MyContainer", {
      image,
      // store the logs in cloudwatch 
      logging: ecs.LogDriver.awsLogs({ streamPrefix: "myexample-logs" })
    });

    container.addPortMappings({
      containerPort: APP_PORT, 
    });

    const cluster = new ecs.Cluster(this, "MyECSCluster", {
      clusterName: "MyECSCluster",
      containerInsights: true,
      vpc,
    });

    const securityGroup = new ec2.SecurityGroup(this, `My-security-group`, {
      vpc: vpc,
      allowAllOutbound: true,
      description: 'My Security Group'
    });

    securityGroup.addIngressRule(ec2.Peer.anyIpv4(), ec2.Port.tcp(APP_PORT));

    const fargateService = new ecs_patterns.ApplicationLoadBalancedFargateService(this, 'MyFargateService', {
      cluster,
      publicLoadBalancer: true,
      cpu: 256,
      desiredCount: 1,
      memoryLimitMiB: 512,
      taskDefinition,
      securityGroups: [securityGroup]
    })

    const scalableTarget = fargateService.service.autoScaleTaskCount({
      minCapacity: 1,
      maxCapacity: 2
    })

    scalableTarget.scaleOnCpuUtilization('cpuScaling', {
      targetUtilizationPercent: 70
    })
  }
}

Now time for deploy

cdk synth

Then after that :

cdk deploy

The deploy can be a little long , so be patient :)

Let's go to the console

After the deploy is completed, go to your AWS Console > ECS (for Elastic Container Service)

Click on MyECSCluster

Click on the service

Select the Task Tab

Click on the Task

You can see that your container is ... RUNNING :)

Let's see the app !!!

Go to the console > EC2 > LoadBalancer and copy the DNS name of your load balancer

Paste it in your browser and ...

Congrats ! You deployed your Next.js app with Fargate and it's running :)

Cleaning

Don't forget to clean after this tutorial, i don't want you to have a huge bill on AWS!

cdk destroy

I hope you liked this tutorial, i will try my best to post some articles about AWS.

If you want, you can follow me on Twitter :)

Create a simple GraphQL API with Node JS

Sonia — Sun, 14 Feb 2021 10:21:43 +0000

I used for the first time GraphQL a few days ago and i wanted to share with you what i learned.

In this project, we are going to use GraphQL for one of my favorite Tv Shows : Friends !

Let's get started

Create a new project

mkdir mygraphQlApi
cd mygraphQlApi
npm init

We are going to use :

npm install koa --save

npm install koa-bodyparser koa-helmet koa-router --save

Knex and Knex CLI

npm install knex -g

npm install knex@0.13.0 -g

Postgres

npm install pg --save

GraphQL

npm install graphql graphql-tools apollo-server-koa --save

Create the Database

We are going to connect to Postgres

sudo -u postgres psql postgres

Then create the database

postgres=# CREATE DATABASE friends;

List your databases to see your new DB just created

postgres=# \list

                                   List of databases
    Name     |  Owner   | Encoding |   Collate   |    Ctype    |   Access privileges   
-------------+----------+----------+-------------+-------------+-----------------------
 friends     | postgres | UTF8     | fr_FR.UTF-8 | fr_FR.UTF-8 | 
 postgres    | postgres | UTF8     | fr_FR.UTF-8 | fr_FR.UTF-8 | 
 template0   | postgres | UTF8     | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres          +
             |          |          |             |             | postgres=CTc/postgres
 template1   | postgres | UTF8     | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres          +
             |          |          |             |             | postgres=CTc/postgres

Finally create a user with a password

CREATE USER myusername WITH PASSWORD 'password';

Connect to your DB

psql -h localhost -d friends -U myusername
Password for user myusername: 


friends=>

Everything is fine !

Type \q to quit.

Back to the project

We are going to create a folder called knex and some subfolders for our seeds, migrations and queries.

mkdir knex
mkdir knex/migrations
mkdir knex/seeds
mkdir knex/queries

Then, to store some data, we are goind to create a folder called data, with a cast.js file inside that folder.

mkdir data
cd data
touch cast.js

Initiate the project

knex init

This command will create a file called knex.js

Let's modify the file like this :

module.exports = {
 development: {
  client: 'pg',
  connection: 'postgres://username:password@localhost:5432/database',
  migrations: {
      directory: __dirname + '/knex/migrations',
    },
    seeds: {
      directory: __dirname + '/knex/seeds'
    }
 }
};

NB : Replace the username, password and database value with the right ones.

Now your project should look like this

The Database is empty !

For now, you have a database, but with no data ! Let's fix that !

First , let's create a table on the DB.

knex migrate:make cast
Using environment: development
Created Migration: /path/of/your/project/knex/migrations/20210207185018_cast.js

This command is going to create a migration file, let's modify it like this

exports.up = (knex) => Promise.all([
    knex.schema.createTable('cast', function(table) {
        table.increments();
        table.string('firstName').notNullable();
        table.string('lastName').notNullable();
        table.string('Food').notNullable();
    })
]);

exports.down = (knex) => {
return knex.schema.dropTable('cast');
};

Now let's "run" the migration

knex migrate:latest --env development
Using environment: development
Batch 1 run: 1 migrations

Now that we have a table, let's fill it with some data.
We are going to "seed" the table.

knex seed:make cast_seed
Using environment: development
Created seed file:/path/of/your/project/knex/seeds/cast_seed.js

In the data folder, go to your cast.js file and complete it like this :

module.exports = [
    {
      "firstName": "Chandler",
      "lastName": "Bing",
      "Food": "Cheesecake"
    },
    {
        "firstName": "Monica",
        "lastName": "Geller",
        "Food": "Mint Cookies"
    },
    {
        "firstName": "Joey",
        "lastName": "Tribiani",
        "Food": "Pizza"
    }
];

Complete your seed file like this to seed the DB with the data from your file.

const castData = require('../../data/cast');

exports.seed = function(knex) {
  // Deletes ALL existing entries
  return knex('cast').del()
    .then(function () {
      // Inserts seed entries
      return knex('cast').insert(castData);
    });
};

Let's now run this command

knex seed:run --env development
Using environment: development
Ran 1 seed files

Let's connect to the DB, to see our data

psql -h localhost -d friends -U myusername
Password for user myusername: 

friends=> SELECT * FROM public.cast;
 id | firstName | lastName |    Food     
----+-----------+----------+-------------
  1 | Chandler  | Bing     | Cheesecake
  2 | Monica    | Geller   | MintCookies
  3 | Joey      | Tribiani | Pizza
(3 rows)

Congrats, you have now a DB, with a table called cast, and some data in that table!

Next step, the GraphQL part !

GraphQL part

Now let's make the GraphQL part.

Let's create a file called index.js

touch index.js

It should look like this

const Koa = require('koa');
const { ApolloServer, gql } = require('apollo-server-koa');
const queries = require('./knex/queries/queries.js');

const typeDefs = gql`
  type Cast {
    firstName: String
    lastName: String
    Food: String
  }
  type Query {
    cast(firstName: String, lastName: String, Food: String): [Cast]
  }
`;

const schema = {
  typeDefs,
  resolvers: {
    // Prototypes for GET 
    Query: {
      cast: (_, filters) => queries.getCast(filters),
    }
  }
}

const server = new ApolloServer(schema);

const app = new Koa();
server.applyMiddleware({ app });

app.listen({ port: 3000 }, () =>
  console.log(`🚀 Server ready at http://localhost:3000${server.graphqlPath}`),
);

As you can see line 3, we are using queries , let's create them :

In the knex folder, we created a folder called queries. Let's create a file called queries.js

cd knex/queries
touch queries.js

const knex = require('../connect');

function getCast(filters) {
  return knex('cast')
  .select('*')
  .where(filters);
}

module.exports = {
  getCast
};

Let create the connect file used on the first line

cd ../
touch connect.js

const environment = process.env.NODE_ENV || 'development';
const config = require('../knexfile.js')[environment];

module.exports = require('knex')(config);

Now, let's start our server

node index.js
🚀 Server ready at http://localhost:3000/graphql

You should see something like this

Query some data

Let's try to query some data

# Write your query or mutation here
query Everyone {
  cast {
    firstName
  }
}

Click on the Play button

{
  "data": {
    "cast": [
      {
        "firstName": "Chandler"
      },
      {
        "firstName": "Monica"
      },
      {
        "firstName": "Joey"
      }
    ]
  }
}

Tadaaaam ! You have made your first query with GraphQL !

Let's add some characters

But wait a minute ... where is Ross ? and Rachel ? And Phoebe ?

We need to add them to our database.

Let's use Mutations for that.

In your index.js file, let's update the schema to add Mutations

# index.js
const typeDefs = gql`
  type Cast {
    firstName: String
    lastName: String
    Food: String
  }
  type Query {
    cast(firstName: String, lastName: String, Food: String): [Cast]
  }
  type Mutation {
  addSomeone(firstName: String, lastName: String, Food: String): [Cast]
}
`;

const schema = {
  typeDefs,
  resolvers: {
    // Prototypes for GET 
    Query: {
      cast: (_, filters) => queries.getCast(filters),
    },
    // Prototypes for PUT
    Mutation: {
        addSomeone: async (_, cast) => {
          const newOne = await queries.addSomeone(cast);

          return newOne;
        }
      }
  }
}

Then in the queries.js file, let's create the actual queries for those mutations.

# queries.js

const knex = require('../connect');

function getCast(filters) {
  return knex('cast')
  .select('*')
  .where(filters);
}

function addSomeone(cast) {
    return knex('cast')
    .insert({
      firstName: cast.firstName,
      lastName: cast.lastName,
      Food: cast.Food
    })
    .returning('*');
}

module.exports = {
  getCast,
  addSomeone
};

Restart our server and write a Mutation to add Ross

mutation addRoss{
  addSomeone(firstName: "Ross", lastName: "Geller", Food: "Turkey Sandwich") {
    firstName
  }
}

Hit the play button

{
  "data": {
    "addSomeone": [
      {
        "firstName": "Ross"
      }
    ]
  }
}

Let's query all the cast once again

# Write your query or mutation here
query Everyone {
  cast {
    firstName
  }
}

Click on play ... and cross fingers

{
  "data": {
    "cast": [
      {
        "firstName": "Chandler"
      },
      {
        "firstName": "Monica"
      },
      {
        "firstName": "Joey"
      },
      {
        "firstName": "Ross"
      }
    ]
  }
}

Yeaaaah ! Now you can add all the others !

Conclusion

I just started learning GraphQL so i probably made some mistakes, i am still figuring out how to make everything work but i wanted to share this first milestone with you !

If you have some tips or resources to help me keep digging the subject, drop them on the comments !

The full code is here on GIthub : Code

Do you suffer with the "too-many-tabs" syndrome ? OneTab is the solution !

Sonia — Fri, 25 Dec 2020 19:20:33 +0000

Tabs, tabs, tabs

I always like to read stuff, and listen to podcasts.

So when i find something i'm interested in, i open a tab on my browser and i leave it there for ... later.

And then, i move on to the next thing, and i find another super article on Hashnode.

So i open a new tab, to read it ... later.

And someone on Twitter posts a link to a new podcast episode, so i open a new tab on my browser and save it for later.

And in the same time, i have to review some PRs on Github.

So i open a tab for each one, to remember to do it ... later.

And someone on Slack sends me a new Jira Card, so i open a new tab for it ...

And so on ...

Before lunch, my browser looks like this :

And if you use Chrome, you know that more and more tabs === more and more RAM.

Sometimes, my computer slows down, just because i have too many tabs...

THE SOLUTION : OneTab extension

Someone at work recommended me this extension after seeing my shared screen on a Zoom meeting ...

One Tab is an extension available for Chrome and Firefox.

Once installed, when you click on it ... tadaaaam :

It takes all your tabs and make it just one which contains the list of all your links !

And also, you can organise your links by naming the lists, so you can have a list with all your "Work" links, and another one for "Tech stuff" ...

Try it !

Here are the links to download the extension :

On Chrome
On Firefox

And their Website

Automating your routine with Golang and a CLI

Sonia — Mon, 30 Nov 2020 15:09:27 +0000

I had this idea after reading the article of @Chris Bongers about automating morning routine

I read that article and loved the idea to automate some tasks that we do everyday.

So i decided to take a step further and create a CLI who is gonna be my "assistant" to make all kind of small tasks.

In this tutorial, we are going to make a CLI in Golang to do two things :

Open tabs on my browser (like Chris Bongers did with a script but we are gonna do it with Golang)
Create and saves txt notes from the CLI.

Requirements

You must have a little knowledge about Golang to follow this tutorial.

To create the CLI, we are going to use Cobra

Cobra is a library for creating CLI in golang.

Create the project

Now we can start.

We are going to create a new project on our computer

mkdir mycli
cd mycli
go mod init mycli
go get -u github.com/spf13/cobra/cobra

init the CLI

Now that we have cobra installed, we can start creating our cli

The pkg-name here is important because it's going to be the name you invoke when calling your CLI. I'm gonna call mine Homer

cobra init --pkg-name homer

After executing that command , you can see that your project-folder looks like this

▾ mycli/
  ▾ cmd/
     root.go
   main.go

Create our first command

Now let's add our first command to our cli

cobra add <commandName>

Our first command is to open tabs in the morning, so i am gonna type

cobra add morning

If you look at your files structure, a new file called morning.go has been created.
Every time you are gonna add a command, a new file with the name of your command is gonna be created in the cmd folder.

▾ mycli/
  ▾ cmd/
     root.go
     morning.go
   main.go

Implement the morning command

Now, open the file called morning.go

package cmd

import (
    "fmt"

    "github.com/spf13/cobra"
)

// morningCmd represents the morning command
var morningCmd = &cobra.Command{
    Use:   "morning",
    Short: "A brief description of your command",
    Long: `A longer description that spans multiple lines and likely contains examples
and usage of using your command. For example:

Cobra is a CLI library for Go that empowers applications.
This application is a tool to generate the needed files
to quickly create a Cobra application.`,
    Run: func(cmd *cobra.Command, args []string) {
        fmt.Println("morning called")
    },
}

func init() {
    rootCmd.AddCommand(morningCmd)

    // Here you will define your flags and configuration settings.

    // Cobra supports Persistent Flags which will work for this command
    // and all subcommands, e.g.:
    // morningCmd.PersistentFlags().String("foo", "", "A help for foo")

    // Cobra supports local flags which will only run when this command
    // is called directly, e.g.:
    // morningCmd.Flags().BoolP("toggle", "t", false, "Help message for toggle")
}

We are going to work inside the var morningCmd that represents our command.

First, complete the use and the descriptions (long and short) of your command.

Then, inside the Run , we are going to implement the actual code that we want to run when we are going to call the command : homer morning

package cmd

import (
    "bufio"
    "fmt"
    "os"

    "github.com/spf13/cobra"
    "github.com/pkg/browser"
)

// morningCmd represents the morning command
var morningCmd = &cobra.Command{
    Use:   "morning",
    Short: "Open a list of urls",
    Long: `Url opens a list of urls defined in a txt file`,
    Run: func(cmd *cobra.Command, args []string) {
        fmt.Println("Good morning ! Homer is opening your tabs")
        // Open the file.
        f, _ := os.Open("/path/to/your/tabs.txt")
        // Create a new Scanner for the file.
        scanner := bufio.NewScanner(f)
        // Loop over all lines in the file and print them.
        for scanner.Scan() {
          line := scanner.Text()
          // use browser to Open the url
          browser.OpenURL(line)
        }
    },
}

Great !
Now let's build our app

go install homer

And try our command

homer morning
Good morning ! Homer is opening your tabs

Tadaaaaaam !

Let's add another command

Well, now let's go further and add another command.

Let's add a command to take quick notes.

cobra add notes

A new file called notes.go is now available.

Let's implement the code

package cmd

import (
    "fmt"
    "os"
    "os/exec"

    "github.com/spf13/cobra"
)

// notesCmd represents the notes command
var notesCmd = &cobra.Command{
    Use:   "notes",
    Short: "A command to take quick notes",
    Long: `This command helps you take quick notes by opening a file .txt`,
    Run: func(cmd *cobra.Command, args []string) {
        fmt.Println("Homer is opening a new note")
        // create a folder for the notes if doesn't exists
        _ = os.Mkdir("./notes", 0755)
        // open the editor of your choice => nano for me
        // the name of the file will be your argument
        // homer notes myfile will open a file called myfile.txt 
        editorCmd := exec.Command("nano", fmt.Sprintf("./notes/%v.txt", args[0]))
        editorCmd.Stdin = os.Stdin
        editorCmd.Stdout = os.Stdout
        editorCmd.Stderr = os.Stderr

        err := editorCmd.Run()
        if (err != nil) {
            fmt.Println(err)
        }
    },
}

func init() {
    rootCmd.AddCommand(notesCmd)
}

Now, build the app : go install homer

And run the command

homer notes mynote

Just write your note and save it.

All your notes will be saved inside the folder notes.

I chose to put it inside the project (./notes) but you can choose to create it wherever you want on your computer.

And now ?

Now you have a new assistant called homer that can do multiple tasks for you.

So just think about a new task you want to automate, and make a new command with cobra.

For example, you can add subcommands to list all your notes, to find a particular note, to delete a note ...

Have fun with your new assistant :)