NextJS + Laravel + NGinx + Docker: Cant call API in getServerSideProps - laravel

Question

I have a backend API written in Laravel, a frontend app written in NextJS and these are containerized with Docker using NGinx. Here is my docker-compose.yml file:
version: '3.9'
services:
# frontend nextjs app
nextjs:
build: ./hike-frontend
container_name: nextjs
volumes:
- ./hike-frontend:/usr/app
- /app/node_modules
- /app/.next
restart: always
networks:
- app-network
# API Laravel app
laravel:
build:
context: ./hike-backend
dockerfile: Dockerfile
image: digitalocean.com/php
container_name: laravel
restart: unless-stopped
tty: true
environment:
SERVICE_NAME: laravel
SERVICE_TAGS: dev
working_dir: /var/www
volumes:
- ./hike-backend:/var/www
- ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
networks:
- app-network
expose:
- "9000"
# Nginx Service
nginx:
image: nginx:alpine
container_name: nginx
restart: unless-stopped
tty: true
ports:
- "80:80"
- "443:443"
expose:
- "80"
- "443"
volumes:
- ./hike-backend:/var/www
- ./nginx/conf.d/:/etc/nginx/conf.d/
networks:
- app-network
#Docker Networks
networks:
app-network:
driver: bridge
Here is my dockerfile for the next app:
# Base on offical Node.js Alpine image
FROM node:alpine
# Set working directory
WORKDIR /usr/app
# Install PM2 to automatically restart server if it crashes
RUN npm install --global pm2
# install react globally
RUN npm install --global react react-dom
# Copy package.json and package-lock.json before other files
# Utilise Docker cache to save re-installing dependencies if unchanged
COPY ./package*.json ./
# Install dependencies
RUN npm install --production
# Copy all files
COPY ./ ./
# Build app
RUN npm run build
# Expose the listening port
EXPOSE 3000
# Run container as non-root (unprivileged) user
# The node user is provided in the Node.js Alpine base image
USER node
# Run npm start script with PM2 when container starts
CMD [ "pm2-runtime", "npm", "--", "run", "dev" ]
And here is my dockerfile for the Laravel app:
FROM php:7.4-fpm
# Copy composer.lock and composer.json
COPY composer.lock composer.json /var/www/
# Set working directory
WORKDIR /var/www
# Install dependencies
RUN apt-get update && apt-get install -y \
build-essential \
libpng-dev \
libjpeg62-turbo-dev \
libfreetype6-dev \
locales \
zip \
libzip-dev \
jpegoptim optipng pngquant gifsicle \
vim \
unzip \
git \
curl
# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*
# Install extensions
RUN docker-php-ext-install pdo_mysql zip exif pcntl
#RUN docker-php-ext-configure gd --with-gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ --with-png-dir=/usr/include/
RUN docker-php-ext-install gd
# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# Add user for laravel application
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www
# Copy existing application directory contents
COPY . /var/www
# Copy existing application directory permissions
COPY --chown=www:www . /var/www
# Change current user to www
USER www
# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]
And here is my Nginx config:
upstream nextjs_upstream {
server nextjs:3000;
}
server {
listen 80;
server_name local.hike.com;
server_tokens off;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
location / {
proxy_pass http://nextjs_upstream;
}
}
server {
listen 80;
server_name local.api.hike.com;
index index.php index.html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /var/www/public;
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass laravel:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
location / {
try_files $uri $uri/ /index.php?$query_string;
gzip_static on;
}
}
This all works fine I can access both sites in my browser at local.hike.com or local.api.hike.com and ajax requests on the client side work fine as well. However I can't connect to the Laravel app from the next app inside getServerSideProps like so:
export async function getServerSideProps(context) {
const eventDetails = await Axios.get('http://laravel/api/events/1')
.then(result => {
console.log('result', result);
return result.data.data
})
.catch(error => {
console.log('error', error);
return {}
});
}
It just returns:
Error: connect ECONNREFUSED 172.22.0.4:80
I can access local.api.hike.com/api/events/1 no problem in my browser or from an ajax request in the next app but just not in getServerSideProps.