Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

  59 Lượt xem

Cách host trang web có xác thực bằng Next.js và AWS (Next.js + Cognito + S3 + Cloudfront)

ReactTypeScriptAmazon CognitoNext.js

Giới thiệu

Bài viết này sẽ giới thiệu cách host trang web có xác thực bằng Next.js và AWS một cách nhanh chóng! Ý tưởng là để đơn giản hóa việc host trang web có xác thực, chúng ta sẽ giao cả phần back-end và front-end của việc xác thực phức tạp cho Cognito, và host trang web có xác thực một cách dễ dàng!
Trong bài viết này, chúng ta sẽ xây dựng một trang web có thể truy cập từ công cộng bằng cách host một phiên bản xuất tĩnh của dự án Next.js trên S3 + CloudFront.

Mục tiêu của bài viết

  • Host trang web có xác thực có thể truy cập từ web được tạo ra bằng Next.js.
  • Khi truy cập trang chủ, nếu chưa đăng nhập, yêu cầu xác thực và sau khi đăng nhập thành công, trang chủ sẽ trở nên có thể xem.

Các công cụ sử dụng

  • Framework phát triển: Next.js (v14.0.4) App Router
  • Xác thực: AWS Cognito
  • Host trang web: AWS S3 + AWS CloudFront

1. Thiết lập môi trường của Next.js

1.1 Cài đặt Node.js và npm

Tải bản cài đặt từ trang web tải Node.js. Sau khi cài đặt xong, mở terminal và chạy các lệnh sau để kiểm tra việc cài đặt đã thành công:

node -v
> v20.0.9
npm -v
> 10.2.1

:::note
Tips (Không liên quan đến chủ đề chính…)
Sử dụng các công cụ quản lý phiên bản Node.js như Volta giúp bạn có thể chuyển đổi giữa các phiên bản Node.js một cách linh hoạt và là lựa chọn đáng khuyến khích! (Link tham khảo)
:::

1.2 Tạo dự án Next.js cục bộ

Chạy lệnh sau tại thư mục bạn muốn tạo dự án:

npx create-next-app@latest

Trả lời các câu hỏi hiển thị để hoàn tất quá trình cài đặt. Chi tiết về mỗi câu hỏi có thể tham khảo tại đây.

