Home > Enterprise >  How do I prevent nginx from changing my request URL in Angular app
How do I prevent nginx from changing my request URL in Angular app

Time:01-29

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;'"]

CodePudding user response:

# 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

CodePudding user response:

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.

  •  Tags:  
  • Related