React Node Microservice app works locally but not once deployed to AWS ECS
Multi tool use
up vote
1
down vote
favorite
I'm trying to deploy an application to AWS ECS. The application's backend is a microservice and the client side is a react app with server-side rendering.
The backend is deployed in the private subnet in ECS with an internal load balancer. Same with the client side, deployed in the same private subnet but in a different ECS cluster( with separate ECS instances ). Also, the client side is connected to an internet-facing Application Load Balancer.
Following diagram depicts the AWS architecture I described
The issue
Whenever a GET or a POST or any other HTTP request made by the React App doesn't reach the backend. But all of these works fine when I run the app locally
When I SSH into the client side's ECS instance and do a GET or a POST call using CURL with the backend internal load balancer DNS name, it works perfectly and does the appropriate HTTP request to the backend. I also tried the same thing by SSH into the client side docker container and works without any issues.
Following is an example of the action that makes the backend call
export function getData()
return
type: "GET_DATA",
payload: new Promise((resolve, reject) =>
app.auth().onAuthStateChanged((id) =>
if(id)
axios.get(process.env.BACKEND_HOST+`/service1/$id`)
.then((response) =>
if(response.data == "")
reject(false);
resolve(response.data)
).catch((error) => console.log(error) )
else
reject(false);
)
)
Following is the error output I get when the above call is made
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/data net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
GET http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/XfSOjVUFCcSoNEsFljOPfP11XyG2 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
I'm passing the Internal Load balancer's DNS name as an environment variable. Tested with console.log to see if the code is getting the correct DNS name and it does. When run locally i pass the hostname/port of each service separately.
I would really appreciate any inputs and insights on this and if you guys need more information please let me know, I'll update this question.
Thanks in advance!
node.js reactjs amazon-web-services docker amazon-ecs
add a comment |
up vote
1
down vote
favorite
I'm trying to deploy an application to AWS ECS. The application's backend is a microservice and the client side is a react app with server-side rendering.
The backend is deployed in the private subnet in ECS with an internal load balancer. Same with the client side, deployed in the same private subnet but in a different ECS cluster( with separate ECS instances ). Also, the client side is connected to an internet-facing Application Load Balancer.
Following diagram depicts the AWS architecture I described
The issue
Whenever a GET or a POST or any other HTTP request made by the React App doesn't reach the backend. But all of these works fine when I run the app locally
When I SSH into the client side's ECS instance and do a GET or a POST call using CURL with the backend internal load balancer DNS name, it works perfectly and does the appropriate HTTP request to the backend. I also tried the same thing by SSH into the client side docker container and works without any issues.
Following is an example of the action that makes the backend call
export function getData()
return
type: "GET_DATA",
payload: new Promise((resolve, reject) =>
app.auth().onAuthStateChanged((id) =>
if(id)
axios.get(process.env.BACKEND_HOST+`/service1/$id`)
.then((response) =>
if(response.data == "")
reject(false);
resolve(response.data)
).catch((error) => console.log(error) )
else
reject(false);
)
)
Following is the error output I get when the above call is made
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/data net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
GET http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/XfSOjVUFCcSoNEsFljOPfP11XyG2 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
I'm passing the Internal Load balancer's DNS name as an environment variable. Tested with console.log to see if the code is getting the correct DNS name and it does. When run locally i pass the hostname/port of each service separately.
I would really appreciate any inputs and insights on this and if you guys need more information please let me know, I'll update this question.
Thanks in advance!
node.js reactjs amazon-web-services docker amazon-ecs
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
1
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
1
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm trying to deploy an application to AWS ECS. The application's backend is a microservice and the client side is a react app with server-side rendering.
The backend is deployed in the private subnet in ECS with an internal load balancer. Same with the client side, deployed in the same private subnet but in a different ECS cluster( with separate ECS instances ). Also, the client side is connected to an internet-facing Application Load Balancer.
Following diagram depicts the AWS architecture I described
The issue
Whenever a GET or a POST or any other HTTP request made by the React App doesn't reach the backend. But all of these works fine when I run the app locally
When I SSH into the client side's ECS instance and do a GET or a POST call using CURL with the backend internal load balancer DNS name, it works perfectly and does the appropriate HTTP request to the backend. I also tried the same thing by SSH into the client side docker container and works without any issues.
Following is an example of the action that makes the backend call
export function getData()
return
type: "GET_DATA",
payload: new Promise((resolve, reject) =>
app.auth().onAuthStateChanged((id) =>
if(id)
axios.get(process.env.BACKEND_HOST+`/service1/$id`)
.then((response) =>
if(response.data == "")
reject(false);
resolve(response.data)
).catch((error) => console.log(error) )
else
reject(false);
)
)
Following is the error output I get when the above call is made
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/data net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
GET http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/XfSOjVUFCcSoNEsFljOPfP11XyG2 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
I'm passing the Internal Load balancer's DNS name as an environment variable. Tested with console.log to see if the code is getting the correct DNS name and it does. When run locally i pass the hostname/port of each service separately.
I would really appreciate any inputs and insights on this and if you guys need more information please let me know, I'll update this question.
Thanks in advance!
node.js reactjs amazon-web-services docker amazon-ecs
I'm trying to deploy an application to AWS ECS. The application's backend is a microservice and the client side is a react app with server-side rendering.
The backend is deployed in the private subnet in ECS with an internal load balancer. Same with the client side, deployed in the same private subnet but in a different ECS cluster( with separate ECS instances ). Also, the client side is connected to an internet-facing Application Load Balancer.
Following diagram depicts the AWS architecture I described
The issue
Whenever a GET or a POST or any other HTTP request made by the React App doesn't reach the backend. But all of these works fine when I run the app locally
When I SSH into the client side's ECS instance and do a GET or a POST call using CURL with the backend internal load balancer DNS name, it works perfectly and does the appropriate HTTP request to the backend. I also tried the same thing by SSH into the client side docker container and works without any issues.
Following is an example of the action that makes the backend call
export function getData()
return
type: "GET_DATA",
payload: new Promise((resolve, reject) =>
app.auth().onAuthStateChanged((id) =>
if(id)
axios.get(process.env.BACKEND_HOST+`/service1/$id`)
.then((response) =>
if(response.data == "")
reject(false);
resolve(response.data)
).catch((error) => console.log(error) )
else
reject(false);
)
)
Following is the error output I get when the above call is made
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/data net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
GET http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/XfSOjVUFCcSoNEsFljOPfP11XyG2 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at e.exports (bundle.js:30)
at XMLHttpRequest.f.onerror (bundle.js:30)
I'm passing the Internal Load balancer's DNS name as an environment variable. Tested with console.log to see if the code is getting the correct DNS name and it does. When run locally i pass the hostname/port of each service separately.
I would really appreciate any inputs and insights on this and if you guys need more information please let me know, I'll update this question.
Thanks in advance!
node.js reactjs amazon-web-services docker amazon-ecs
node.js reactjs amazon-web-services docker amazon-ecs
edited Nov 11 at 21:46
asked Nov 9 at 20:55
thishandp7
28118
28118
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
1
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
1
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06
add a comment |
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
1
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
1
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
1
1
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
1
1
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233156%2freact-node-microservice-app-works-locally-but-not-once-deployed-to-aws-ecs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
asSuymO60XWLpUjzrfrVs8XUeQG d9F6mMMtTSKWY,N1VMjYaruS753Hjr
What error are you getting from client app?. Connection timeout?. Can you provide details of error output.
– Imran
Nov 11 at 3:11
@Imran Thanks for the response. I have updated the question with the error output. It's a connection timeout.
– thishandp7
Nov 11 at 21:23
1
Please, don't post your code/error messages as images. Firstly we want to copy/paste it and secondly search engines are unable to index that information. So please make sure that any textual information is actually provided in text form, thanks!
– lucascaro
Nov 11 at 21:34
1
@lucascaro My bad. I updated the question with the text form. thanks!
– thishandp7
Nov 11 at 21:48
It's very odd that issue happens via app only but curl command from app server works. We could check security group settings of internal ELB source allows security group of your EC2 group to just make sure. Also, can you paste the curl command output for same endpoint request and response(just high level data) from app server where its successful?
– Imran
Nov 11 at 22:06