> What is your project named? my-app
> Would you like to use TypeScript? No / Yes
> Would you like to use ESLint? No / Yes
> Would you like to use Tailwind CSS? No / Yes
> Would you like to use `src/` directory? No / Yes
> Would you like to use App Router? (recommended) No / Yes
> Would you like to customize the default import alias (@/*)? No / Yes
> What import alias would you like configured? @/*

Chuyển đến thư mục đã tạo và khởi chạy localhost:

npm run dev

Nếu bạn có thể truy cập localhost:3000 và thấy trang web xuất hiện, thiết lập môi trường của Next.js đã hoàn tất.
localhost:300

2. Tạo màn hình đăng nhập

Mục tiêu ở đây là khi truy cập trang chủ như trước, nếu chưa đăng nhập, màn hình đăng nhập sẽ xuất hiện.
AWS cung cấp dịch vụ có tên AWS Amplify, một dịch vụ khung phát triển toàn diện để tăng tốc phát triển ứng dụng di động và web. Sử dụng Amplify, bạn có thể host S3 thông qua Amplify, nhưng trong trường hợp này, chúng ta sẽ tự chuẩn bị S3 và CloudFront, nên không sử dụng Amplify trực tiếp. Thay vào đó, chỉ sử dụng các phần liên kết với Cognito trong thư viện Amplify.

2.1 Chuẩn bị từ phía Next.js

Cài đặt thư viện Amplify (phiên bản mới nhất là v6.0.7 vào thời điểm tháng 12 năm 2023):

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

Thêm @aws-amplify/ui-react/styles.css vào src/app/layout.tsx để import các kiểu mà Amplify đã chuẩn bị cho màn hình đăng nhập:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import {Amplify} from 'aws-amplify'
import './globals.css'
+import '@aws-amplify/ui-react/styles.css';

Tiếp theo, thêm xác thực vào trang chủ src/app/page.tsx:

+'use client'
+
+import { withAuthenticator } from "@aws-amplify/ui-react";
import Image from 'next/image'
import styles from './page.module.css'

- export default function Home() {
+ function Home() {
  return (


 <main className={styles.main}>
        <div className={styles.description}>
            <p>Trung gian...</p>
        </div>
    </main>
  )
}
+export default withAuthenticator(Home)

Khi xuất trình bằng cách sử dụng export default withAuthenticator(Home), component sẽ được bao bọc trong withAuthenticator, yêu cầu xác thực.
Bạn có thể làm tương tự cho các trang khác nếu muốn đặt xác thực cho chúng.
Mở trình duyệt và truy cập lại localhost:3000. Bây giờ, một màn hình xác thực sẽ xuất hiện khác với trạng thái trước đó!

localhost:3000

Tuy nhiên, vì vẫn chưa thiết lập Cognito trên phía AWS nên chưa thể đăng nhập được.

2.2 Tạo người dùng trên AWS Cognito

AWS Cognito là một dịch vụ xác thực được xây dựng trên AWS, giúp triển khai hệ thống xác thực trên môi trường không có máy chủ. Để biết chi tiết về cách cài đặt Cognito, hãy xem Hướng dẫn Cognito chính thức của AWS.
Amazon Cognito.png
Nhấp vào “Tạo User Pool” để tạo một User Pool. User Pool là thư mục người dùng được sử dụng để xác thực và ủy quyền trong ứng dụng web và di động. Lưu ý trong Step 5 hãy chỉ định App type dạng Public Client.
Theo dõi hướng dẫn để tạo User Pool và sau khi tạo xong, chuyển đến User Pool và thêm người dùng từ “Create user”.
Amazon Cognito3.png
Trong ví dụ này, tôi đã tạo một người dùng có tên người dùng là “admin”.

2.3 Liên kết Next.js và Cognito

Thêm Amplify.configure vào src/app/page.tsx và nhập thông tin userPoolClientIduserPoolId:

'use client'
+import {Amplify} from 'aws-amplify'
import { withAuthenticator } from "@aws-amplify/ui-react";
import Image from 'next/image'
import styles from './page.module.css'

+Amplify.configure({
+ Auth: {
+   Cognito: {
+     userPoolClientId: '1234567abcdefg',
+     userPoolId: 'ap-northeast-1_ABCDEFG',
+  }
+ }
+})

function Home() {
  return (
    <main className={styles.main}>
        <div className={styles.description}>
            <p>Trung gian...</p>
        </div>
    </main>
  )
}
export default withAuthenticator(Home)

Với những thay đổi này, bạn đã có thể đăng nhập với tài khoản admin được tạo trên Cognito!
Lưu ý: Lần đầu tiên đăng nhập, bạn có thể được yêu cầu đổi mật khẩu
Đến đây, bạn đã thành công trong việc tạo dự án Next.js có xác thực được host cục bộ bằng Cognito.

3. Host dự án Next.js trên AWS

Với dự án Next.js có xác thực đã tạo được ở môi trường cục bộ, tiếp theo là host trên AWS.

3.1 Build dự án đã hoàn thành

Thông thường, để chạy Next.js, bạn cần môi trường thực thi Node.js. Trong trường hợp này, chúng ta muốn host dự án Next.js dưới dạng tệp tĩnh trên S3 + CloudFront, vì vậy chúng ta sẽ xuất dự án Next.js thành các tệp tĩnh bằng cách sử dụng Static Exports.
Chỉnh sửa next.config.js như sau:

/** @type {import('next').NextConfig} */
const nextConfig = {
+   output: 'export',
+   trailingSlash: true,
}

module.exports = nextConfig
  • output: Xuất tất cả các tệp ra thư mục export sau khi build. Chú ý: từ phiên bản Next.js v13.3 trở đi, cách này đã thay đổi.
  • trailingSlash: Khi truy cập đường dẫn như /about, nó sẽ tự động chuyển hướng sang /about/index.html.

Sau đó, chạy lệnh sau để build và xuất tệp lên S3:

npm run build

Tất cả các tệp sẽ được xuất ra thư mục mặc định là out.

3.2 Tạo AWS S3

Tiếp theo, chúng ta sẽ tiến hành cấu hình trên phía AWS.
Đối với phần lớn, chúng ta sẽ tạo một bucket với cài đặt mặc định.
Vì CloudFront sẽ nhận truy cập từ phía máy khách, nên “Public Access” nên được chặn hoàn toàn và chức năng lưu trữ web tĩnh “Static website hosting” cũng có thể bị vô hiệu hóa.
Amazon S3-1.png
Sau khi tạo xong bucket S3, hãy tải lên tất cả các tệp trong thư mục out được tạo trong bước xây dựng trước đó lên bucket S3.

3.3 Tạo CloudFront

Cuối cùng, chúng ta sẽ tạo CloudFront để nhận truy cập từ phía máy khách.
Tạo “Phân phối” trong “Tạo phân phối”.
Chọn bucket S3 đã tạo trước đó cho “Miền nguồn” và “Đường dẫn nguồn” là index.html.
Chọn “Cài đặt kiểm soát truy cập nguồn” là “Thiết lập kiểm soát truy cập nguồn (được khuyến nghị)” và tạo mới “Kiểm soát truy cập nguồn”.
Các mục khác có thể giữ mặc định.
Sau khi tạo xong phân phối, hãy sửa đổi chính sách bucket của bucket S3 đã tạo trước đó.
Chỉnh sửa nguồn từ tab “Nguồn” của phân phối đã tạo và sao chép chính sách bucket trong cửa sổ chỉnh sửa.
Amazon CloudFront 1.png
Chuyển đến “Go to S3 bucet permisions” và chuyển đến trang cài đặt quyền truy cập S3, sau đó chuyển đổi sang chính sách bucket đã sao chép.
Với bước này, toàn bộ quá trình xây dựng đã hoàn tất!

:::note
Lưu ý
Nếu bạn đã tạo các trang ngoài trang chính và muốn chuyển đến đó, bạn sẽ cần cài đặt “Trang lỗi” của CloudFront. Chi tiết có sẵn tại đây.
:::

4. Kiểm tra xem có thể truy cập được không

Cuối cùng, hãy kiểm tra xem trang web đã có xác thực có thể được lưu trữ không!
Truy cập “Tên miền phân phối” được mô tả trong phân phối CloudFront bạn đã tạo, bạn nên có thể truy cập trang web.
Lần đầu tiên bạn truy cập, bạn sẽ thấy cửa sổ xác thực hiển thị, nếu bạn nhập thông tin xác thực và đăng nhập, sau đó trang chính sẽ hiển thị, điều này có nghĩa là bạn đã thành công!
image.gif
Với bước này, bạn đã xác nhận rằng trang web có xác thực đã được lưu trữ thành công.

Kết luận

Trong bài viết này, chúng tôi đã giới thiệu cách lưu trữ trang web có xác thực bằng Next.js và AWS.
Với việc Cognito đảm nhận phần xác thực và sử dụng kết hợp Cognito của thư viện Amplify và các thành phần giao diện, bạn có thể dễ dàng lưu trữ trang web có xác thực, phải không?
Cognito cũng hỗ trợ các nhà cung cấp xác thực khác như Google, giúp bạn triển khai một xác thực phong phú một cách dễ dàng.

Tham khảo

aws_pro
Đã có SAA, sẽ lấy SAP trong tương lai gần.

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic