برنامه Next.js خود را با AWS Amplify مانند یک حرفه ای راه اندازی کنید – آسان تر از چیزی است که فکر می کنید

اگر از Vercel استفاده نمی کنید، استقرار یک برنامه Next.js می تواند یک کار دلهره آور برای توسعه دهندگان باشد. اما با آمازون آمپلیفی، می‌توانید به راحتی و به سرعت برنامه خود را بدون از دست دادن قابلیت‌های کلیدی مانند ISR، SSR و سایر موارد Next.js اجرا کنید.

این چیزی است که در این پست یاد خواهیم گرفت.

در اینجا، ما شما را از طریق کل فرآیند استفاده از Amazon Amplify برای استقرار برنامه Next.js تمام پشته خود راهنمایی می کنیم. ما با تنظیم محیط توسعه و قدم زدن در تنظیمات استقرار شروع خواهیم کرد تا اطمینان حاصل کنیم که برنامه مطابق با نیازهای خاص ما است.

با در نظر گرفتن این موضوع، بیایید شروع کنیم.

ساخت برنامه های وب مقیاس پذیر با Next.js و AWS Amplify: یک مرور کلی

اول از همه، Next.js یک چارچوب React است که ساختار، عملکرد و بهینه‌سازی‌هایی را به برنامه شما اضافه می‌کند. این روزها در جامعه توسعه دهندگان نسبتاً محبوب است.

از سوی دیگر، AWS Amplify یک بسته خدماتی ارائه شده توسط AWS است که به منظور ساده‌تر کردن زندگی شما است.

شما همه چیز مورد نیاز خود را برای ساده‌سازی رابط‌های کاربری جلویی خود و متصل به ابر خواهید داشت، و حتی یک سرویس CI/CD و میزبانی کاملاً مدیریت‌شده برای برنامه‌های رندر شده سریع، ایمن و قابل اعتماد استاتیک و سمت سرور خواهید داشت که با کسب و کار شما مطابقت دارند. چهار گروه از خدمات، یعنی Amplify Studio، Amplify CLI، Amplify Libraries و Amplify Hosting.

از قابلیت‌های محاسباتی الاستیک زیرساخت ابری AWS برای ارائه مقیاس‌پذیری و قابلیت اطمینان تقریباً بی‌نهایت استفاده می‌کند و از CLI و پشتیبانی کتابخانه برای ادغام آسان backendها با ویژگی‌های احراز هویت، از جمله مزایای دیگر برخوردار است.

اکنون که با Next.js و AWS Amplify آشنا شدیم، بیایید ببینیم که چگونه Next.js خود را در زیرساخت AWS با Amplify مستقر کنیم.

پیش نیازهای ضروری

قبل از شروع به کارگیری برنامه خود با AWS Amplify، چند الزام باید برآورده شود.

1. Node.js و NPM باید روی دستگاه شما نصب شوند.

2. شما باید دانش اولیه Git و GitHub داشته باشید.

3. آشنایی با Next.js

4. در نهایت، شما باید یک حساب AWS داشته باشید.

از Localhost تا Cloud: چگونه برنامه خود را مستقر کنیم

در اینجا، ما یک برنامه Next.js ایجاد می‌کنیم و آن را تا آنجایی که می‌توانیم با تشریح تمام ایده‌ها و اطلاعات کلیدی که باید بدانید، اجرا می‌کنیم.

برای شروع، بیایید نگاهی به مراحل مربوط به این فرآیند بیندازیم:

1. یک برنامه Next.js ایجاد کنید

برای شروع، با ایجاد یک برنامه Next.js شروع کنید.

npx create-next-app next-amplify

پس از ایجاد برنامه، گزینه های پیش فرض را انتخاب کرده و به فهرست پروژه بروید.

cd next-amplify

در نهایت، برنامه را با استفاده از کد پیش فرض تیم Next.js اجرا کنید.

npm run dev

قبل از اینکه جلوتر برویم، اجازه دهید برخی از مفاهیم اساسی Next.js را مرور کنیم.

هنگامی که یک برنامه Next.js ایجاد می کنید، گزینه های مختلفی برای تولید HTML دارید و ما در یکی از وبلاگ های خود درباره این گزینه ها با جزئیات بیشتر بحث کرده ایم.

با این اوصاف، اگر از Static Side Generation استفاده می‌کنید، باید فایل package.json خود را تغییر دهید تا یک برنامه Next.js مانند این را مستقر کنید:

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
}

در اینجا، برای پشتیبانی از صفحات SSG، «بدل بعدی و صادرات بعدی» را اضافه می کنیم. این اسکریپت به شما امکان می دهد برنامه خود را به HTML ایستا صادر کنید تا بتواند بدون کمک سرور Node.js کار کند.

