Feature request: How to deploy Nuxt SSR on AWS Amplify

[hmaesta]

AWS Amplify it's a very easy way of deploying web apps (Netlify-like). Since Sep 15 2020 they are supporting SSR deploy for Next.js and Nuxt.js

→ Amplify blog: SSR Support for AWS Amplify JavaScript Libraries

Currently there is not an easy way of deploying Nuxt SSR on AWS and packages for serverless deploy are still very confusing.

On Amplify blog there is a complete tutorial for Next, but nothing for Nuxt... 😢

So, as a feature request, would be nice a tutorial for deploying Nuxt SSR on AWS Amplify.

[cyriaque-ovaga]

Have a solution ?

[debs-obrien]

pr welcome if anyone has experience in AWS Amplify

[CodeSpent]

I am currently working on this, and will offer a write up if I can get it sorted.

[cyriaque-ovaga]

Solution https://www.youtube.com/watch?v=hk1ZmBD7n60

[debs-obrien]

sounds great @CodeSpent thanks. And thanks for sharing link @Manage-Society 👍

[CodeSpent]

@cyriaque-ovaga the video there only covers deploying with static assets, but not SSR, unfortunately.

Despite the adoption of SSR for Amplify, their aws-amplify-vue plugin is closed source so I'm really struggling to figure out how to get it working.

As far as I can tell there's no manual way outside the plugin to actually tell Amplify to enable SSR which without this configuration line, Amplify will always try and serve Nuxt build artifacts statically.

Support is still pretty new, so I hope it's just a matter of time. I did open a ticket with AWS support & will hopefully have some information to relay soon.

[mcanvar]

Looking forward to this for a bit of time. I am really excited!

[cyriaque-ovaga]

@CodeSpent Hello, I used his walk. In the nuxt.config file remove the target line or put target "server"

[oceangravity]

Hi guys!

I just deploy my first Nuxt app (SSR) on AWS Amplify using this config:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

I hope it works for you.

[bradley-varol]

I was having issue with a blank screen and it turned out I needed to set up a rewrite rule in Amplify to 200.html and not index.html.

[Tobeyforce]

Hi guys!

I just deploy my first Nuxt app (SSR) on AWS Amplify using this config:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

I hope it works for you.

Isn't generate for static sites? Do we have any update on this? AWS does indeed mention SSR on their blog but it's puzzling trying to figure out how to do it. @CodeSpent Did you end up getting a decent answer from AWS?

[danielvouch]

@CodeSpent Any update on this?

[CodeSpent]

I've unfortunately so far only gotten the runaround with basic support & invites to upgrade my support plan for more in-depth help.

I've since moved away from the idea of Amplify until some new information surfaces.

[StackTrac3]

AWS Support will probably just tell you how to run nuxt on AWS e3, which you can find guides for.

Amplify supports two types of cli backends: REST and GraphQL.

The alternative is hosting a node app through amplify add backend. Yea, that's not supported.

The build file for amplify add hosting only uses node to nuxt generate a static site - and I think that really confuses a lot of people including AWS.

The next integration is using lamba@edge

If you want to host nuxt with ssr or target : server and any middleware, seems like looking for a node host is more your thing at this time.

[bcs-gbl]

Amplify support for Next.js SSR: https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html

I hope Nuxt is coming

[Yarob50]

any update for Nuxt guys?

[dreamtank89]

Yeah I would like to know if there is any update for Nuxt

[rsornellas]

any update?

[hmaesta]

any update?

Amplify ~still sucks~ is kind of a mystery and support for everything except static websites is very unknown. Even for Next, that they have an official tutorial, support is too simple for a real-world SSR application.

You can notice by previous comments on this issue that a lot of people tried (and failed) to deploy SSR on Amplify.

---

My personal advise:

• If you must deploy on AWS: ~hire a sysadmin and~ use EC2
• If you need go to live ASAP and can use Google Cloud: use App Engine (official instructions here)
• If you don't know what you need: see all options in Nuxt Docs

---

TLDR; forget Amplify or wait for an update from their side.

[bradley-varol]

any update?

Amplify ~still sucks~ is kind of a mistery and support for everything except static websites are very unknown. Even for Next, that they have an official tutorial, support is too simple for a real-world SSR application.

You can notice by previous comments on this issue that a lot of people tried (and failed) to deploy SSR on Amplify.

My personal advise:

* If you must deploy on **AWS**: ~hire a sysadmin and~ use EC2

* If you need **speed** and can use **Google Cloud**: use App Engine [(official instructions here)](https://nuxtjs.org/docs/2.x/deployment/appengine-deployment)

* If you don't know what you need: [see all options in Nuxt Docs](https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox)

TLDR; forget Amplify or wait for an update from their side.

Agree and for anyone interested, Digital Ocean's App Platform has worked well for me. Their (zero downtime) deployments are a bit slow but page speed has been good and the platofrm auto-scales so you don't need to worry about that. The only really annoying thing for me was needing to move my DNS records to Digital Ocean.

Vercel nice to use but I had 500 errors from Lambda - not sure if that's been fixed yet.

[bart]

Any updates on this? As far as I can see problem is running the npm run start on a serverless environment, right? But how does Next.js do it? I mean SSR should be the same approach for every single framework. We need at least one node instance that is running the code somehow.

[StackTrac3]

Server-rendered pages or API routes get deployed in your account as Lambda@Edge functions served via CloudFront

https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/

[heygambo]

I'm also interested in getting this to work with Amplify, but I couldn't figure it out so far.

Currently, I'm working on a custom solution that might be interesting for other people here.

It's possible to put a docker container on ECR, then have it run on Fargate. From there, you can add a load balancer and auto-scaling.

If you would like to cache particular pages, you can add a CloudFront distribution in front of it and add a few cache behaviors for static files and pages like the about us page.

So it's like this: Request -> Cloudfront -> Load Balancer -> Fargate Task

Then you can use CodePipeline to build new docker containers and deploy them to the ECS service automatically.

[darrenchiu]

please help to upvote here. This is currently a open feature request for this. https://github.com/aws-amplify/amplify-console/issues/1860

[cyfung1031]

can someone tell me that

https://nuxtjs.org/deployments/amazon-web-services

is also for SSR feature or not?

[retroriff]

@cyfung1031 It isn't. If you need SSR you should better try Digital Ocean or Google App Engine.

[cyfung1031]

@cyfung1031 It isn't. If you need SSR I recommend Digital Ocean or Google App Engine.

how about this articles? https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/

I found it in aws website

does it work?

and also this. https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/

Does anyone can share the experience with that??

[bcs-gbl]

@cyfung1031 It isn't. If you need SSR I recommend Digital Ocean or Google App Engine.

how about this articles? https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/

I found it in aws website

does it work?

and also this. https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/

Does anyone can share the experience with that??

only Next.js supported

[brianmykietkaecra]

Hi everyone, any updates on this?

[nikolas-psaroudakis-rokoko]

@cyfung1031 It isn't. If you need SSR I recommend Digital Ocean or Google App Engine.

how about this articles? https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/

I found it in aws website

does it work?

and also this. https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/

Does anyone can share the experience with that??

A plugin worked for me that e.g injects $Auth to context and to "this".

import { Amplify, Auth, withSSRContext } from 'aws-amplify'
import config from '../aws-exports'
Amplify.configure({ ...config, ssr: true })

export default (context, inject) => {
  if (process.client) {
    inject('Auth', Auth)
  } else if (process.server) {
    const { req } = context
    const { Auth } = withSSRContext({ req })
    Auth.configure({ ...config })
    inject('Auth', Auth)
  }
}