nuxt-mail fails with a 504 with nginx reverse proxy

Question

I configured nuxt-mail to send emails from our nuxt app. The baseURL of my app is changed to "https://localhost:3000/app" instead of "https://localhost:3000" So, nginx redirects all calls to '/' to a static app. And all calls to '/app' to a dynamic app. The issue is that on production, nuxt-mail is unable to send email through a post to '/app/mail/send'.

1. I tried with setting axios baseURL on nuxt.config.js as suggested on the nuxt-mail npm/github page
2. I don't see a path to send or mail in .nuxt/router.js

file: contact.vue Note: WEBSITE_DOMAIN points to https://localhost:3000 locally and valid web domain on production in this format: https://www.production_website.com

<script>
...
methods: {
...
sendMail(){
  this.$axios.post( 
    this.$config.WEBSITE_DOMAIN+'/app/mail/send', 
    {
    ...
     }
...
}
...
</script>

file: nuxt.config.js

...
export default{
...
router: {
    base: '/app/'
  },
...
}

Note: I did configure the upstream logs from nginx to app server

Access log from nginx on production

49.205.150.249 - - [04/May/2022:15:30:54 +0000] "POST /app/mail/send HTTP/1.1" 504 167 "https://www.<xxxxxxxxx_NAME>.com/app/contact" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0"

Error log from nginx on production

2022/05/04 15:30:54 [error] 2106#2106: *38 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 49.205.150.249, server: <xxxxxxxxx_NAME>.com, request: "POST /app/mail/send HTTP/1.1", upstream: "https://<xxxxxxxxx_IP>:3000/app/mail/send", host: "www.<xxxxxxxxx_NAME>.com", referrer: "https://www.<xxxxxxxxx_NAME>.com/app/contact"

What am I missing here? It works perfectly on my staging though.

Answer 1

The port allowing SMTP on the production instance was not open. On AWS EC2, I needed to enable outbound rules on the corresponding security group.