How to dynamically change API url during build to remove localhost part for production-CodePudding

I am trying to run a build of a Vue app where the urls for each of my API routes will drop the localhost:3001 used for development after the build.

The problem is the production app is using nginx with reverse proxy to the production server. That is, the localhost server address is already set in the nginx configuration and is therefor not required in the API urls in the Vue app for production.

For example a development url like this

localhost:3001/api/users

should be this is production

/api/users

Since the app does not need the localhost part of the url is there any way to automatically remove it during the build? I may be missing something obvious but at the moment I can't figure a way to do it without manually changing all of them.

Thanks for any guidance in advance.

CodePudding user response：

As I understand your question, for development you are running both an API server and a UI dev server on your machine, and the UI is making calls to the API server which is running on a different port so you have to specify the host/port in the URLs. However, in production you want to not specify the host/port so it goes to the same host.

There are a couple of ways you could do this. The straight-forward way is to use environment variables in Vue. Digital Ocean actually has a guide for dealing with this exact problem:

In a web app, you will most likely have to access a backend API server through a URL. In a development environment - when you are working locally, this URL can be something like: http://localhost:8080/api. In a production environment - when the project has been deployed, this URL can be something like: https://example.com/api. Environment variables allow you to change this URL automatically, according to the current state of the project.

With Vue.js, it is possible to use environment variables through files with the .env file extension. These files are responsible for storing information that is specific to the environment (“development”, “testing”, “production”, etc.).

The other way is to try and more closely mimic your production environment. You can do that by running nginx locally on your machine, have it proxy requests something like:

dev.example.com/api -> localhost:3001
dev.example.com -> localhost:3000 (every other path)

Then, in your /etc/hosts file (assuming a *nix OS), point dev.example.com to 127.0.0.1 and your app API should be reachable from the same dev.example.com address.

CodePudding user response：

Please check if your nginx configuration on the production server already contains definitions about the port 3001. If not, you can try to append this file with the following block, after modification of some values ;)

server {
        listen       3001;
        server_name  localhost; # or your server public name

        root D:/WEB; # or a more unix-like path ^^
        index  index.html index.htm index.php;

        location /api/users {
            proxy_pass http://localhost/api/users;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
}

As it is an extra server layer, it may be at the expense of the execution speed, but could be a temporary patch.