با این حال، اگر پروژه شما از SSR یا رویکرد هیبریدی Next.js استفاده می کند، نیازی به ایجاد هیچ تغییری در فایل package.json خود ندارید.

2. کد را در GitHub فشار دهید

هنگامی که توسعه پروژه Next.js خود را به پایان رساندید، باید آن را به GitHub فشار دهید.

یک مخزن جدید در GitHub ایجاد کنید و کد را طبق دستورالعمل های ارائه شده منتشر کنید:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/youraccountname/repo.git
git push -u origin main

3. برنامه Next.js را مستقر کنید

اکنون، در حساب AWS خود، به AWS Amplify بروید. اگر نمی توانید AWS Amplify را پیدا کنید، می توانید آن را با استفاده از نوار جستجوی موجود در بالا جستجو کنید.

اگر با AWS Amplify تازه کار هستید و هنوز برنامه ای ایجاد نکرده اید، این صفحه را مشاهده خواهید کرد. برای ادامه روی دکمه “شروع به کار” کلیک کنید.

و سپس به سمت پایین حرکت می کند و در قسمت Amplify Hosting بر روی گزینه “شروع به کار” کلیک کنید.

اکنون می توانید به کد منبع خود متصل شوید. ما با GitHub همراه خواهیم بود زیرا قبلاً کد خود را به آنجا منتقل کرده ایم.

هنگام اتصال برای اولین بار، باید حساب GitHub خود را برای اتصال با AWS مجاز کنید. پس از مجوز، صفحه نمایش داده شده در بالا را مشاهده خواهید کرد.

بعد، یک مخزن انتخاب کنید. در سناریوی ما، روی «next-amplify» کلیک کنید، سپس نام شعبه نمایش داده شده در زیر آن را بخوانید (که باید به طور خودکار تکمیل شود)، و در آخر روی «next» کلیک کنید.

پس از آن، به صفحه «تنظیمات ساخت» هدایت می‌شوید، جایی که نام برنامه خود و همچنین فریم‌ورک‌های جلویی و بک‌اند به‌طور خودکار آن را می‌بینید.

شما می توانید یک محیط جدید ایجاد کنید و آن را در این صفحه “dev” بگذارید. و سپس، اگر نقش سرویس موجود را نمی‌بینید، باید یکی را ایجاد کنید. برای انجام این کار، روی دکمه «ایجاد نقش جدید» در پنل آبی کلیک کنید. با این کار یک تب جدید در مرورگر شما برای IAM باز می شود.

دکمه های «Next: Permissions»، «Next: Tags» و «Next: Review» را در پایین هر صفحه بدون ایجاد هیچ تغییری انتخاب کنید و سپس روی دکمه «ایجاد نقش» کلیک کنید تا ایجاد نقش تکمیل شود.

تب IAM را ببندید و پس از ایجاد نقش جدید به صفحه تنظیمات Amplify Build برگردید. دکمه refresh و سپس نام نقش جدید را انتخاب کنید. سپس برای ادامه، روی دکمه «بعدی» کلیک کنید.

در این صفحه، می توانید برنامه خود را قبل از اجرا بررسی کنید. اگر همه چیز درست است، دکمه “ذخیره و استقرار” را فشار دهید.

و بس! مدتی طول می کشد تا سیستم مستقر شود. سپس پس از اتمام کار، روی پیوند ارائه شده کلیک کنید تا برنامه Next.js خود را در عمل ببینید.

با Amplify CLI در عرض چند دقیقه احراز هویت را به برنامه Next.js خود اضافه کنید

همانطور که قبلاً اشاره کردیم، Amplify همه چیزهایی را که برای ساده‌سازی رابط‌های کاربری جلویی خود و متصل به ابر نیاز دارید فراهم می‌کند.

برای ساده‌تر کردن فرآیند، ابزار دیگری در دسترس است: Amplify CLI. این ابزار به شما اجازه می دهد تا به راحتی احراز هویت را اضافه کنید یا API ها را در برنامه Next.js خود ادغام کنید.

قبل از استفاده از Amplify، “amplify init” را برای مقداردهی اولیه آن اجرا کنید.

پس از آن، تنها کاری که باید انجام دهید این است که از دستور «تقویت افزودن تأیید اعتبار» برای تنظیم منابع احراز هویت در حساب AWS خود استفاده کنید (پیکربندی پیش فرض را انتخاب کنید).

می‌توانید پس از انجام اصلاحات لازم در کد برای ارائه قابلیت احراز هویت، از دستور “تقویت push -y” برای انتشار کد به روز شده در پروژه Amplify استفاده کنید.

بیایید از بسته Amplify برای ایجاد یک رابط کاربری احراز هویت کاربردی استفاده کنیم. برای انجام این کار، باید وابستگی های زیر را در برنامه Next.js خود نصب کنید.

