title: Connect stack on server: Vue js frontend + php api + postgres db
body: <p>I'm struggling with setting up/deploying my production environment on a server. My frontend image is built with <em>Dockerfile.static</em></p>
  <pre><code>FROM nginx:1.17-alpine
  LABEL maintainer=&quot;xxx&quot;
  COPY app/dist /usr/share/nginx/html
  COPY ./conf.d/default.conf /etc/nginx/conf.d/default.conf
  CMD [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]
  </code></pre>
  <p>My nginx config file</p>
  <pre><code>server {
      listen 80;
      server_name www.xxx.org;
  
      location / {
          root /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
          proxy_pass http://backend:9000/;
      }
  }
  </code></pre>
  <p>The fontend service is setup via this snippet from my compose file</p>
  <pre><code>frontend:
      image: gitlab-registry.cern.ch/xxx/xxx/static:latest
      ports:
          - 80:80
      networks:
          - frontend
          - backend
  </code></pre>
  <p>The static files are served when I enter the domain in my browser. But I can't get my backend connection going. Only getting 404s.</p>
  <p>Here's my the Dockerfile for my php API:</p>
  <pre><code>FROM bitnami/php-fpm:latest
  LABEL maintainer=&quot;xxx&quot;
  COPY . /var/www/html
  WORKDIR /var/www/html/public
  </code></pre>
  <p>And the complete compose file:</p>
  <pre><code>version: '3'
  services:
      backend:
          image: gitlab-registry.cern.ch/xxx/xxx:latest
          expose:
              - 9000
          networks:
              - backend
  
      frontend:
          image: gitlab-registry.cern.ch/xxx/xxx/static:latest
          ports:
              - 80:80
          networks:
              - frontend
              - backend
  
  
      mtg-db:
          container_name: mtg-db
          image: postgres:latest
          env_file:
              - database/database.env
          ports:
              - 5432:5432
          volumes:
               - db_data:/var/lib/postgresql/data
          networks:
              - backend
  
   volumes:
       db_data:
           driver: local
           driver_opts:
               o: bind
               type: none
               device: home/mtg_web_data/
  
  networks:
      frontend:
      backend:
  </code></pre>
  <p>In my backend container, I have an index.php file that needs to be served. In my dev environment I just used the php development server and the content of this file looks like this:</p>
  <pre><code>&lt;?php
  
  
  require $_SERVER['DOCUMENT_ROOT'].&quot;/../src/api.php&quot;;
  
  header(&quot;Access-Control-Allow-Origin: *&quot;);
  header(&quot;Content-Type: application/json; charset=UTF-8&quot;);
  header(&quot;Access-Control-Allow-Methods: GET,POST&quot;);
  header(&quot;Access-Control-Max-Age: 3600&quot;);
  header(&quot;Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With&quot;);
  
  $url = parse_url($_SERVER['REQUEST_URI']);
  
  if (!isset($url[&quot;query&quot;])) {
      $url[&quot;query&quot;] = NULL;
  }
  
  $API = new Api($_SERVER[&quot;REQUEST_METHOD&quot;], $url[&quot;path&quot;], $url[&quot;query&quot;]);
  $API-&gt;processRequest();
  
  ?&gt;
  </code></pre>
  <p>The Api class contains all the endpoints and eventually handles all the queries and fetches the data from the DB.</p>
  <p>Question 1) What's the correct URL to fetch from in my frontend container? From my understanding, the containers are connected via the docker network <em>backend</em>. So I tried <em>http://backend:9000/</em> + uri_path ...</p>
  <p>Question 2) How do I set up the backend container? Because it feels like I am missing something. The index.php file needs to be served... do I need another nginx container for this and integrate my php API into that container?</p>
  <p>Question 3) Is my nginx config correct or am I missing something there too?</p>