Docker compose with angular and php

General
,
1

Hi.
I have an application angular application for frontend purpose and php application for backend, also I have test service for nginx reverse proxy.
The porblem is, that angular app can’t reach backend service - it can’t resolve the hostname, but when I’m making ping or curl from the container - I don’t have a problem.
Please advice.

Docker-compose

version: '3'
services:

  backend-app:
    build:
      dockerfile: dockerfile
      context: ./backend
    volumes:
      - ./backend/code:/var/www/html

  frontend-app:
    depends_on:
      - backend-nginx
    build:
      dockerfile: dockerfile
      context: ./frontend

  backend-nginx:
    build:
      dockerfile: dockerfile
      context: ./backend-nginx
    volumes:
      - ./backend-nginx/code:/var/www/html

  reverseproxy:
      build:
        dockerfile: dockerfile
        context: ./reverseproxy
      ports:
        - '8090:80'

fontend-app dockerfile

FROM node:14.17.6 as build
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY ./code/package.json ./code/package-lock.json ./
RUN apt-get update || : && apt-get install python -y
RUN npm install node-sass -y
RUN npm rebuild node-sass
RUN npm install
COPY ./code .

RUN npm run build

FROM nginx
RUN apt-get update
RUN apt-get install host -y
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/src/app/dist /var/www/html

Backend-nginx dockerfile

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

Backend nginx configuration file - default.conf

server {
    listen 80;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass backend-app: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;
    }
}

Backend-app dockerfile

FROM php:7.4-fpm as php-build

RUN apt-get -y update
RUN apt-get -y install curl
RUN apt-get -y install zip
RUN apt-get -y install libzip-dev
RUN apt-get -y install libpng-dev
RUN docker-php-ext-install zip
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
RUN docker-php-ext-configure gd && docker-php-ext-install gd
RUN mkdir -p /var/www/html/
COPY ./code /var/www/html


WORKDIR /var/www/html
RUN composer require "ext-gd:*" --ignore-platform-reqs
RUN composer require phpoffice/phpspreadsheet --with-all-dependencies
RUN composer install

RUN  chmod -R 775 /var/www/html/storage/
RUN  chmod -R 775 /var/www/html/bootstrap/cache
2

Correct me if I am wrong, but isn’t the point of Angular as a frontend running on client side? Do you expect the client side to use the container name to access the backend? :slight_smile: You have to use a public IP address or domain name that points to your machine. If your app is running locally, you can use a public DNS for local IP addresses like: https://nip.io/. I used to use xip.io but it looks like it does not exist anymore.