How to Deploy Angular app with Proxy Settings

问题:

I have a proxy config file which has API(web service) link to target to make calls to our database. This proxy config is working fine locally using npm start .

Now I Need to deploy this app to our production windows server on IIS. I used ng build and ng build --prod looks like this is not generating build with proxy setting. I need help that How I can generate a build with proxy setting so that I can deploy it to prod server.

Api is deployed on some other domain and this angular app will be deployed on some other domain.

Thanks

回答1:

The proxy config file is for the local development web server. The main reason you use it is so you can avoid cross domain requests when developing the Angular app and the api on your local machine without having to allow cross domain requests in the api.

When you release to production there is no support for the proxy config file. You will be releasing to your production web server.

If your api is hosted under the same domain then there is no need for proxying requests as they are not cross domain and if the api is on another domain you will need to allow cross domain request in the api.

回答2:

To deploy an Angular 8 application to production

You can use the environments feature, for example:

For Development

proxy.conf.json

{
  "/api": {
      "target": "http://localhost:3000/api",
      "secure": false,
      "pathRewrite": {"^/api" : ""}
    }
}

You set the backend baseURL in environments/environment.ts

export const environment = {
  production: false,
  backend: {
    baseURL:"http://localhost:3000/api"
  }
};

In the service the baseURL is used:

  baseUrl: string = environment.backend.baseURL;

  getAll(): Observable<UsersResponse> {
    return Observable.create(observer => {
     this.http.get<AccountsResponse>(`${this.baseUrl}` + '/users')
        .subscribe((result) => {
          const accountsResponse = result;
          observer.next(accountsResponse);
          observer.complete();
        });
    });
  }

For development the live serve is used:

$ng serve --proxy-config proxy.conf.json  --host 0.0.0.0 --port 4200

The url for development:

http://localhost:4200/yourapp

The running serve will enable CORS and send the API calls to

http://localhost:3000/api/v1

For Deployment to production

The command to build for production:

$ng build --prod --base-href=/yourapp/

The service will take the baseURL from prod environment configuration:

environments/environment.prod.ts

export const environment = {
  production: true,
  backend: {
    baseURL:"http://example.com/api"
  }
};

So, by using different environments, you can configure different api urls. Remember to enable CORS in your production web server, by default the browser does not allow to connect to a different domain than the one serving your Angular app.