How to setup proxy settings for a website in production

Question

I have developed a website in angular and have the following proxy settings in proxy.conf.js file.

const proxyConfig = [
  {
    context: '/web/api/webclients/**',
    target: 'https://10.109.102.109',
    changeOrigin: true,
    secure: false
  },
  {
    context: '/restful/**',
    target: 'https://10.109.110.190',
    changeOrigin: true,
    secure: false
  },
  {
    context: '/api/**',
    target: 'http://10.109.105.107',
    changeOrigin: true,
    secure: false
  }
];

The proxy.conf.js works as expected when in development mode.

I have these in the package.json file for start and build.

"build": "ng build --aot --prod",
"start": "ng serve --proxy-config proxy.conf.js -o",

After I run "npm run build" and use the resulted files to host the website on IIS 8, the pages that need to use the proxy settings do not work.

For example, my request https://localhost/web/api/webclients/authentication should go to https://10.109.102.109/web/api/webclients/authentication

How do I setup these proxy settings in IIS if I host this website on Windows server or how to setup these proxy settings if I host it on a non-windows server?

Answer 1

I'm guessing that you've got the answer by now, but I'm just going to try and answer this anyway because it's the first result when googling for "angular proxy iis".

The proxy.conf.js file is only used when serving the application in development mode. When building for production, the development server is not included in the output (and thus proxy.conf.js is also not a part of the output). For production you need to configure your web server again (nginx, apache, IIS etc.) to proxy those paths.

For IIS specifically you need the ARR module installed before you can set proxying rules for your backends. Look here for a detailed tutorial of how to properly set it up.