NuxtJs SSR website lambda

Tip

To deploy this project using GUI-based flow, navigate to console

simple Server-side rendered NuxtJS v3 application.
The project uses a Lambda function to run the Nuxt app and a S3 storage bucket with CDN to host the static content.
This project includes a pre-configured stacktape.yml configuration. The configured infrastructure is described in the stack description section

Pricing

The infrastructure required for this application uses exclusively "serverless", pay-per-use infrastructure. If your load won't get high, these costs will be close to $0.

Prerequisites

AWS account. If you don't have one, create new account here.
Stacktape account. If you don't have one, create new account here.
Stacktape installed.

Install on Windows (Powershell)

iwr https://installs.stacktape.com/windows.ps1 -useb | iex

Install on Linux

curl -L https://installs.stacktape.com/linux.sh | sh

Install on MacOS

curl -L https://installs.stacktape.com/macos.sh | sh

Install on MacOS ARM (Apple silicon)

curl -L https://installs.stacktape.com/macos-arm.sh | sh

1. Generate your project

To initialize the project, use

stacktape init --starterId nuxtjs-ssr-website-lambda

2. Deploy your stack

The deployment will take ~5-15 minutes. Subsequent deploys will be significantly faster.

Deploy from local machine

The deployment from local machine will build and deploy the application from your system. This means you also need to have:

Docker. To install Docker on your system, you can follow this guide.- Node.js installed.

To perform the deployment, use the following command:

stacktape deploy --stage <<stage>> --region <<region>>

stage is an arbitrary name of your environment (for example staging, production or dev-john)

region is the AWS region, where your stack will be deployed to. All the available regions are listed below.

Region name & Location	code
Europe (Ireland)	eu-west-1
Europe (London)	eu-west-2
Europe (Frankfurt)	eu-central-1
Europe (Milan)	eu-south-1
Europe (Paris)	eu-west-3
Europe (Stockholm)	eu-north-1
US East (Ohio)	us-east-2
US East (N. Virginia)	us-east-1
US West (N. California)	us-west-1
US West (Oregon)	us-west-2
Canada (Central)	ca-central-1
Africa (Cape Town)	af-south-1
Asia Pacific (Hong Kong)	ap-east-1
Asia Pacific (Mumbai)	ap-south-1
Asia Pacific (Osaka-Local)	ap-northeast-3
Asia Pacific (Seoul)	ap-northeast-2
Asia Pacific (Singapore)	ap-southeast-1
Asia Pacific (Sydney)	ap-southeast-2
Asia Pacific (Tokyo)	ap-northeast-1
China (Beijing)	cn-north-1
China (Ningxia)	cn-northwest-1
Middle East (Bahrain)	me-south-1
South America (São Paulo)	sa-east-1

Deploy using AWS CodeBuild pipeline

Deployment using AWS CodeBuild will build and deploy your application inside AWS CodeBuild pipeline. To perform the deployment, use

stacktape codebuild:deploy --stage <<stage>> --region <<region>>

stage is an arbitrary name of your environment (for example staging, production or dev-john)

region is the AWS region, where your stack will be deployed to. All the available regions are listed below.

Region name & Location	code
Europe (Ireland)	eu-west-1
Europe (London)	eu-west-2
Europe (Frankfurt)	eu-central-1
Europe (Milan)	eu-south-1
Europe (Paris)	eu-west-3
Europe (Stockholm)	eu-north-1
US East (Ohio)	us-east-2
US East (N. Virginia)	us-east-1
US West (N. California)	us-west-1
US West (Oregon)	us-west-2
Canada (Central)	ca-central-1
Africa (Cape Town)	af-south-1
Asia Pacific (Hong Kong)	ap-east-1
Asia Pacific (Mumbai)	ap-south-1
Asia Pacific (Osaka-Local)	ap-northeast-3
Asia Pacific (Seoul)	ap-northeast-2
Asia Pacific (Singapore)	ap-southeast-1
Asia Pacific (Sydney)	ap-southeast-2
Asia Pacific (Tokyo)	ap-northeast-1
China (Beijing)	cn-north-1
China (Ningxia)	cn-northwest-1
Middle East (Bahrain)	me-south-1
South America (São Paulo)	sa-east-1

Deploy using Github actions CI/CD pipeline