npm install aws-amplify @aws-amplify/ui-react

حال، کد موجود را جایگزین کنید pages/_app.js فایل با موارد زیر:

import "@aws-amplify/ui-react/styles.css";
import { Amplify } from "aws-amplify";
import awsExports from "../src/aws-exports";
import '@/styles/globals.css'

Amplify.configure({ ...awsExports, ssr: true });

export default function App({ Component, pageProps }) {
 return <Component {...pageProps} />;
}

و سپس کد داخل فایل index.js را جایگزین کنید:

import { withAuthenticator } from "@aws-amplify/ui-react";

function Home({ signOut, user }) {
 return (
   <div style={{ padding: 50 }}>
     <h1>Logged in as {user.username}.</h1>
     <div>
       <button onClick={signOut}>Sign out</button>
     </div>
   </div>
 );
}
export default withAuthenticator(Home);

در اینجا، ما تابع “withAuthenticator” را از کتابخانه “@aws-amplify/ui-react” اضافه کرده‌ایم تا قابلیت احراز هویت را به مؤلفه Home اضافه کنیم. مؤلفه «Home» دو پروپوزال دریافت می کند – «خروج» و «user» – که برای نمایش نام کاربری کاربر و یک دکمه برای خروج از سیستم استفاده می شود.

تابع “withAuthenticator” جزء درجه بالاتری است که مولفه “Home” را می پوشاند و قابلیت های احراز هویت مانند ورود، ثبت نام و بازنشانی رمز عبور را فراهم می کند.

عبارت «صادرات پیش‌فرض» مؤلفه «صفحه اصلی» را با تابع «withAuthenticator» صادر می‌کند، به این معنی که هر مؤلفه‌ای که «Home» را وارد کرده و از آن استفاده می‌کند، به طور خودکار دارای قابلیت احراز هویت است.

و برای افزودن ویژگی های ثبت نام و ورود به سیستم کاربر، از Amazon Cognito استفاده می کند.

در اینجا خروجی است:

به حداکثر رساندن عملکرد و مقیاس پذیری با CloudFront، Lambda@Edge، و DynamoDB برای برنامه های Next.js

تاکنون نحوه استقرار برنامه خود را با استفاده از یک راهنمای گام به گام پوشش داده ایم و حتی نحوه افزودن احراز هویت، API و میزبانی را از طریق Amplify CLI مورد بحث قرار داده ایم.

با این حال، مهم است که توجه داشته باشید که شما به انواع خدمات آمازون فراتر از فرآیند استقرار دسترسی دارید. در میان این خدمات، برخی از مفیدترین آنها عبارتند از Amazon CloudFront (CDN)، Lambda@Edge و DynamoDB، که هر کدام می توانند به روش های مختلف به برنامه شما کمک کنند.

به عنوان مثال، اجازه دهید به سرعت به مراحل یکپارچه سازی DynamoDB در یک برنامه Next.js نگاهی بیندازیم.

• یک کاربر IAM با دسترسی کامل DynamoDB ایجاد کنید.
• AWS SDK را برای جاوا اسکریپت نصب کنید.
• تنظیم متغیرهای محیطی در یک فایل env.
• یک جدول DynamoDB ایجاد کنید و سپس یک مشتری DynamoDB را در یک فایل جداگانه راه اندازی کنید.
• با وارد کردن کلاینت و فراخوانی توابع DynamoDB از DynamoDB در برنامه Next.js خود استفاده کنید.

به طور مشابه، می توانید از تعدادی سرویس دیگر با برنامه Next.js خود استفاده کنید.

در حالی که AWS Amplify به استقرار و گسترش کد کمک می کند، شما همچنان به یک front-end آماده برای گسترش و تبدیل به یک برنامه فول استک نیاز دارید. برای این کار، می‌توانید از پلاگین Locofy.ai برای تولید برنامه‌های Next.js ماژولار و بسیار توسعه‌پذیر مستقیماً از فایل‌های طراحی Figma و Adobe XD خود استفاده کنید.

می‌توانید از ویژگی طرح‌بندی خودکار در Figma استفاده کنید تا طرح‌های خود را در پلاگین Locofy.ai پاسخگو کنید و حتی اگر طرح‌های شما از طرح‌بندی خودکار استفاده نمی‌کنند، این افزونه یک ویژگی Design Optimizer را ارائه می‌دهد که از هوش مصنوعی برای اعمال طرح‌بندی خودکار در فایل‌های طراحی شما استفاده می‌کند. .

هنگامی که طرح های شما پاسخگو هستند، می توانید از ویژگی Auto Components برای تقسیم عناصر طراحی خود به اجزای React در حال کار استفاده کنید و گسترش آنها را آسان می کند.

امیدوارم دوست داشته باشید.

همین – با تشکر.