0

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.

mikeym
  • 5,705
  • 8
  • 42
  • 62
  • Hi mikeym. Have you considered testing to tunnel `localhost:3001/api/users` to `/api/users` with `nginx` ? – Philippe Oct 10 '22 at 01:57
  • @Philippe I have not. I am not sure what this process is. I am new to `nginx` so I have configured the bare essentials. How does this work? Thanks. – mikeym Oct 10 '22 at 18:16
  • @Phillipe Sorry, I misunderstood your suggestion on tunnelling. As you can see in my response below, yes, I have set this up already in `nginx` for production. It seems more like I must duplicate the `nginx` configuration on my local machine to use the same routes in development?? – mikeym Oct 11 '22 at 22:28

2 Answers2

0

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.

rbtadinada
  • 26
  • 2
0

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.

Philippe
  • 1,134
  • 12
  • 22
  • I am not sure I understand your answer.My production nginx does indeed have the `location /api { proxy_pass http://localhost:3001; #port of server ...}` . This is the problem, my production routes do not need the `localhost:3001 `prefix because it's configured in `nginx`. But in development the routes need the `localhost` part for the routes to work. I am looking for a way to dynamically change the routes to have the `localhost:3001` removed when compiling the build for the production server. Maybe I am missing something, but I am not sure how your answer addresses this. Thanks! – mikeym Oct 11 '22 at 22:18
  • @mikeym, could a special configuration for compilation purpose could match your goal ? ie listening on 3002 for example, then proxying `/api` to localhost ? – Philippe Oct 12 '22 at 10:49