注目イベント!
春の新人向け連載企画開催中
新人エンジニアの皆さん、2024春、私たちと一緒にキャリアアップの旅を始めませんか?
IT業界への最初の一歩を踏み出す新人エンジニアをサポートする新連載スタート!
mameyose

Deploy a Nuxt3 SSR App on AWS Amplify with Zero Configuration

| 6 min read
Author: noboru-kudo noboru-kudoの画像
Caution

This article has been automatically translated.
The original article is here.

It's been about a year since the GA release of Nuxt3, and it seems to have matured quite a bit. The deployment method varies depending on the type of application you are using.

For static hosting using SPA or pre-rendering, it's relatively simple as you only need to deploy the generated static resources. However, if you adopt an SSR app that generates pages on the server side, which is becoming mainstream recently, you need to prepare a server environment such as a container separately, which can be quite cumbersome.

Just recently (2023-11-21), there was a post from Nuxt's official X account.

AWS Amplify hosting has supported SSR for about three years (since 2020-9). However, it felt like the only practical framework supported was Next.js (there might be some misunderstanding). This time, Nitro, the server engine of Nuxt3, has zero-config support for Amplify hosting. This seems to add Nuxt3 as a strong option for Amplify hosting.

Let's try this out immediately.

Prepare the Target Nuxt Application

#

The Nuxt application we will try in this article is the one created in the following Nuxt tutorial article.

Amplify support is available from Nuxt3 v3.8.2 (Nitro v2.8.0[1]) onwards, so let's update the version here.

npx nuxt upgrade
> ℹ Package Manager: npm 10.2.2
> ℹ Current nuxt version: 3.8.2

Amplify support is automatically detected and configured during deployment with zero configuration. No configuration changes are needed here.

This time, I created this as a private repository on GitHub.

Create Amplify Hosting

#

Here, we will create it using the AWS Management Console. Log in to the AWS Management Console and select the AWS Amplify service. Click "Get Started" for Amplify hosting.

amplify hosting - getting start

Select the Git provider. This time, since it is created as a GitHub repository, select GitHub.

select git provider

You will be redirected to the GitHub site, where you will install the Amplify app and grant read permissions to the repository.

GitHub Auth

A pull-down menu will display the selectable repositories, so specify the repository and deployment branch of the target application.

select nuxt3 app repository

Proceed to the next step, and the build settings page will be displayed. The generated Amplify configuration file does not need to be changed (auto-detected).

However, since SSR is used, check "Enable SSR app logs" in the "Deploy server-side rendering" section. If there are any environment variables for the build, specify them here (there are detailed settings below the SSR settings, though they are not fully visible).

build setting

The final confirmation page will be displayed. Click "Save and Deploy" as it is.

amplify hosting confirm

The build and deployment of Amplify hosting will start. It is complete when the following display appears. From this point on, it will continuously build and deploy when changes are detected by monitoring the branch of the target repository.

amplify hosting complete

On the left side, the part displayed as https://main.xxxxxxxxxxxxx.amplifyapp.com/ is the URL generated by Amplify. By clicking this link, you can confirm that the sample application has been deployed.

nuxt3 app

Of course, this domain can be changed to a custom domain. For details, refer to the official documentation of Amplify hosting.

Clicking on the branch name (main in this case) on the Amplify app page allows you to check the build details. Here, focus on the frontend build log part.

Amplify Hosting build log

You can see that aws-amplify is selected as the preset for Nitro. This is the preset newly added for Amplify hosting in Nitro. Nitro detects that it is an Amplify hosting build and outputs resources according to the Amplify hosting specifications under .amplify-hosting.

Check the Output of the Nuxt/Nitro Preset for Amplify Hosting

To check the output resources in the local environment, build by specifying the environment variable.

NITRO_PRESET=aws_amplify npm run build

Resources compliant with Amplify hosting are output under .amplify-hosting directly under the project root. For details on the Amplify hosting specifications, refer to the official documentation.

Refer to the source code of the Nitro preset to deepen your understanding.

You can check the server (SSR) logs from CloudWatch.

computed log
cloudwatch logs

It seems that the server side is running on Lambda.

Summary

#

Amplify hosting is simple! This time, I didn't do any server-side environment setup work, but Amplify did it all.

The most interesting thing I haven't tried this time is the preview mode for pull requests, similar to Netlify.

If this is available, it would be very efficient for development as you can review and check the operation when creating a PR (I will try it next time).

Also, it seems that tests can be incorporated into the deployment workflow (currently only Cypress).

For a simple application, you can safely publish the application without having to create a separate CD pipeline.


  1. https://github.com/unjs/nitro/releases/tag/v2.8.0 ↩︎

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。