Question 84883 in Docker Question posted in
The official documentation can be found here.

How do I prevent nginx from changing my request URL in Angular app – Docker

I’m trying to build my Angular website in a Docker, that works too but whenever the website makes a request the URL is changed from http://url_to_api to http://localhost:8080/url_to_api.

I am very new to NGINX and docker and have tried many different configurations, but none have worked.

Also I get the error in the browser:

Failed to load resource: net::ERR_CONNECTION_REFUSED  /assets/js/env.js

Is nginx blocking that?

Here is my basic nginx.conf

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

And here the docker file


#stage 1
FROM node:12-alpine as build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod
#stage 2
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/webapp /usr/share/nginx/html
EXPOSE 80
#To provide environment variables in angular 
CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/js/env.template.js > /usr/share/nginx/html/assets/js/env.js && exec nginx -g 'daemon off;'"]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Have now found my error. The config files are ok, but made a very stupid mistake, my script at the end of the docker file has exchanged the API URL but I forgot to specify HTTP at the beginning of the URL and so Nginx has requested the URL on the localhost.


  2. 0 
    # Create image based on the official Node 10 image from dockerhub
FROM node:10

# Create a directory where our app will be placed
RUN mkdir -p /app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json /app/

# Install dependencies
RUN npm install

# Get all the code needed to run the app
COPY . /app/

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

    Check the steps here https://www.digitalocean.com/community/tutorials/create-a-mean-app-with-angular-2-and-docker-compose
    To learn and build docker for angular2 client

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search