Frontend and API in different containers

View other answers to this thread
Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Dong Nguyen's photo

If so, link to API server should be "myapp.com:3000", right?

If you want to call to API server as a path - such as "myapp.com/api" - you may need an adapter for your front-end. It's a small script using Node.js or nginx configuration that will map and redirect every request to artual target (at port 3000).

For my opinion, the better approach is using sub domain. I often apply this method: map the domain "api.myapp.com" to port 3000 so that I can send AJAX requests to there. Why this is good? Sometimes you may need to move API to another server. Sometimes your API may run on many clustering servers, you just need to map api.myapp.com to an HAProxy for example.

Riderman de Sousa Barbosa's photo

This is what I have been done...

In default I put a proxy...

server {
    location /api/ {
        proxy_pass         http://api:3000/;
    }
}

In frontend Dockerfile I just copy...

COPY default /etc/nginx/sites-enabled/default

When I run the front-end app.. I link with my API

docker run -d -p 80:80 --name frontend --link api:api frontend

When you link another container, docker update /etc/hosts with container name and API, now works! :)

Is better use network over link since link is deprecated.


About the api.myapp.com I agree. My API is just a container so its easy, I just need to change the frontend calls and nginx config to point to the right domain.

In the feature I will do that :).

Frank Rousseau's photo

It looks like your Nginx configuration is missing some elements. I don't see the listen and server name parameters:

server {
    listen 80;
    server_name myapp.com;

    location /api {
       proxy_pass http://api:3000/;
    }
}