I am trying to deploy a next.js (ssr) application in AWS' Amplify using the CDK but Amplify fails to identify the app as next.js ssr. When I do it manually though, using AWS UI, app is identified as SSR and works as expected.
This is generated by aws-cdk/aws-amplify v118 as:
import * as cdk from '#aws-cdk/core';
import * as amplify from '#aws-cdk/aws-amplify';
import codebuild = require('#aws-cdk/aws-codebuild');
export class AmplifyStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props: cdk.StackProps) {
super(scope, id, props);
const sourceCodeProvider = new amplify.GitHubSourceCodeProvider({
owner: '.....',
repository: '....',
oauthToken: cdk.SecretValue.secretsManager('github-token'),
});
const buildSpec = codebuild.BuildSpec.fromObjectToYaml(
{
version: 1,
applications: [
{
frontend: {
phases: {
preBuild: {
commands: [
"npm install"
]
},
build: {
commands: [
"npm run build"
]
}
},
artifacts: {
baseDirectory: ".next",
files: [
"**/*"
]
},
cache: {
paths: [
"node_modules/**/*"
]
}
}
}
]
}
);
const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
sourceCodeProvider: sourceCodeProvider,
buildSpec: buildSpec
});
amplifyApp.addBranch('develop', {
basicAuth: amplify.BasicAuth.fromGeneratedPassword('dev')
});
amplifyApp.addCustomRule({
source: "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
target: "/index.html",
status: amplify.RedirectStatus.REWRITE
});
}
}
Which is identical to what AWS has generated when I do it manually from UI. The difference here is the lack of Framework identification as shown in picture. Any ideas?
To answer my own question, I was missing the role as without it aws won't create the necessary resources. (role: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-iam-readme.html)
Edit to elaborate on how i fixed it:
Added a new role that can be used by amplify
const role = new iam.Role(this, 'amplify-role-webapp-'+props.environment, {
assumedBy: new iam.ServicePrincipal('amplify.amazonaws.com'),
description: 'Custom role permitting resources creation from Amplify',
});
and assigned a policy (AdministratorAccess) that role
let iManagedPolicy = iam.ManagedPolicy.fromAwsManagedPolicyName(
'AdministratorAccess',
);
role.addManagedPolicy(iManagedPolicy)
Then upon creating the app, i assigned the role to the app:
const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
sourceCodeProvider: sourceCodeProvider,
buildSpec: buildSpec,
role: role <--- this line here
});
The amplify app requires authorisation to create the relevant resources:
// This is for demonstrations purposes only; Do not give full access for production usage!
amplifyApp.grantPrincipal.addToPrincipalPolicy(new iam.PolicyStatement({
resources: ["*"],
actions: ['*'],
}))
Source Code Showcase
Related
I am trying to deploy NextJs and NextAuth.js to AWS using CDK (Cloud Development Kit). I have cloned the NextAuth.js example project (https://github.com/nextauthjs/next-auth-example) and
installed "serverless-http" for handling the binding from Lambda to NextJs. I attempted to follow this guide https://remaster.com/blog/nextjs-lambda-serverless-framework but using AWS CDK instead of the serverless.yml file as I am integrating it with existing infrastructure.
next.config.js:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
unoptimized: true
},
output: 'standalone'
}
module.exports = nextConfig
[...nextauth].ts (From the example but using a simple credentials provider that always resolves):
import NextAuth, { NextAuthOptions } from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
export const authOptions: NextAuthOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
username: { label: "Username", type: "text", placeholder: "jsmith" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
return { id: "1", name: "J Smith", email: "jsmith#example.com" }
}
})
],
theme: {
colorScheme: "light",
},
callbacks: {
async jwt({ token }) {
token.userRole = "admin"
return token
},
},
}
export default NextAuth(authOptions)
server.ts:
import { NextConfig } from "next";
import NextServer from "next/dist/server/next-server";
import serverless from "serverless-http";
// #ts-ignore
import { config } from "./.next/required-server-files.json";
const nextServer = new NextServer({
hostname: "localhost",
port: 3000,
dir: __dirname,
dev: false,
conf: {
...(config as NextConfig),
},
});
export const handler = serverless(nextServer.getRequestHandler());
It is being built using the following script:
#!/bin/bash
BUILD_FOLDER=.dist
yarn build
rm -rf $BUILD_FOLDER
mv .next/standalone/ $BUILD_FOLDER/
cp -r .next/static $BUILD_FOLDER/.next
rm $BUILD_FOLDER/server.js
cp -r next.config.js $BUILD_FOLDER/
cp -r node_modules/serverless-http $BUILD_FOLDER/node_modules/serverless-http
tsc server.ts --outDir .dist --esModuleInterop true
cp -r public $BUILD_FOLDER/
This is deployed using AWS written in CDK C#. Primarily using a HttpApi and a single Lambda. Each configured as shown below:
Lambda:
var function = new Function(this, "nextjs-function", new FunctionProps
{
Code = Code.FromAsset(...".dist"),
Handler = "server.handler",
Runtime = Runtime.NODEJS_16_X,
...
Environment = new Dictionary<string, string>
{
{ "NEXTAUTH_URL", "https://myDomainName.com" },
{ "NEXTAUTH_SECRET", portalSecret },
}
});
HttpApi:
var httpApi = new HttpApi(this, "http-api", new HttpApiProps
{
DisableExecuteApiEndpoint = true,
DefaultIntegration = new HttpLambdaIntegration("nextjs-route", function),
DefaultDomainMapping = new DomainMappingOptions
{
DomainName = "myDomainName.com"
}
});
Opening the deployed webpage and clicking the "Sign In" button at the top, I get taken to /api/auth/signin?callbackUrl=%2F with a form. Without touching the credentials I click "Sign in with credentials". This results in the page reloading and nothing happening. Expected behaviour should be a session and a redirect back to the home page (/) as is happening when running it locally using either yarn dev or yarn build && yarn start.
I get no errors client/server-side thus leaving me in the dark.
I suspect that it has to do with domain configuration but I am unable to find the problem. I tested with another NextJs/NextAuth project using a AWS Cognito provider. This also had problems as when I clicked the sign in button I got an "Unexpected token" error due to the underlying signIn(...) function (from the NextAuth library) trying to parse the fetched page as JSON, which turned out to be the sign-in-page. Thus my suspicion of something domain-related.
I am trying to extend what is returned in the StravaProvider profile() in nextAuth
pages/api/auth/[...nextauth].js
export default NextAuth({
providers: [
StravaProvider({
clientId: process.env.STRAVA_CLIENT_ID,
clientSecret: process.env.STRAVA_CLIENT_SECRET,
profile(profile) {
// LOGS FINE IN CONSOLE
console.log("profile", profile);
return {
id: profile.id,
image: profile.profile,
name: `${profile.firstname} ${profile.lastname}`,
// THE FOLLOWING DOES NOT RETURN
profile: profile,
};
},
}),
],
How do I expose the full profile object?. It's only returning the image and name.
In my console log - within my StravaProvider of profile - I can see the whole object, but can't seem to return it?
If I assign profile to the name key this works. I seem to be limited with the keys I can add?
StravaProvider{...
profile(profile) {
return {
// THE FOLLOWING WORKS
name: profile,
};
},
The returned session object from my initial example and how I am accessing it is:
const { data: session } = useSession();
console.log(session);
{
"user": {
"name": "JOE BLOGGS",
"image": "https://dgalywyr863hv.cloudfront.net/pictures/athletes/2909982/3009569/1/large.jpg"
},
"expires": "2023-02-03T13:39:01.521Z"
}
I realise I can use a callback and modify the session, but I need the entire profile there in the first place from the Provider to do that.
Repo - https://github.com/webknit/NextAuth/
I'm trying to create a custom resource in AWS Amplify, using AWS CDK. And, I'm trying to use an existing lambda function as a provider event handler.
When I do amplify push the resource creation fails with no useful information. What am I doing wrong here? How can I troubleshoot this?
import * as cdk from '#aws-cdk/core';
import * as AmplifyHelpers from '#aws-amplify/cli-extensibility-helper';
import * as cr from "#aws-cdk/custom-resources";
import * as logs from "#aws-cdk/aws-logs";
import * as lambda from '#aws-cdk/aws-lambda';
import { AmplifyDependentResourcesAttributes } from "../../types/amplify-dependent-resources-ref"
export class cdkStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps, amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps) {
super(scope, id, props);
/* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
new cdk.CfnParameter(this, 'env', {
type: 'String',
description: 'Current Amplify CLI env name',
});
const dependencies: AmplifyDependentResourcesAttributes = AmplifyHelpers.addResourceDependency(this,
amplifyResourceProps.category,
amplifyResourceProps.resourceName,
[{
category: "function",
resourceName: "myFunction"
}]
);
const myFunctionArn = cdk.Fn.ref(dependencies.function.myFunction.Arn);
const importedLambda = lambda.Function.fromFunctionArn(this, "importedLambda", myFunctionArn);
const provider = new cr.Provider(this, "MyCustomResourceProvider", {
onEventHandler: importedLambda,
logRetention: logs.RetentionDays.ONE_DAY,
})
new cdk.CustomResource(this, "MyCustomResource", {
serviceToken: provider.serviceToken
})
}
}
Here's the error I get:
CREATE_FAILED custommyCustomResourceXXXX AWS::CloudFormation::Stack Parameters: [AssetParametersXXXX, .....] must have values.
I got a response from AWS support team. It looks like the AssetParameters error is caused by the fact that Amplify CLI currently doesn't support a high level construct of Custom Resource Provider inside the custom resource category in Amplify CLI. The resource should be created this way:
import * as cdk from '#aws-cdk/core';
import * as AmplifyHelpers from '#aws-amplify/cli-extensibility-helper';
import * as lambda from '#aws-cdk/aws-lambda';
import { AmplifyDependentResourcesAttributes } from "../../types/amplify-dependent-resources-ref"
export class cdkStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps, amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps) {
super(scope, id, props);
/* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
new cdk.CfnParameter(this, 'env', {
type: 'String',
description: 'Current Amplify CLI env name',
});
const dependencies: AmplifyDependentResourcesAttributes = AmplifyHelpers.addResourceDependency(this,
amplifyResourceProps.category,
amplifyResourceProps.resourceName,
[{
category: "function",
resourceName: "myFunction"
}]
);
const myFunctionArn = cdk.Fn.ref(dependencies.function.myFunction.Arn);
const importedLambda = lambda.Function.fromFunctionArn(this, "importedLambda", myFunctionArn);
new cdk.CustomResource(this, "MyCustomResource", {
serviceToken: importedLambda.functionArn
})
}
}
My NextAuth are returning 404 when searching for api/auth/session at credential provider custom login, seems like Next Auth are pointing to the wrong url.
My next.config.js have a basePath that points to a subfolder basePath: '/twenty-test' and my NEXTAUTH_URL is already set to my subdomain,
but when I go to my credential provider login custom page (that was working at localhost because it was not at a subdomain), i see an 404 error at console like https://explample.com/api/auth/session 404.
This is my custom provider config:
providers: [
CredentialProvider({
name: 'Credentials',
type: 'credentials',
async authorize(credentials) {
//
if(credentials.email == "john#gmail.com" && credentials.password == "test"){
return {
id: 2,
name: 'John Doe',
email: 'john#gmail.com',
permition: {
group: 2,
level: 0
}
}
}
return null;
}
})
],
This is my next.config.js
const nextConfig = {
reactStrictMode: true,
basePath: '/twenty-test',
images: {
domains: ['example.com'],
},
}
module.exports = nextConfig
This is my NEXTAUTH_URL env variable
NEXTAUTH_URL="https://example.com/twenty-test/api/auth"
This is my getCsrfToken config
export async function getServerSideProps(context) {
return {
props: {
csrfToken: await getCsrfToken(context)
}
}
}
My project are not on vercel. I'm using a custom server config to deploy with cPanel
The problem was on building the app in localhost and deploying on server.
The app was building expecting NEXTAUTH_URL as localhost, and simply changing the .env variable on server didnt worked.
The solution was building the app on server.
Another workaround was replacing the localhost NEXTAUTH_URL ocurrences after building with the value of NEXTAUTH_URL on server.
I am trying to use the gridsome-plugin-firestore plugin (https://gridsome.org/plugins/gridsome-source-firestore). I want to use that plugin to connect to a simple firestore database collection called news. News has a number of documents with various fields:
content
published_date
summary
author
title
etc.
Does anyone know how am I supposed to set up the gridsome.config file to access this collection using the gridsome-plugin-firestore plugin?. I cannot figure it out from the instructions given.
The Gridsome docs are a little clearer than npm version, but you need to generate a Firebase Admin SDK private key and download the whole file to your Gridsome app and import it into gridsome.config.js as a module, name it whatever you want for the options > credentials: require field as below.
First, you'll need the Firestore plugin
$ yarn add gridsome-source-firestore
Then in gridsome.config.js
const { db } = require('gridsome-source-firestore')
module.exports = {
plugins: [
{
use: 'gridsome-source-firestore',
options: {
credentials: require('./my-project-firebase-adminsdk-qw2123.json'), //
Replace with your credentials file you downloaded.
debug: true, // Default false, should be true to enable live data updates
ignoreImages: false, // Default false
imageDirectory: 'fg_images', // Default /fg_images
collections: [
{
ref: (db) => {
return db.collection('news')
},
slug: (doc, slugify) => {
return `/news/${slugify(doc.data.title)}`
},
children: [
{
ref: (db, parentDoc) => {
return parentDoc.ref.collection('posts')
},
slug: (doc, slugify) => {
return `/${slugify(doc.data.title)}`
},
}
]
}
]
}
}
]
}
You might have to change "posts" to "content" depending on your DB structure and alter the corresponding page queries to suit, there are some examples and other useful setup info in this Gridsome Firestore starter on Github https://github.com/u12206050/gridsome-firestore-starter.git