0

I have a project with the following elements:

  • frontend - Angular
  • backend - Laravel
  • DB - AWS RDS

I want to make to dockerize this project locally and I have several questions:

  1. Is it possible to have only 1 docker NGINX service which will work with frontend and backend without using volumes?
  2. When I will write at enironment of angular the route for the backend, like: http://backend/api/login - should it work?
  3. When I'm trying to open localhost:8050 - I can see the frontend part and the request can't reach the backend container. Please advice
  4. What is the best practise in this case to use at cloud solutions: to use shared drive with 2 folders for frontend and backend and mount them at each container or something else?

Docker-compose

version: '3'
services:
  nginx-frontend:
    restart: always
    build:
      dockerfile: dockerfile
      context: ./nginx
    ports:
      - '8050:80'
  backend:
    build:
      dockerfile: dockerfile
      context: ./backend
    ports:
      - '1000:80'

Nginx configuration

server {
    listen 80;

    # Log files for Debug
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    # Laravel web root directory
    root /var/www/html/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }

    # Nginx Pass requests to PHP-FPM
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass backend:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

Nginx-frontend dockerfile

FROM node:14.17.6 as build
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY ./frontend/code/package.json ./frontend/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 ./frontend/code .
RUN npm run build

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/src/app/dist /var/www/html

Backend 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

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 777 /var/www/html/storage/
RUN  chmod -R 777 /var/www/html/bootstrap/cache

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY --from=php-build /var/www/html /var/www/html

The configuration files are provided.

test test
  • 1

1 Answers1

0

I have recently worked on this and made a simple summary on this post.

But to answer your questions,

  1. Yes, it is possible to only have one nginx to handle routing request to both frontend and backend containers. You need to define in nginx.conf the proxy for the laravel app.
  2. It should work but in the case I worked on, I defined the domain as the apiURL in the environment.ts.
  3. This relates to the service name resolution within docker. I learned this from this post. If you are accessing the angular app through the host machine, then service name resolution will not work.
  4. I don't get the question entirely, can you provide the context?
carloliwanag
  • 348
  • 3
  • 12