Ryan Pharis

A personal blog about javascript and web application development

Category: Vue.JS

Setup an Nginx reverse proxy for your Docker containers

Overview

This is a follow up post to my last one . You’ll learn how to add an Nginx container as a reverse proxy serving an api and app container and accessing them through hostnames rather than localhost:port. This provides a benefit of more closely resembling a production environment while you develop locally.

Prereqs/Setup

Please see the previous post for background on how to setup a local web dev environment using Docker for Windows. This will help you understand how we are adding on to include Nginx.

  1. Add hostnames to Windows hosts file
    • Open Notepad as an administrator (start menu, type in “notepad” right click on Notepad icon and select “Run as administrator”.
    • Select Open File and navigate to the etc folder: C:\Windows\System32\drivers\etc.
    • Select “All Files” instead of Text Documents and open the hosts file.
    • Add app and api hostname entries by adding this line to the end of the file
      • 127.0.0.1 app.tutorial.localhost api.tutorial.localhost

Clone this tutorial’s repo:

git clone https://github.com/ryancp/tutorial-nginx-reverse-proxy.git

Take a look at our deployment/docker-compose.yml file. You can see that we have added a gateway service that exposes port 80. This is the only way we will be able to access our upstream services like api and app. We no longer have exposed ports to those containers. Every request will go through our nginx reverse proxy, a.k.a. our gateway service.

version: '3'

services:
  nodejs:
    build: ./base-images/nodejs
  api:
    image: tutorial_nginx_reverse_proxy_nodejs
    volumes:
      - ../api:/src
    working_dir: /src
    environment:
      - PORT=3002
      - NODE_ENV=development
    stdin_open: true
    tty: true
    entrypoint: /bin/bash
  app:
    image: tutorial_nginx_reverse_proxy_nodejs
    volumes:
      - ../app:/src
    working_dir: /src
    environment:
      - PORT=3001
      - HOST=app
      - NODE_ENV=development
    stdin_open: true
    tty: true
    entrypoint: /bin/bash
  gateway:
    build: ../gateway
    volumes:
      - ../gateway:/src
    ports:
      - "80:80"
    depends_on:
      - api
      - app
docker-compose.ymlview rawview file on GitHub

Start Docker Containers

Similar to the previous tutorial. We need to shell into both containers and kick their node process off. Open a Git Bash terminal and make sure you are in the deployment directory. Then build and run the containers:

$ docker-compose -f docker-compose.yml -p tutorial_nginx_reverse_proxy up --build -d
Start API Service

Now open Cmder and shell into the running api container:

$ docker exec -it tutorial_nginx_reverse_proxy_api_1 bash

We are now inside the api container and can treat this just like a regular Linux environment. From here, we need to install our node_module dependencies.

Our base nodejs image included yarn globally, so I recommend using yarn to install everything (you could also use npm install) as I’ve found it’s faster and less prone to errors than npm:

$ yarn install

After installing, run the GraphQL API server:

$ npm run dev

Test it out by going to http://api.tutorial.localhost and seeing the GraphQL Playground editor. This is an example GraphQL project based on the Apollo Server Getting Started tutorial.

You can paste in the following GraphQL query to the left side and then hit the play button to see the result:

{
  books {
    author
    title
  }
}
Start App Service

Open another Cmder tab and shell into the running app container:

$ docker exec -it tutorial_nginx_reverse_proxy_app_1 bash

We are now inside the app container. We need to install our node_module dependencies here also:

$ yarn install

After installing, run the Webpack dev server:

$ npm run dev

Test it out by going to http://app.tutorial.localhost . You should see the example Vue.js app showing the result of the GraphQL “books” query.

Create a simple nginx reverse proxy for your local docker web development environment

Nginx Reverse Proxy Tutorial successfully working

Now you no longer need to remember the port numbers of your services and this also more closely resembles a production environment since you can access your services by hostname.

Wrap up

As you can see, this is a very elegant way to access your app and api during development. I hope this gives you a starting point for a setup that you can use for any future web development projects.

Painless Node and Vue web dev environment using Docker for Windows

Overview

This post will help you easily get a local web development environment up and running using Docker for Windows. The benefit of this is no need to clutter your host machine with dependencies or install node/npm directly on Windows. Everything will be installed and run inside of Docker containers.

To demonstrate a non-trivial docker setup, we’ll use Docker Compose to create two containers:

  1. A simple GraphQL API container running Apollo Server/Express
  2. An app container served by Vue CLI’s webpack dev server

The github example repo that goes along with this post is at https://github.com/ryancp/tutorial-docker-windows.

Prereqs/Setup

There are some prerequisites that are needed before we begin:

  1. Install Docker for Windows Community Edition
    1. I recommend the Stable version
    2. Docker Compose comes included which we’ll use later on
  2. Install Git Bash and Cmder
  3. Clone the tutorial’s repo
    1. git clone https://github.com/ryancp/tutorial-docker-windows.git

The first thing to notice is our deployment/docker-compose.yml file. This is the high level overview of what our application will consist of. You can see that we have our two services defined:

version: '3'

services:
  nodejs:
    build: ./base-images/nodejs
  api:
    image: tutorial_docker_windows_nodejs
    volumes:
      - ../api:/src
    working_dir: /src
    environment:
      - PORT=3002
      - NODE_ENV=development
    ports:
      - 3002:3002
      - 9229:9229
    stdin_open: true
    tty: true
    entrypoint: /bin/bash
  app:
    image: tutorial_docker_windows_nodejs
    volumes:
      - ../app:/src
    working_dir: /src
    environment:
      - PORT=3001
      - HOST=app
      - NODE_ENV=development
    ports:
      - 3001:3001
    stdin_open: true
    tty: true
    entrypoint: /bin/bash
docker-compose.ymlview rawview file on GitHub

A few other things of note about this docker-compose file are:

  1. We define a base nodejs image that both services will use
  2. Both services will have a volume mounted at /src inside the running container which allows you to store and edit files on your host, but they are also available to the container
  3. Our docker compose project name will be set to “tutorial_docker_windows” later on when we run docker-compose up command

Start Docker Containers

Open a Git Bash terminal and make sure you are in the deployment directory. Then build and run the containers:

$ docker-compose -f docker-compose.yml -p tutorial_docker_windows up --build -d
Start API Service

Now open Cmder and shell into the running api container:

$ docker exec -it tutorial_docker_windows_api_1 bash

We are now inside the api container and can treat this just like a regular Linux environment. From here, we need to install our node_module dependencies.

Our base nodejs image included yarn globally, so I recommend using yarn to install everything (you could also use npm install) as I’ve found it’s faster and less prone to errors than npm:

$ yarn install

After installing, run the GraphQL API server:

$ npm run dev

Test it out by going to http://localhost:3002 and seeing the GraphQL Playground editor. This is an example GraphQL project based on the Apollo Server Getting Started tutorial.

You can paste in the following GraphQL query to the left side and then hit the play button to see the result:

{
  books {
    author
    title
  }
}
Start App Service

Open another Cmder tab and shell into the running app container:

$ docker exec -it tutorial_docker_windows_app_1 bash

We are now inside the app container. We need to install our node_module dependencies here also:

$ yarn install

After installing, run the Webpack dev server:

$ npm run dev

Test it out by going to http://localhost:3001 . You should see the example Vue.js app showing the result of the GraphQL “books” query.

To see how volumes work which is what makes the dev environment possible, open app\src\components\HelloWorld.vue file and make any change to the template section, like adding exclamation marks inside the h1 tag on line 3:

<h1>{{ msg }}!!!</h1>

Save the file and switch back to your browser. After a couple seconds, you should see the change without having to reload the browser at all. This is the power of Vue CLI’s Hot Module Reloading feature and because we setup Webpack to watch for changes to our app files (see around line 14 in app\vue.config.js).

Wrap up

That’s really all there is to it.

I hope this has helped you understand how easy it can be to set up a local web development environment for Express and Vue.js based applications.

If you liked this, I plan on doing a follow up post about how to add an Nginx container serving as a reverse proxy to your api and app containers. You will then be able to access them through host names rather than localhost:port.

This is yet another way to enhance your local dev environment and make it closer to production. So stay tuned for that!

Powered by WordPress & Theme by Anders Norén