run two app runner services frontend (react)public and backend (nodejs) private

[lokeshcloudy]

Hi,

i am currently working on app runner services, we have two applications one is frontend with react and backend with nodejs which gona talk to RDS. i want to deploy frontend with public endpoint and backend with private endpoint, im able to deploy but how can i make public frontend react to communicate with backend nodejs which is in private endpoint. the backend is communicating with RDS it is ok but how can public react app can communicate with backend nodejs. im scratching my head could any buddy please help me out of this.... thank you

[hariohmprasath]

Hi Lokesh, Thanks for reaching out. Here is one way to do it:

1. Create the frontend react app as a VPC based egress service (running on private subnets)
2. Create the backend service as a inbound private App Runner service running on the same VPC

Since the frontend app's outbound traffic will get routed via the same VPC you should be able to connect with the backend up.

Please refer to this blog (https://aws.amazon.com/blogs/containers/deep-dive-on-aws-app-runner-private-services/) as it follows the same pattern

[lokeshcloudy]

i done same this but react is not able to hit backend, before app runner im using ECS with fargate. there im mentioning in ALB if the path is "/" go to this target and if path "/api/v1" go to particular target but hear in app runner im directly giving backend url to frontend and frontend is trying to connect with backend via public internet so its not able to communicate.

[amitgupta85]

Please make sure that frontend service has a VPC Connector with the same vpc where the private link vpc endpoint associated with backend service resides. Also make sure that security group attached to the PrivateLink vpc endpoint (attached to the backend service) allows access to the security group which is attached to the VPC connector (attached to the frontend service). If it’s the same security group, please make sure that it allows access from itself.

[lokeshcloudy]

Hi amitgupta,

i followd your points but the issue is before app runner im using ECS with fargate and cloudmap and nginx as follows

server { listen 80; server_name example.com; return 301 https://$host$request_uri; }

server {

SSL configuration

    listen 443 ssl;
    listen [::]:443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name example.com;

    location / {
            proxy_pass http://frontfargate.ec2.local:5002;
    }

    location /api/v1 {
            proxy_pass http://backfargate.ec2.local:4000;
    }

}

in frondend im adding backend url like as follows

var configuration = { "appName": "ReactUI", "apiUrl": { node: '/api/v1', },

if any route comes to frontend as "/api/v1" it should go to perticular destination as configured in nginx. nginx gona take care of it. but present in app runner im directely giving the backend url of app runnes because in app runner im not able to add nginx proxy or ALB so im giveing URL as follows

var configuration = { "appName": "ReactUI", "apiUrl": { 'https://rjkpxrymsn.us-west-2.awsapprunner.com/api/v1', },

now the frontend is directly hitting the backend URL from browser im not able to understand how to configure this

[amitgupta85]

Few clarifications, first. Can you please confirm?

1. If I understand your setup, you are running nginx and frontend service together on Fargate and from nginx, you are routing to backend service on HTTP path "/api/v1". Is that correct?
2. When you do the App Runner setup and use the direct backend service url in the frontend service configuration, what is the problem?
3. You are starting with container images on App Runner and not with direct source code stored in GitHub, right?

If I understand your setup correctly, I wanted to suggest couple options to replicate your setup in App Runner.

1. You can run nginx as a separate App Runner service and this App Runner service can connect with 2 App Runner services - frontend and backend. You can make nginx App Runner service public and both the frontend and backend services private. The nginx App Runner service can connect with both services using PrivateLink integration (App Runner private services feature). You can run nginx with your nginx configuration and all traffic will be going via nginx. In order for your frontend service to communicate with the backend service, you can configure frontend to talk to nginx and it can route to backend service.

2. You can also run the nginx process with the frontend App Runner service and another backend App Runner service as your setup today. You will have to build a new container image with nginx and frontend app runner service baked in it together. Run nginx and frontend service together. You can customize nginx as well as backend url in frontend service configuration as part of building a new container image.