GonzaloHirsch / nuxt-blog-starter-ssr

This repository provides a starter configuration for creating an SSR blog using Nuxt 3, a progressive JavaScript framework. It includes basic setup for pages, layouts, and components, as well as pre-configured modules for SEO and content management. Perfect for starting a new blog project with Nuxt 3.

Nuxt 3 Blog Starter (with SSR)

Look at the Nuxt 3 documentation to learn more.

---

• Setup
• Development Server
  • Simulating a Production Server
• Terraform
  • Backend
  • Artifacts
  • Build out Docker Image
  • Server
  • Workload Identity Federation

---

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Simulating a Production Server

You can simulate a production deployment by building the server and running it locally:

npm run build && node .output/server/index.mjs

You will find the server on http://localhost:3000.

## Docker Image

You can run the Docker image locally to test the production server by doing the following (being in the root of the repository):

docker build . -t ssrblog
docker run -d -p 3000:3000 ssrblog

You can visualize the application in http://localhost:3000, and if you inspect the network requests, you should see requests for each of the documents once you travel to specific URLs.

Terraform

This repository uses Terraform to simplify deploying all the infrastructure related to this. Refer to the following sections for instructions on how to deploy every component.

Note that you need the AWS CLI and GCP CLI configured in your environment.

Backend

Run this inside terraform/backend

This stack covers creating the bucket that will store all the Terraform state. These are all the commands necessary to deploy the backend bucket that will live in AWS:

terraform init
terraform plan
terraform apply
export BACKEND_ID=$(terraform output -raw backend_id)
export BACKEND_REGION=$(terraform output -raw backend_region)

After you apply this, note the name of the bucket, it should be at the end of the output and look like this. Write it down, it will be useful later on:

backend_id = "[SITE]--terraform-backend"

Note that the last command from the commands block will store the backend ID in a BACKEND_ID bash variable.

Artifacts

Run this inside terraform/resources--artifacts

This stack creates the artifact registry necessary for the Cloud Run instances to pick up artifacts from:

terraform init -backend-config="bucket=$BACKEND_ID" -backend-config="region=$BACKEND_REGION"
terraform plan
terraform apply
export REGISTRY_LOCATION=$(terraform output -raw registry_location)
export REGISTRY_NAME=$(terraform output -raw registry_name)
export PROJECT_ID=$(terraform output -raw gcp_project_id)

Build out Docker Image

Run this inside terraform

This part is how to build and push the Docker image into the registry (more info here):

SSR_IMAGE="ssr-site"
export IMAGE_URI="$REGISTRY_LOCATION-docker.pkg.dev/$PROJECT_ID/$REGISTRY_NAME/$SSR_IMAGE"
export REGISTRY_URI="$REGISTRY_LOCATION-docker.pkg.dev"
gcloud auth configure-docker $REGISTRY_LOCATION-docker.pkg.dev
(cd .. && docker build --platform linux/amd64 -t $IMAGE_URI . && docker push $IMAGE_URI)

If you have issues building the Docker image, removing node_modules and package-lock.json and re-running npm i works.

Server

Run this inside terraform/resources--server

This stack creates the artifact registry necessary for the Cloud Run instances to pick up artifacts from:

terraform init -backend-config="bucket=$BACKEND_ID" -backend-config="region=$BACKEND_REGION"
terraform plan -var="image=$IMAGE_URI"
terraform apply -var="image=$IMAGE_URI"

Workload Identity Federation

Run this inside terraform/resources--wif

This stack creates the WIF resources necessary for GitHub Actions to authenticate with the SA:

terraform init -backend-config="bucket=$BACKEND_ID" -backend-config="region=$BACKEND_REGION"
terraform plan
terraform apply