DEV Community

es404020
es404020

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.






Enter fullscreen mode Exit fullscreen mode

Oldest comments (7)

Collapse
 
aeshevch profile image
Александр Шевченко • Edited

Greetings! I do everything according to your instructions, but I get an error at the "copy file via ssh key" stage

Image description

If I run deploy.sh manually on the server, it works fine..

.github/workflows/docker.yml:

name: client
on:
  push:
    branches: master
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: '14.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:  92.255.108.95
          PORT:  22
          USERNAME:  root
          PASSWORD: ******
          command_timeout: 100m
          script: sh deploy.sh
Enter fullscreen mode Exit fullscreen mode
Collapse
 
aeshevch profile image
Александр Шевченко

hm.. Looks like appleboy/scp-action@master has no script option

Collapse
 
es404020 profile image
es404020

It has a script option

Collapse
 
aeshevch profile image
Александр Шевченко

PS: I deleted "ls -la out" because it was causing the error "ls: cannot access 'out': No such file or directory"

Collapse
 
es404020 profile image
es404020

Sorry for the late response .Where you able to finally fix it ?

Collapse
 
aeshevch profile image
Александр Шевченко

The error was quite stupid - there was not enough space on the server :)

Thread Thread
 
es404020 profile image
es404020

O that is very common i usually add this
"docker system prune -af" in my script file to remove all unused container