DEV Community

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

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...
Collapse
 
aeshevch profile image
Александр Шевченко

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

Collapse
 
lewiskori profile image
Lewis kori • 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}
Enter fullscreen mode Exit fullscreen mode

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

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

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.

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

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

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

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

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?

Thread Thread
 
lewiskori profile image
Lewis kori • 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

Thread Thread
 
aeshevch profile image
Александр Шевченко • 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
Enter fullscreen mode Exit fullscreen mode

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? 😥

Thread Thread
 
aeshevch profile image
Александр Шевченко • Edited
root@732273-cc00798:/# docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
lewiskori profile image
Lewis kori

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.

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

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

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

Thread Thread
 
lewiskori profile image
Lewis kori

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.

Thread Thread
 
aeshevch profile image
Александр Шевченко • 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
Enter fullscreen mode Exit fullscreen mode

What could be the problem? Manual startup works fine

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

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

Thread Thread
 
lewiskori profile image
Lewis kori

Yay 🎉

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

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

Thread Thread
 
lewiskori profile image
Lewis kori

Hey dude. That's not a problem.
New containers get a unique ID every time :)

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

Yes, I know. The problem is not that, the problem is that new changes are not being pulled up

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

It has now been updated when I manually made "docker rm -vf$(docker ps -aq) and docker rmif$(docker images -aq)" on the server before the deployment

Collapse
 
derick1530 profile image
Derick Zihalirwa

Hey

Collapse
 
lewiskori profile image
Lewis kori

HI

Collapse
 
blogvile profile image
blogvile

This is a great article thanks for sharing this informative information. Movierulz

Collapse
 
lewiskori profile image
Lewis kori

Most welcome.
Happy you found it useful!