Deploy Nuxt application with Docker and Nginx

Foreword

This article will show you how to deploy your nuxt.js application including server side-rendering (SSR) with Docker and use nginx as a reverse proxy.

If your nuxt application is a simple SPA, you can refer to the article How to automatically deploy a Vue / React / Angular application to the server? , or even a similar docker can be used.

Prepare

To install docker and docker compose on Ubuntu run the following commands

For Amazon Linux servers (EC2) a little bit changed

The version I am using:

• Nuxt 2.10.2
• Docker 10.09.2
• Docker-compose 1.23.2
• Nginx 1.17

Here I assume you already have a nuxt application already, if not, you can refer to here .

Dockerize

First we will write Dockerfile for Dockerfile application.

• Line 1: Install the node environment. Actually, this node image: 10.15 will install Ubuntu OS and the node environment. Instead of having to install ubuntu, install nodes, etc., people have packaged an image that already contains the basics of the node. You should choose nuxt version similar to the version you are running during development to avoid unnecessary time-consuming incompatibilities.
• Line 2: Declare environment variable APP_ROOT , which will contain the entire source nuxt inside the container , you can name anything, I temporarily set it as src .
• Line 3: Simply create a directory named src , because the new build container will not have this directory.
• Line 4: Declare working directory, other commands when run will get context in this directory. Here is the src directory
• Line 5: The ADD command will copy the source code from the real machine (server) into the container in the src directory.
• Line 6 – 7: This is so familiar. A tip here is that you should use the correct dependency management that you used in the development environment. For example, if you use yarn , you might be using npm – change it to npm. Because yarn and npm’s .lock files are different, to avoid errors when installing and building, use the right ones.
• Line 8: Declare environment variables for the build process, the app will serve on this address.

Sometimes you will see some articles instructing you to add a .dockerignore file with content like this:

This is only needed when you dockerize for the local development environment. When deploying to the server, the actual code is pulled back from github, as long as you do not run the yarn install command, there will be no items above.

Login to the server via SSH and build:

Then run the container

You should see a log like this:

Your app is running at port 3000 inside the container and it is mapped to port 80 of the server. You can now access the application via the server’s IP address on port 80.

Use nginx as a reverse proxy

After the step on your application can run, but in fact you may want to use more nginx to take advantage of some of its advantages (vs caching).

Configuring nginx is also very simple, but if building nginx on another container means running multiple-containers then I recommend using a docker-compose will be easier to build and manage, just add 1 file (yaoming).

Fake that cage, add another .env file (LOL)

Explain offline:

• docker-compose.yml
  • services the docker service will run, here I will have two services, nuxt and nginx in turn run the nuxt app and nginx reverse proxy, giving arbitrary names that are easy to understand.
    • build docker will build at the specified context . as configured in Dockerfile .
    • image specifies an image to build instead, the path to the directory to build is similar to the image in Dockerfile .
    • container_name name, so easy to understand names for convenient management.
    • env_file specifies the file containing the environment variable to serve the build process. Here I have a note for you to put the .env file in the same folder with the docker’s context to avoid unnecessary headaches (yaoming).
    • ports mapping port inside container to external server.

      In service nuxt , if you declare more 3333:3000 , you will return as the case of dockerize above, your app will be served at port 3333 of the server (not through nginx). I use nginx here, so in nuxt service nuxt don’t need mapping port anymore.

      In nginx service you will bind port {APP_PORT} on the real server to port 80 of nginx inside the container , port 80 inside the container will forward to port 3000 of service nuxt (see nginx configuration file below).

    • depends_on bound – wait for nuxt service to start successfully then start nginx service (note that depends_on only wait for the srart to complete, not wait until “ready”).
    • volumes mount the path between the actual server and the inside of the container, where you can roughly understand that inside the container create a shortcut (symbolic link) to the specified directory outside the server. Thus, all changes to the contents of this directory are updated synchronously between the inside of the container and the external server (host). Read more about volumes .

      Here I will mount the nginx config file and the container and save the nginx’s log files to the host.

    • networks declares the networks that the service will join.
    • command will run after the build is completed.
  • networks create networks, each service will run on different machines (containers), need to connect to the same network to communicate with each other.
• .env file environment variables too familiar already, however I also note with you is no sign " or ' what you ‘. It will understand the quote mark that is 1 part of the variable value.
  • NODE_ENV build environment.
  • APP_PORT port that the application will run when accessing the host’s IP.
  • LOG_PATH path to the directory containing nginx’s log.

1 more file =))

Note you do not rename the path and file name, otherwise go to edit yourself in docker-compse.yml

Here are 2 things I want to explain:

• listen 80 listen on port 80 , if you like to change numbers, you must change the declaration in docker-compose.yml :

• proxy_pass http://nuxt:3000 where nuxt is the service name you declared in docker-compse.yml .

Then fighting, login to the server via SSH, and run the build command and run containers:

That is, in case you want to test if there are any errors, in fact, you will do like this:

• --build Build images before containers.
• --detach or -d run containers in the background, print the names of new containers.

summary

I’m also a novice with docker as well as nuxt, if you have any advice or suggestions feel free to leave a comment below. If you find the article useful to you or the community, give it an up vote.

Thank you for reading!