DEV Community

Deploying Next.js apps to a VPS using Github actions and Docker

Lewis kori on December 17, 2021

Recently, I had to deploy a project to a DigitalOcean droplet. One of the features I really wanted for this particular project was a Continuous Del...

Read full post

Александр Шевченко • Dec 19 '21

Hi Lewis, thanks for this tutorial!
I didn't understand one point - how to find out the value of containername?

Lewis kori • Dec 19 '21 • Edited

Hi Александр,

I'm super happy you found the article useful.

You as the developer assign the containers a name of your choosing.
This is done by running

docker run --name {container_name} -dit -p 3000:3000 {image_name}

where container_name and image_name are variables.

More about the docker run command here :)

Should you wish to see a list of all running containers you can then run

docker ps

Sometimes the container may have exited early and stopped. Probably due to a bad build. You can check these stopped containers by running

docker ps -a

There is a Names column where you can see all the containers with their names.

Alternatively, if you use vscode, the docker extension is particularly helpful for debugging, listing containers by name and running quick docker commands.

Александр Шевченко • Dec 19 '21

Thank you for the detailed answer!

So it turns out that the name of the container is set in the last line of the yml file, right?

I do so (my docker.yml), but I get errors at the deployment stage:

======CMD======
docker login ghcr.io -u $GITHUB_USERNAME -p $GITHUB_TOKEN
docker ps
docker ps -a
docker pull ghcr.io/***/sakhpasflot/sakhpasflot:latest
docker stop dockerContainer
docker system prune -f
docker run --name dockerContainer -dit -p 3000:3000 ghcr.io/***/sakhpasflot/sakhpasflot:latest

======END======
err: WARNING! Using -*** the CLI is insecure. Use --password-stdin.
out: Login Succeeded
err: WARNING! Your password will be stored unencrypted in /***/.docker/config.json.
err: Configure a credential helper to remove this warning. See
err: https://docs.docker.com/engine/reference/commandline/login/#credentials-store
err: invalid reference format: repository name must be lowercase
err: Error response from daemon: No such container: dockerContainer
out: Total reclaimed space: 0B
err: docker: invalid reference format: repository name must be lowercase.
err: See 'docker run --help'.
2021/12/19 10:18:03 Process exited with status 125

I apologize if I ask stupid questions :)
This is my first experience in setting up ci/cd

Александр Шевченко • Dec 19 '21

Looks like i fixed it

Buuut.. I don't see any changes on the server
The project should have been uploaded to the folder specified in WORKDIR in Dockerfile, right?

Lewis kori • Dec 19 '21 • Edited

Awesome!
No the workdir is for the docker container, not your server.

Check your server_ip:3000 in the browser
Or ssh into the server and run the docker ps commands

The project is uploaded to github container registry, your server only downloads the image from there and builds a container from it.
The project code doesn't even need to be in the server

Александр Шевченко • Dec 19 '21 • Edited

Apparently I don't understand some important point. Now, the frontend of my project on the server is running from the directory /var/www/www-root/data/www/732273-cc00798.tmweb.ru/frontend

I thought I should specify this directory somewhere

Usually, I start project manually via ssh:

cd /var/www/www-root/data/www/732273-cc00798.tmweb.ru/frontend
git pull origin master
npm run build
npm start

Then i can open 732273-cc00798.tmweb.ru:3000/ and see working website

And now I want to automate this process.

I thought that if I do everything according to your instructions, then after committing to the master branch, the server will update and restart on its own.

Maybe I misunderstood? 😥

Александр Шевченко • Dec 19 '21 • Edited

root@732273-cc00798:/# docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

Looks like no docker containers found

root@732273-cc00798:/# docker images
REPOSITORY                                 TAG       IMAGE ID       CREATED          SIZE
ghcr.io/aeshevch/sakhpasflot/sakhpasflot   latest    02f8815652e8   20 minutes ago   980MB

Lewis kori • Dec 19 '21

Make sure nothing else is bound to port 3000 before you start your newly created container.

The project is still available to your server only that it will now be within an image.
So what you do manually via ssh won't be necessary anymore.

In the case of a directory, it will be in form of a process (running container). So your nginx configuration has to change and be bound to this process as opposed to some directory in case that's how you did it before.

Александр Шевченко • Dec 19 '21

The docker container is disconnected immediately after the deployment.

root@732273-cc00798:/var/www/www-root/data/www/732273-cc00798.tmweb.ru/frontend# docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
root@732273-cc00798:/var/www/www-root/data/www/732273-cc00798.tmweb.ru/frontend# docker ps -a
CONTAINER ID   IMAGE                                             COMMAND                  CREATED          STATUS                      PORTS     NAMES
e9b22e886568   ghcr.io/aeshevch/sakhpasflot/sakhpasflot:latest   "docker-entrypoint.s…"   36 seconds ago   Exited (1) 33 seconds ago             dockerContainer

Maybe some kind of error is happening somewhere, where can I see it?

Lewis kori • Dec 19 '21

Check the logs and make sure that you don't have any other process bound to port 3000 in your server.
Best of luck as you continue to debug.

Александр Шевченко • Dec 19 '21 • Edited

I found the error:

root@732273-cc00798# docker logs --since=1h e9b22e886568

> @webdevstudios/nextjs-wordpress-starter@1.0.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
TypeError: Cannot read properties of undefined (reading 'split')
    at Object.<anonymous> (/app/next.config.js:8:52)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:331:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (/app/node_modules/next/dist/server/config.js:399:32)
    at async NextServer.loadConfig (/app/node_modules/next/dist/server/next.js:116:22)
    at async NextServer.prepare (/app/node_modules/next/dist/server/next.js:98:24)
    at async /app/node_modules/next/dist/cli/next-start.js:95:9

What could be the problem? Manual startup works fine

Александр Шевченко • Dec 19 '21

It works!! Thnx for all!! 🥳🥳🥳

Lewis kori • Dec 19 '21

Yay 🎉

Александр Шевченко • Dec 19 '21

A new problem - everything seems to be working, but new changes are not being pulled up...
No errors, website works, docker container id changes after new deploy