title: How to route Angular app inside Nginx container?
body: <h2>My question</h2>
  
  <p>I want to deploy my angular app with docker containers. Unfortunately, I struggle to route specific uri. </p>
  
  <p>The frontend image contains nginx and my compiled angular app. To carry out routing inside the container, nginx points all uris to my compiled app with <code>try_files $uri $uri/ myapplication/index.html =404</code> and then angular router takes charge of everything.</p>
  
  <p>However, when I run the frontend container. I'm just able to reach my app and the angular routing isn't working at all.</p>
  
  <p>On the other hand, if I serve my compiled app with nginx without docker, the routing works perfectly.</p>
  
  <p>Given that, I wonder:</p>
  
  <blockquote>
    <p><strong>how to route angular app properly inside a docker container ?</strong></p>
  </blockquote>
  
  <p>You can find all the details below Tl;dr</p>
  
  <hr>
  
  <h2><strong>Whole build process</strong></h2>
  
  <p>My app is composed of three services:</p>
  
  <ol>
  <li>Angular Frontend ( Nginx + Angular )</li>
  <li>Backend API ( NodeJs + Express )</li>
  <li>Database ( MongoDB )</li>
  </ol>
  
  <hr>
  
  <p><strong>1) Context</strong></p>
  
  <p>I have the following file tree:</p>
  
  <pre><code>|frontend
  ||package.json
  ||nginx.conf
  ||frontend.dockerfile
  ||Jumble
  |backend
  ||package.json
  ||backend.dockerfile
  ||server.js
  ||Jumble
  |docker-compose.yml
  </code></pre>
  
  <p>The Docker-compose.yml file:</p>
  
  <pre><code>services:
    frontend:
      container_name: clockmachine-frontend
      build:
        context: ./frontend
        dockerfile: clockmachine-frontend.dockerfile
  
    database:
      container_name: mongo
      image: mongo
      ports:
      - "27017:27017"
  
    backend:
      container_name: clockmachine-api
      image: clockmachine-api
      build:
        context: ./backend
        dockerfile: clockmachine-api.dockerfile
      environment:
        - NODE_ENV=production
      ports:
        - "3000:3000"
  </code></pre>
  
  <p>My Frontend Dockerfile:</p>
  
  <pre><code>#### Stage 0, Build Angular frontend
  FROM node:latest as build
  WORKDIR /app
  COPY package.json package.json
  RUN npm install
  COPY . .
  RUN npm run build -- --prod
  
  ####Stage 1, Build Nginx backend
  FROM nginx:alpine
  COPY --from=build /app/dist/ /usr/share/nginx/html
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  </code></pre>
  
  <p>The nginx.conf file:</p>
  
  <pre><code>server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;
    client_max_body_size  256M;
  
    root /usr/share/nginx/html/myapplication;
    index index.html;
  
    location / {
      try_files $uri $uri/ /index.html =404;
    }
  }
  </code></pre>
  
  <p>The Backend dockerfile:</p>
  
  <pre><code>#### Stage 0, Build API
  FROM node:alpine
  LABEL author="Olivier D'Ancona"
  WORKDIR /app
  COPY package.json ./
  RUN npm install
  COPY . .
  EXPOSE 3000
  CMD ["node","server.js"]
  </code></pre>
  
  <hr>
  
  <p><strong>2) The Build</strong></p>
  
  <p>I built my application in the main folder like this:</p>
  
  <pre><code>sudo docker-compose build
  sudo docker-compose up
  </code></pre>
  
  <p>The frontend will be compiled and be served inside nginx server.
  The backend will be deployed with nodejs and express.
  The database will pull a mongo image from the dockerhub. </p>
  
  <p>At this point, the application is building without issue. I controlled the status of my services:</p>
  
  <ol>
  <li><a href="http://localhost:27017/" rel="noreferrer">http://localhost:27017/</a> Is connected with a Mongo db instance <em>(It looks like you are trying to access MongoDB over HTTP on the native driver port.)</em></li>
  <li><a href="http://localhost:3000/api/" rel="noreferrer">http://localhost:3000/api/</a> is working as well <em>( I got in the terminal connection to mongo successfull)</em></li>
  <li><a href="http://localhost:8080" rel="noreferrer">http://localhost:8080</a> Unable to connect <em>(Firefox can't establish a connection to the server at localhost:8080.)</em></li>
  <li><a href="http://localhost/student" rel="noreferrer">http://localhost/student</a> this is a static route of my app <em>(Welcome to nginx! If you see this page, the nginx web server is successfully installed and working. Further configuration is required.)</em></li>
  </ol>
  
  <hr>
  
  <p><strong>3) The frontend routing problem</strong></p>
  
  <p>So at this point, the database and the backend are working together. My application is served on localhost/myapplication/index.html but the angular routing is not working instead the browser tells me he's unable to reach my app. I find someone have similar issue <a href="https://stackoverflow.com/questions/39421587/deploy-angular2-with-router-inside-a-docker-container-using-nginx">here</a>.</p>
  
  <hr>
  
  <p><strong>4) Isolating the container</strong></p>
  
  <p>So I tried to build and run the frontend container alone:</p>
  
  <p>I changed directory to the folder /frontend and typed:</p>
  
  <pre><code>sudo docker build -t mytag -f clockmachine-frontend.dockerfile .
  sudo docker run mytag
  </code></pre>
  
  <p>The building process takes around 10 minutes and completes successfully. This time when I reached <a href="http://localhost/myapplication" rel="noreferrer">http://localhost/myapplication</a> the application is working properly but again faced this routing problem.</p>
  
  <hr>
  
  <p><strong>5) Running nginx without container</strong></p>
  
  <p>So, I tried to run nginx directly on my machine. I compiled my frontend application with:</p>
  
  <blockquote>
    <p><code>ng build --prod</code></p>
  </blockquote>
  
  <p>and moved it over <code>/usr/share/nginx/html/myapplication</code></p>
  
  <p>I used the same nginx.conf configuration file and put it into <code>/etc/nginx/conf.d/default.conf</code> and I even tried to change the filename and not overwriting the default.conf file.</p>
  
  <p>The result is my application running properly on <code>localhost/myapplication</code> with angular routing working perfectly!</p>
  
  <hr>
  
  <p><strong>6) Conclusion</strong></p>
  
  <p>All in all, I tried to run a docker-compose file and the frontend container had routing issues. Then I isolated this container and it had the same result. Finally, I served my application directly with nginx and it was a success because the routing is working properly.</p>