How to deploy NextJS App with CI/CD [jenkins] [docker] [nginx]

The standards

• Linux (Can you imagine the netflix video streaming with c# and iis windows servers?)

• Docker

• Docker Registry

• Libraries Repository like Nexus, Artifactory, etc

• Some docker orchestrator like Kubernetes

• One app by host/server. Apps should not be close to the ci server

• One app by git repository

• Health check endpoint inside of the app (A simple http controller returning 200/ok) to be able to query if the web app started or not

• Git Webhooks

• Git workflow

• Unit Test is mandatory

• Your apps needs to comply the bible: https://12factor.net specially the #3 which talks about environment variables

  • This is the main part. If your developers and architects don't create applications driven to devops/cloud/linux, implement a devops flow will be a pain!!

• Configuration management to avoid

  • config.env, prod.env files inside of with repository
  • config.env, prod.env files inside the server (a human doing this in the server)

• Don't store files to the disk. Use some service like aws s3. If your app needs the disk to store files, you will not be portable and the devops automation can get complicated.

• One of these CI server strategies:

  1. Agnostic, cross cloud and full control: Jenkins, Travis, Circle CI, Bamboo, Buddy,works, Cloudbees,
  2. Almost ready to use but cloud/service dependent : Aws or Gcp (a lot)

• At least 2 environments if you are working with open source: test and production

  • I'm omitting the "dev" environment because if you are using open source languages (real, not like the language that don't have linux nor mac ide) and docker and linux os as base for your developers, they have everything they need to replicate the entire ecosystem (databases, api, web, monolith, etc) in his localhost with docker compose for example. If your developers are using windows/mac the dev could be required because prod servers are linux based so there is a possibility of error, minimum thanks to docker but exist.
  • Also you can add another environments like staging and uat

• Public domains for your environments. This will facilitate the tests (Q&A Team) if you are not working for the CIA, KGB, Area 51, etc.

  • Like : acme-web-test.mydomain.com (tests) >> acme-web.mydomain.com (prod)
  • To do this you will need a NGINX or some load balancer of your preference
  • Also to no affect the CEO, you could buy another domain for your dev/test apps like: .dev .xyz, etc

• Avoid to have ancient server with pre-configured or pre-installed tolls. Your final goal should be to create all the required infrastructure on each deployment. This will save your money and will give you portability

• Automated integration tests with selenium

This is a summary of all my current experience

I don't have time nor devops team

In this case I advice to use Heroku. Your are using a open source language (nodejs) which is fully supported. Your devops flow will be reduce to:

• Create a heroku and connect it with your github account
• Create a heroku app and register the env variables
• Push to some git branch in github
• Wait some minutes for Heroku to do its job:
  • Listen the git push thank to webhooks
  • Create the disposable linux server
  • Install nodejs
  • Run the standard commands : npm install, npm run build, npm run start
  • Assign you a public http domain ready to use for testing
  • Show you a live devops pipeline to pass to the next environment if you approve it.

The only requirements are:

• env variables usage
• standard nodejs app. I mean if your app needs crazy manual steps to build and start, will be so hard to use heroku or some similar platform
• don't depend of the disk because heroku uses disposable disks

How to implement?

If you are new, this will be complex to do it at first attempt. I advice an incremental iterations.

Lectures

Read this:

• https://stackoverflow.com/a/60780840/3957754
• https://stackoverflow.com/a/53835514/3957754
• https://stackoverflow.com/a/53961939/3957754
• https://stackoverflow.com/a/70159286/3957754
• https://jrichardsz.medium.com/how-to-build-and-deploy-a-net-application-with-jenkins-and-aws-using-devops-automations-518952b6c313
• https://jrichardsz.medium.com/how-to-build-and-deploy-a-net-application-with-jenkins-and-aws-using-devops-automations-518952b6c313

Version #1 : First and minimal

Only for your hello world. Not for production usage.

• Dockerize your app and use environment variables
• One host (digital ocean pod) for your jenkins (no more than 1gb ram)
• if you are not using a specialized balancer like https://docs.digitalocean.com/products/networking/load-balancers/ create 01 pod for nginx or 02 for test/prod
• One host (called app_server) for your next.js app (no more than 1gb ram). Install/configure in this host :
  • docker and enable the docker api with only http (just to try becasue https is the safe option)
  • jenkins agent to receive orders and commands from the jenkins master instance
• Configure the jenkins to listen the webhooks fro github/gitlab/bitbucket, etc

Your devops flow will be:

• Push to some git branch in github
• Wait some minutes for Jenkins to do its job:
  • Listen the git push thank to webhooks
  • Connect to the jenkins agent and perform
    • git clone
    • docker build
    • inject env variables hosted in Jenkins configurations
    • docker run
    • perform health check
    • get the default ipv4 domain of droplet to send it to the team
• Send you a mail notifying the success or failure

Version #2 : Docker registry

Build inside of the final application is not the an option. The recommended strategy is:

• Build the docker image in the ci server or another machine and push it to the docker registry.
• Download the docker image in the target server (app_server)
• Just run

You could use one of these options:

• The official docker registry : https://earthly.dev/blog/private-docker-registry/
• Create an account in https://hub.docker.com
• AWS ECR
• etc

Version #3 : Disposable app_server

To have the app_server pre-configured is the initial step. Research how to create the server using digital ocean apis.

Version #4 : Assign a custom https domain on each deploy

With Nginx or some load balancer. Some weeks ago I did this with Namecheap and EC2 Servers. I will post the post here or in my blog.

Version #5 : Docker Orchestration

Like Kubernetes or AWS Beanstalk

Version #6 : Configuration Management

Using something like:

• Konsul
• Configurator maintained by me.

Next versions

• Improve your jenkins configuratios
• Load balancing for your applications

Note

Don't forget to share what you are learning ;)