Dockerized Next.js on SSH server using Github Action.

Have you ever wondered how to setup Docker on SSH server, if NO this tutorial is for you .In case you want to get a basic understanding about docker you can click this link to learn .

step 1:
SSH into server by using

ssh root@xxx.xxx.xxx.xxx –p XXXX

root - stands for the user
xxx.xxx.xxx : stands for the IP address of the remote server
-p : indicate a reference to the port the server is on
XXXX : port number

step 2:
Install docker on server

 curl -fsSL https://get.docker.com -o get-docker.sh
 DRY_RUN=1 sh ./get-docker.sh
 sudo sh get-docker.sh

After typing the above command type

docker

to confirm if docker is now available on the remote server .

step 3:
In the root of your SSH server create a deploy.sh script. In linux this is called shell script.

touch deploy.sh

After this is done we are going to write some shell script in our .sh file using the linux vi editor.

vi deploy.sh

The next step for you is to copy the code and past into the vi editor. But to do that you have to press the letter "a" to enable insert mode on the vi edit.

if [ -d "$DIR" ]; then

  cd Client
  echo "git pull project"
  git pull https://username:password@github.com/XXXXXX/Client.git

else 

  git clone https://username:password@github.com/XXXXXX/Client.git
  cd Client

fi

docker build . -t client
docker run -p 2000:3000  client

Dir : The Variable name of a folder or Directory we are looking for .

The if statement checks if the directory already exits .If it does

cd Client

which switch to this directory, then pulls the newly updated code into this directory.

In other to login to git and pull a repo

git pull https://username:password@github.com/XXXXXX/yyyy.git

`

username: your github username

password : your github password

XXXXXX: your github username it maybe the same has your username or different. If the project is open source or you just a contributor it has to the the username of the person who setup the project.

yyyy.git : repo name

Moving on, if else statement then simply ,git clone the project and change it directory to the project name .

To build and run the image the image we use

docker build . -t client
docker run -d -p 2000:3000 client

Note in our Next.js project we would include a Dockerfile file in the root of our project .This is what the build command would depend on. The -t means give it a tag name for easy identification.

The docker run command -p helps expose the internal running port to the outside port . Port 2000 is the server port while port 3000 is the port running inside the docker container.

****Some docker commands

docker ps: currently running container
docker ps -a : History of all active and not active container
docker stop containerID : To stop active container using the container ID

docker logs containerID: So view how the code base is running inside the container. It a way of monitoring the container

To exit insert mode on vi editor press escape key followed by shift column and type wq(save and quite)

Finally run the below command to make the deploy.sh file executable file


chmod u+x deploy.sh


Step 3

Add docker to your next.js root folder. To do this create a Dockefile file name .Add the code below into the Dockerfile.

Note filename is Dockerfile no extension

`

FROM node:14.17-alpine
RUN mkdir -p /home/app/ && chown -R node:node /home/app
WORKDIR /home/app
COPY --chown=node:node . .

USER node

RUN yarn install --frozen-lockfile
RUN yarn build

EXPOSE 3000
CMD [ "yarn", "start" ]
```

``

Let break the above script 

FROM node:14.17-alpine : we are pull very small linux image called alpine into our container. Remember our container need an host Operating system.
RUN mkdir -p /home/app/ && chown -R node:node /home/app: you dont need to worry yourself about this command

RUN yarn install --frozen-lockfile :yarn install and froze out package.lock.json file or yarn.lock.json file

RUN yarn build: To build the project just like next build
EXPOSE 3000: Expose the port 3000 to outside the container
CMD [ "yarn", "start" ]:To start up the project in the container


Step 4:
This is our final step, this involves creating our .github/docker.yaml file in the root of our project.

Note docker.yaml this could be any name 

``

```
name: client
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy next site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2.3.1

      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'

      - name: Install Project Dependencies
        run: npm install



      - name: Build
        run: npm run build



      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  XXXXXXX
          PORT:  XXXXX
          USERNAME:  XXXXX
          PASSWORD: XXXXXX
          command_timeout: 100m
          script: sh deploy.sh
```


To understand the above yaml file you can checkout this [Next CI/CD github actions](https://dev.to/es404020/next-js-static-html-deployment-to-ssh-server-using-github-action-3fma ) .
The only section I would explain is the script key. The script run the deploy.sh file we created in our server .So sorry that the post is too long it is just necessary.

That all .Thanks for reading.