Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
examples(vercel): testing vercel serverless functions (#3478)
* examples(vercel): add initial setup * examples(vercel): edit readm * examples(vercel): add test cases * examples(vercel): remove tokens * examples(vercel): edit readme * examples(vercel): comment out dev env * docs(vercel): update example readme * examples(vercel): fixes * examples(vercel): edit no otel sample * example(vercel): edit main sample
- Loading branch information
1 parent
26be196
commit 73854c2
Showing
28 changed files
with
10,614 additions
and
1 deletion.
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
examples/integration-testing-vercel-functions/.env.development
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# OTLP HTTP | ||
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4318" | ||
|
||
# Vercel Postgres | ||
POSTGRES_DATABASE="**********" | ||
POSTGRES_HOST="**********" | ||
POSTGRES_PASSWORD="**********" | ||
POSTGRES_PRISMA_URL="**********" | ||
POSTGRES_URL="**********" | ||
POSTGRES_URL_NON_POOLING="**********" | ||
POSTGRES_USER="**********" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# OTLP HTTP | ||
OTEL_EXPORTER_OTLP_ENDPOINT="http://tracetest-agent:4318" | ||
|
||
# Vercel Postgres | ||
POSTGRES_DATABASE="**********" | ||
POSTGRES_HOST="**********" | ||
POSTGRES_PASSWORD="**********" | ||
POSTGRES_PRISMA_URL="**********" | ||
POSTGRES_URL="**********" | ||
POSTGRES_URL_NON_POOLING="**********" | ||
POSTGRES_USER="**********" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"extends": "next/core-web-vitals" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
.yarn/install-state.gz | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
FROM node:20-alpine AS base | ||
FROM base AS builder | ||
WORKDIR /app | ||
RUN apk add --no-cache g++ make py3-pip | ||
|
||
COPY package.json package-lock.json ./ | ||
RUN npm i | ||
|
||
COPY app ./app | ||
COPY pages ./pages | ||
COPY public ./public | ||
COPY next.config.js . | ||
COPY tsconfig.json . | ||
COPY instrumentation.ts . | ||
COPY instrumentation.node.ts . | ||
|
||
RUN npm run build | ||
|
||
# Step 2. Production image, copy all the files and run next | ||
FROM base AS runner | ||
WORKDIR /app | ||
# Don't run production as root | ||
RUN addgroup --system --gid 1001 nodejs | ||
RUN adduser --system --uid 1001 nextjs | ||
USER nextjs | ||
|
||
COPY --from=builder /app/public ./public | ||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ | ||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static | ||
CMD ["node", "server.js"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
# Integration Testing Vercel Functions with Tracetest and OpenTelemetry | ||
|
||
This example is from the article [**Integration Testing Vercel Serverless Functions**](add link) showing how to run integration tests against Vercel Functions using [OpenTelemetry](https://opentelemetry.io/) and Tracetest. | ||
|
||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | ||
|
||
It's using Vercel Functions via `/pages/api`, with [OpenTelemetry configured as explained in the Vercel docs](https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration). | ||
|
||
## Prerequisites | ||
|
||
- [Tracetest Account](https://app.tracetest.io/) | ||
- [Tracetest Agent API Key](https://docs.tracetest.io/configuration/agent) | ||
- [Tracetest Environment Token](https://docs.tracetest.io/concepts/environment-tokens) | ||
- [Vercel Account](https://vercel.com/) | ||
- [Vercel Postgres Database](https://vercel.com/docs/storage/vercel-postgres) | ||
|
||
## Getting Started with Docker | ||
|
||
0. Set Tracetest Agent API Key in `docker-compose.yaml`, and set Tracetest Environment Token in `test/run.bash`. Set the Vercel Postgres credentials in the `.env*` files. | ||
|
||
1. Run Docker Compose | ||
|
||
```bash | ||
docker compose up -d --build | ||
``` | ||
|
||
2. Run Integration Tests | ||
|
||
```bash | ||
docker compose run integration-tests | ||
``` | ||
|
||
(Optional. Trigger Tracetest Tests via `app.tracetest.io` against `http://next-app:3000`) | ||
|
||
## Getting Started Locally | ||
|
||
0. Set the Vercel Postgres credentials in the `.env*` files. | ||
|
||
1. Install Node Packages | ||
|
||
```bash | ||
npm i | ||
``` | ||
|
||
2. Run Development Server | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
3. Start Tracetest Agent | ||
|
||
```bash | ||
tracetest start --api-key ttagent_<apikey> | ||
``` | ||
|
||
4. Trigger Tracetest Tests via CLI | ||
|
||
```bash | ||
tracetest run test -f ./test-api.development.yaml | ||
``` | ||
|
||
(Optional. Trigger Tracetest Tests via `app.tracetest.io` against `http://localhost:3000`) | ||
|
||
## Learn more | ||
|
||
Feel free to check out the [docs](https://docs.tracetest.io/), and join our [Slack Community](https://dub.sh/tracetest-community) for more info! |
Binary file not shown.
27 changes: 27 additions & 0 deletions
27
examples/integration-testing-vercel-functions/app/globals.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
|
||
:root { | ||
--foreground-rgb: 0, 0, 0; | ||
--background-start-rgb: 214, 219, 220; | ||
--background-end-rgb: 255, 255, 255; | ||
} | ||
|
||
@media (prefers-color-scheme: dark) { | ||
:root { | ||
--foreground-rgb: 255, 255, 255; | ||
--background-start-rgb: 0, 0, 0; | ||
--background-end-rgb: 0, 0, 0; | ||
} | ||
} | ||
|
||
body { | ||
color: rgb(var(--foreground-rgb)); | ||
background: linear-gradient( | ||
to bottom, | ||
transparent, | ||
rgb(var(--background-end-rgb)) | ||
) | ||
rgb(var(--background-start-rgb)); | ||
} |
22 changes: 22 additions & 0 deletions
22
examples/integration-testing-vercel-functions/app/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import type { Metadata } from 'next' | ||
import { Inter } from 'next/font/google' | ||
import './globals.css' | ||
|
||
const inter = Inter({ subsets: ['latin'] }) | ||
|
||
export const metadata: Metadata = { | ||
title: 'Create Next App', | ||
description: 'Generated by create next app', | ||
} | ||
|
||
export default function RootLayout({ | ||
children, | ||
}: { | ||
children: React.ReactNode | ||
}) { | ||
return ( | ||
<html lang="en"> | ||
<body className={inter.className}>{children}</body> | ||
</html> | ||
) | ||
} |
113 changes: 113 additions & 0 deletions
113
examples/integration-testing-vercel-functions/app/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
import Image from 'next/image' | ||
|
||
export default function Home() { | ||
return ( | ||
<main className="flex min-h-screen flex-col items-center justify-between p-24"> | ||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"> | ||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30"> | ||
Get started by editing | ||
<code className="font-mono font-bold">app/page.tsx</code> | ||
</p> | ||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none"> | ||
<a | ||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
By{' '} | ||
<Image | ||
src="/vercel.svg" | ||
alt="Vercel Logo" | ||
className="dark:invert" | ||
width={100} | ||
height={24} | ||
priority | ||
/> | ||
</a> | ||
</div> | ||
</div> | ||
|
||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]"> | ||
<Image | ||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" | ||
src="/next.svg" | ||
alt="Next.js Logo" | ||
width={180} | ||
height={37} | ||
priority | ||
/> | ||
</div> | ||
|
||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left"> | ||
<a | ||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" | ||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<h2 className={`mb-3 text-2xl font-semibold`}> | ||
Docs{' '} | ||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> | ||
-> | ||
</span> | ||
</h2> | ||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}> | ||
Find in-depth information about Next.js features and API. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<h2 className={`mb-3 text-2xl font-semibold`}> | ||
Learn{' '} | ||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> | ||
-> | ||
</span> | ||
</h2> | ||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}> | ||
Learn about Next.js in an interactive course with quizzes! | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" | ||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<h2 className={`mb-3 text-2xl font-semibold`}> | ||
Templates{' '} | ||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> | ||
-> | ||
</span> | ||
</h2> | ||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}> | ||
Explore starter templates for Next.js. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" | ||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<h2 className={`mb-3 text-2xl font-semibold`}> | ||
Deploy{' '} | ||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> | ||
-> | ||
</span> | ||
</h2> | ||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}> | ||
Instantly deploy your Next.js site to a shareable URL with Vercel. | ||
</p> | ||
</a> | ||
</div> | ||
</main> | ||
) | ||
} |
43 changes: 43 additions & 0 deletions
43
examples/integration-testing-vercel-functions/docker-compose.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
version: "3" | ||
|
||
services: | ||
next-app: | ||
image: adnanrahic/next-app:v1 | ||
build: | ||
context: . | ||
dockerfile: ./Dockerfile | ||
env_file: | ||
- .env.docker | ||
restart: always | ||
ports: | ||
- 3000:3000 | ||
networks: | ||
- tracetest | ||
|
||
tracetest-agent: | ||
image: kubeshop/tracetest-agent:latest | ||
environment: | ||
- TRACETEST_API_KEY=ttagent_<apikey> # Add your key | ||
ports: | ||
- 4317:4317 | ||
- 4318:4318 | ||
networks: | ||
- tracetest | ||
|
||
integration-tests: | ||
image: adnanrahic/integration-tests:v1 | ||
profiles: | ||
- tests | ||
build: | ||
context: ./ | ||
dockerfile: ./test/Dockerfile | ||
volumes: | ||
- ./test/:/app/test/ | ||
depends_on: | ||
tracetest-agent: | ||
condition: service_started | ||
networks: | ||
- tracetest | ||
|
||
networks: | ||
tracetest: |
22 changes: 22 additions & 0 deletions
22
examples/integration-testing-vercel-functions/instrumentation.node.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { NodeSDK } from '@opentelemetry/sdk-node' | ||
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http' | ||
import { Resource } from '@opentelemetry/resources' | ||
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions' | ||
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node' | ||
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch' | ||
|
||
const sdk = new NodeSDK({ | ||
// The OTEL_EXPORTER_OTLP_ENDPOINT env var is passed into "new OTLPTraceExporter" automatically. | ||
// If the OTEL_EXPORTER_OTLP_ENDPOINT env var is not set the "new OTLPTraceExporter" will | ||
// default to use "http://localhost:4317" for gRPC and "http://localhost:4318" for HTTP. | ||
// This sample is using HTTP. | ||
traceExporter: new OTLPTraceExporter(), | ||
instrumentations: [ | ||
getNodeAutoInstrumentations(), | ||
new FetchInstrumentation(), | ||
], | ||
resource: new Resource({ | ||
[SemanticResourceAttributes.SERVICE_NAME]: 'integration-testing-vercel-functions', | ||
}), | ||
}) | ||
sdk.start() |
Oops, something went wrong.