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
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
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>
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...
Top comments (0)