Abhishek Choudhary
1. Login to your AWS account & connect your github repo.
2. After connecting your Git repository, you'll be redirected to the build settings screen.Review and verify all the necessary application build configurations.
3. In the build settings, locate the Environment Variables section and add each required env variable carefully, one by one.
4. After adding environment variables, before clicking the Deploy button, Amplify will prompt you to review and edit the amplify.yml file. You must update this file to include all necessary environment variables required by your backend. These will be injected into the .env.production file used during the production build. Without this, your backend API keys will not be accessible
5. You can make the changes in the amplify.yml file as shown in the code below:
version: 1
frontend:
phases:
preBuild:
commands:
- echo "Generating .env.production from Amplify environment variables"
- echo "RAZORPAY_KEY_ID=$RAZORPAY_KEY_ID" >> .env.production
- echo "RAZORPAY_KEY_SECRET=$RAZORPAY_KEY_SECRET" >>
.env.production
- echo "EMAIL_SECRET_PASSWORD=$EMAIL_SECRET_PASSWORD" >>
.env.production
- echo "BUCKET_ACCESS_KEY_ID=$BUCKET_ACCESS_KEY_ID" >>
.env.production
- echo
"BUCKET_SECRET_ACCESS_KEY=$BUCKET_SECRET_ACCESS_KEY" >>
.env.production
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
6. Ensure that the environment variable names used in the code (e.g.,$API_KEY) exactly match the keys defined in the AWS Amplify Environment Variables section. Consistency between the code and Amplify configuration is crucial for successful deployment
7. After that click on the deploy button & your application will be deployed in around 5-8 mins.
How to fix Puppeteer library to work in AWS Amplify
1. First install these packages in your project.
2. Install these libraries in your project - npm install [email protected] @sparticuz/chromium
3. After that update your next.config.mjs in the root of your project & append the code below:-
reactStrictMode: true,
output: "standalone", // recommended for serverless
experimental: {
serverActions: true,
},
webpack: (config, { isServer }) => {
if (isServer) {
config.externals.push("@sparticuz/chromium");
}
return config;
},
4. Also, update the Puppeteer launch configuration in your puppeteer-pdf.ts file as shown below.
Note: This setup is intended for production environments only. To test locally during development, you’ll need to revert back to using the original Puppeteer library
Note: This setup is intended for production environments only. To test locally during development, you’ll need to revert back to using the original Puppeteer library
5. After appending the code above your next.config.mjs should look like below. If you have any static build configuration then remove them, as static builds don't deploy on AWS Amplify
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: "standalone", // recommended for serverless
experimental: {
serverActions: true,
},
webpack: (config, { isServer }) => {
if (isServer) {
config.externals.push("@sparticuz/chromium");
}
return config;
},
images: {
unoptimized: true,
remotePatterns: [
{
protocol: "https",
hostname: "lh3.googleusercontent.com",
port: "",
pathname: "/**",
},
],
},
trailingSlash: true,
sassOptions: {
implementation: "sass-embedded",
},
};
export default nextConfig;
import chromium from "@sparticuz/chromium";
import puppeteer from "puppeteer-core";
const browser = await puppeteer.launch({
args: chromium.args,
defaultViewport: chromium.defaultViewport,
executablePath: await chromium.executablePath(),
headless: true,
ignoreHTTPSErrors: true,
});
6. This ensures that the Puppeteer service is executed in the background during the build process
Want to work together?
Get answers and advice from people you want it from. Techsphere designers and developers will help you create awesome softwares based on your requirements.