Question about backend django frontend vue.js axios API AWS Cloud-based website

this is the architecture used in AWS

how I configured AWS VPC

  • VPC’s private ip range :
  • 1 public subnet
  • 3 private subnets

how I configured AWS route table

  • private subnet route table configuration
    -> local
    -> NAT gateway
    -included subnets
    → frontend private subnet / backend private subnet / RDS private subnet
    total 3 private subnets included in private route table

  • public subnet route table
    → local
    → internet gateway
    → public subnet that contains Application Load Balancer / bastion host ec2 / NAT gateway
    total 1 public subnet included in public route table

How I configured Application Load Balancer

  • internet facing
  • connected instance : frontend ec2 instance in private subnet

then all the configuration done

I entered domain web site to test it

then I confronted with this error

[Vuetify] [UPGRADE] ‘v-content’ is deprecated, use ‘v-main’ instead. console.ts:34

***found in ***

—> VMain

*** VApp***

*** App***

*** Root***

POST ‘’ xhr.js:177


!Uncaught (in promise) Error:Network Error createError.js:16

*** at t.exports (createError.js:16)***

*** at XMLHttpRequest.d.onerror (xhr.js:84) !***

POST ‘’ xhr.js:177


Uncaught (in promise) Error: Network Error createError.js:16

*** at t.exports (createError.js:16)***

*** at XMLHttpRequest.d.onerror (xhr.js:84)***

my question is

Q. what is the problem ?

Q. did I configure something wrong?

Q. how can I fix it based on this architecture ?

Q. did I do something wrong with configuring application Load Balancer?

Q. what do I have to configure each private subnets to communicate and network each other especially http?

please advise for me

thank you !