If you don't have one, create a new repository at https://github.com/new
Create Github repository secrets: https://docs.stacktape.com/user-guides/ci-cd/#2-create-github-repository-secrets
Replace <<stage>> and <<region>> in the .github/workflows/deploy.yml file.
git init --initial-branch=main
git add .
git commit -m "setup stacktape project"
git remote add origin git@github.com:<<namespace-name>>/<<repo-name>>.git
git push -u origin main
To monitor the deployment progress, navigate to your github project and select the Actions tab

stage is an arbitrary name of your environment (for example staging, production or dev-john)

region is the AWS region, where your stack will be deployed to. All the available regions are listed below.

Region name & Location	code
Europe (Ireland)	eu-west-1
Europe (London)	eu-west-2
Europe (Frankfurt)	eu-central-1
Europe (Milan)	eu-south-1
Europe (Paris)	eu-west-3
Europe (Stockholm)	eu-north-1
US East (Ohio)	us-east-2
US East (N. Virginia)	us-east-1
US West (N. California)	us-west-1
US West (Oregon)	us-west-2
Canada (Central)	ca-central-1
Africa (Cape Town)	af-south-1
Asia Pacific (Hong Kong)	ap-east-1
Asia Pacific (Mumbai)	ap-south-1
Asia Pacific (Osaka-Local)	ap-northeast-3
Asia Pacific (Seoul)	ap-northeast-2
Asia Pacific (Singapore)	ap-southeast-1
Asia Pacific (Sydney)	ap-southeast-2
Asia Pacific (Tokyo)	ap-northeast-1
China (Beijing)	cn-north-1
China (Ningxia)	cn-northwest-1
Middle East (Bahrain)	me-south-1
South America (São Paulo)	sa-east-1

Deploy using Gitlab CI pipeline

If you don't have one, create a new repository at https://gitlab.com/projects/new
Create Gitlab repository secrets: https://docs.stacktape.com/user-guides/ci-cd/#2-create-gitlab-repository-secrets
replace <<stage>> and <<region>> in the .gitlab-ci.yml file.
git init --initial-branch=main
git add .
git commit -m "setup stacktape project"
git remote add origin git@gitlab.com:<<namespace-name>>/<<repo-name>>.git
git push -u origin main
To monitor the deployment progress, navigate to your gitlab project and select CI/CD->jobs

stage is an arbitrary name of your environment (for example staging, production or dev-john)

region is the AWS region, where your stack will be deployed to. All the available regions are listed below.

Region name & Location	code
Europe (Ireland)	eu-west-1
Europe (London)	eu-west-2
Europe (Frankfurt)	eu-central-1
Europe (Milan)	eu-south-1
Europe (Paris)	eu-west-3
Europe (Stockholm)	eu-north-1
US East (Ohio)	us-east-2
US East (N. Virginia)	us-east-1
US West (N. California)	us-west-1
US West (Oregon)	us-west-2
Canada (Central)	ca-central-1
Africa (Cape Town)	af-south-1
Asia Pacific (Hong Kong)	ap-east-1
Asia Pacific (Mumbai)	ap-south-1
Asia Pacific (Osaka-Local)	ap-northeast-3
Asia Pacific (Seoul)	ap-northeast-2
Asia Pacific (Singapore)	ap-southeast-1
Asia Pacific (Sydney)	ap-southeast-2
Asia Pacific (Tokyo)	ap-northeast-1
China (Beijing)	cn-north-1
China (Ningxia)	cn-northwest-1
Middle East (Bahrain)	me-south-1
South America (São Paulo)	sa-east-1

3. Test your application

After a successful deployment, some information about the stack will be printed to the terminal (URLs of the deployed services, links to logs, metrics, etc.).

Explore your application at mainApiGateway -> url. The URL is printed to the terminal.

4. Run the application in development mode

To run functions in the development mode (remotely on AWS), you can use the dev command. For example, to develop and debug lambda function nuxtLambda, you can use

stacktape dev --region <<your-region>> --stage <<stage>> --resourceName nuxtLambda

The command will:

quickly re-build and re-deploy your new function code
watch for the function logs and pretty-print them to the terminal

The function is rebuilt and redeployed, when you either:

type rs + enter to the terminal
use the --watch option and one of your source code files changes

5. Hotswap deploys

Stacktape deployments use AWS CloudFormation under the hood. It brings a lot of guarantees and convenience, but can be slow for certain use-cases.
To speed up the deployment, you can use the --hotSwap flag that avoids Cloudformation.
Hotswap deployments work only for source code changes (for lambda function, containers and batch jobs) and for content uploads to buckets.
If the update deployment is not hot-swappable, Stacktape will automatically fall back to using a Cloudformation deployment.

