DEV Community

Philip Perry
Philip Perry

Posted on

3 1

Setting up a server with multiple domains and ports

I wanted to use an existing webserver (running on Linode's cheapest $USD 5 / month plan) for a new project. Since I already have a domain pointing to that domain, I can't use port 80 for the new project.

This is what my setup looks like:

  • existing project: running on Apache, port 80
  • new project (Vue frontend, running on Nginx in Docker container), port 8080
  • new project (Laravel API backend, running on Nginx in Docker container), port 8880

DNS record

First, I needed to setup the DNS. I like to use Cloudflare for handling my domains. What I like about Cloudflare is that not only does it protect ones website from DDos attacks and make the website load faster, it's also easy to make the switch to a different server, as one can just change the IP address in the A record.

Backend API

For the Backend, I have a Dockerfile that installs stuff needed by PHP and and a docker-compose.yml file for building both the PHP and Nginx container. I'll just display the Nginx stuff. Please note that part ports where we expose the port 8880:

version: "2.0"
services:
  #PHP Service
  #here goes configuration for PHP container

  #Nginx Service
  webserver:
    image: nginx:alpine
    container_name: webserver
    restart: unless-stopped
    tty: true
    ports:
      - "8880:80"
    volumes:
      - ./:/var/www/html/
      - ./nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - app-network

#Docker Networks
networks:
  app-network:
    driver: bridge
Enter fullscreen mode Exit fullscreen mode

One thing to note is that I originally had used port 8000, but that port is not supported by Cloudflare, which is why I changed it to 8880.

Starting the backend service is simply done by running docker-compose up -d inside the backend code folder.

Frontend

For the frontend, I have a simple Dockerfile that runs the Vue JS code in a Docker container:

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
Enter fullscreen mode Exit fullscreen mode

The connection to the backend API is set inside the .env file:

VUE_APP_BACKEND=http://www.domain.com:8880

Building the container is done like this:

docker build . -t my-app

I don't have a docker-compose.yml file for the frontend, so I run this command where I expose the port 8080:

docker run -d -p 8080:80 my-app

Setting up a redirect in Apache

Now everything works, but I don't want the user to have to enter the port when entering the url. E.g. when the user enters www.domain.com, it should redirect to www.domain.com:8080

In apache.conf I added the following:

ServerName "domain.com"
<VirtualHost _default_:80>
        ServerName "domain.com"
        ServerAlias "www.domain.com"
        RewriteEngine On
        # Redirect all requests to the local Apache server to port 8080
        RewriteRule ^.*$ http://%{HTTP_HOST}:8080%{REQUEST_URI}
</VirtualHost>
Enter fullscreen mode Exit fullscreen mode

OK, that's all. I hope I didn't forget anything, as I wrote this so that I will remember what to do if I need to setup everything from scratch. As always, please let me know in the comments if anything could be done better...

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more