stacktape deploy --hotSwap --stage <<stage>> --region <<region>>

6. Delete your stack

If you no longer want to use your stack, you can delete it.
Stacktape will automatically delete every infrastructure resource and deployment artifact associated with your stack.

stacktape delete --stage <<stage>> --region <<region>>

Stack description

Stacktape uses a simple stacktape.yml configuration file to describe infrastructure resources, packaging, deployment pipeline and other aspects of your project.

You can deploy your project to multiple environments (stages) - for example production, staging or dev-john. A stack is a running instance of an project. It consists of your application code (if any) and the infrastructure resources required to run it.

The configuration for this project is described below.

1. Resources

Every resource must have an arbitrary, alphanumeric name (A-z0-9).
Stacktape resources consist of multiple underlying AWS or 3rd party resources.

1.1 HTTP API Gateway

API Gateway receives requests and routes them to the container.

For convenience, it has CORS allowed.

resources:
  mainApiGateway:
    type: http-api-gateway
    properties:
      cors:
        enabled: true

1.2 Bucket

The bucket is used to store our static assets. By putting CDN in front of the bucket, its content can be distributed across the globe and served with minimal latencies.

New/modified static assets are automatically uploaded during deployment process.

We are also enabling cors on our bucket, to allow clients(browsers) access to the resources.

webBucket:
  type: bucket
  properties:
    cors:
      enabled: true
    directoryUpload:
      directoryPath: ./.output/public
      headersPreset: static-website
    cdn:
      enabled: true
      invalidateAfterDeploy: true

1.3 Function

Application is run in a lambda function.

The function is configured as follows:

Packaging - determines how the lambda artifact is built. The easiest and most optimized way to build the lambda from Typescript/Javascript is using stacktape-lambda-buildpack. We only need to configure entryfilePath. Stacktape automatically transpiles and builds the application code with all of its dependencies, creates the lambda zip artifact, and uploads it to a pre-created S3 bucket on AWS. You can also use other types of packaging.
Environment variables - We are passing URL of the static assets CDN to the function as an environment variable. URL can be easily referenced using a $ResourceParam() directive. This directive accepts a resource name (webBucket in this case) and the name of the bucket referenceable parameter (cdnUrl in this case). If you want to learn more, refer to referencing parameters guide and directives guide.
Events - Events determine how is function triggered. In this case, we are triggering the function when an event (HTTP request) is delivered to the HTTP API gateway. By configuring the path to /{proxy+} and the method to '*', the event integration routes all requests (no matter the method or path) coming to the HTTP API Gateway to the function.

nuxtLambda:
  type: function
  properties:
    packaging:
      type: stacktape-lambda-buildpack
      properties:
        entryfilePath: ./handler.ts
    environment:
      - name: NUXT_APP_CDN_URL
        value: $ResourceParam('webBucket', 'cdnUrl')
    events:
      - type: http-api-gateway
        properties:
          httpApiGatewayName: mainApiGateway
          method: "*"
          path: /{proxy+}

2. Application build hook

To automatically build the application before each deployment, the stacktape configuration contains a hook.

Hooks specify the commands or scripts which are executed automatically before or after command is executed (i.e every time before the stack is deployed). You can specify reusable script in scripts section of config and reference it inside a hook or inline script/command information directly.

scripts:
  nuxtBuild:
    executeCommand: npm run build

hooks:
  beforeDeploy:
    - executeNamedScript: nuxtBuild

Scripts specified in scripts section of config, can be run manually anytime using stp script:run command.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
assets		assets
components		components
public		public
.gitignore		.gitignore
README.md		README.md
app.vue		app.vue
handler.ts		handler.ts
nuxt.config.ts		nuxt.config.ts
package.json		package.json
stacktape.yml		stacktape.yml
tsconfig.json		tsconfig.json

stacktape/starter-nuxtjs-ssr-website-lambda

Folders and files

Latest commit

History

Repository files navigation

NuxtJs SSR website lambda

Pricing

Prerequisites

1. Generate your project

2. Deploy your stack

3. Test your application

4. Run the application in development mode

5. Hotswap deploys

6. Delete your stack

Stack description

1. Resources

1.1 HTTP API Gateway

1.2 Bucket

1.3 Function

2. Application build hook

About

Resources

Stars

Watchers

Forks

Languages