인증, 데이터 및 저장소가 포함된 Fullstack Next.js 앱 만들기
본문
Next.js는 웹 개발을 위해 내가 가장 좋아하는 도구 중 하나이지만 프론트엔드 프레임워크입니다.
풀스택 애플리케이션을 어떻게 구축할 수 있습니까?
이 자습서에서는 데이터베이스 지원 백엔드, 정적 이미지 저장소 및 인증을 사용하여 Server-side Rendered Next.js 앱을 빌드합니다. National Park 테마입니다. 로그인한 사용자는 새 공원을 만들 수 있으며 모든 사람이 추가된 모든 공원을 볼 수 있습니다.
Next.js를 처음 사용하는 경우 이를 시작하는 방법에 대한 자습서를 작성했습니다. AWS Amplify를 처음 사용하는 경우 이에 대한 자습서도 있습니다!
앱 백엔드 만들기
먼저 새 Next 앱을 만듭니다.
npx create-next-app national-parks이 지침을 따르지 않는 경우 Amplify CLI가 설치되어 있는지 확인하십시오!
그런 다음 프로젝트의 Amplify를 초기화합니다. 생성된 구성을 수락한 다음 AWS 프로필을 선택하거나 액세스 키를 입력할 수 있어야 합니다.
amplify init그런 다음 필요한 서비스를 구성합니다. 먼저 인증을 추가하겠습니다.
amplify add auth다음과 같은 질문에 답하십시오.
Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in? Username
Do you want to configure advanced settings? No, I am done.이제 앱에 스토리지를 추가하겠습니다. 액세스 권한이 있는 사용자 이외의 모든 질문에 대한 기본 구성 옵션을 선택합니다. 여기에서 인증된 사용자에게는 모든 작업에 대한 액세스 권한을 부여하고 인증되지 않은 사용자에게는 데이터를 읽을 수 있는 권한을 부여합니다.
amplify add storage? Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
? Please provide a friendly name for your resource that will be used to label this category in the project: s37cd140d1
? Please provide bucket name: nationalparkbrowser248f6fd94d4f46f99a951df475e8
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? create/update, read, delete
? What kind of access do you want for Guest users? read
? Do you want to add a Lambda Trigger for your S3 Bucket? No마지막으로 API를 생성합니다. GraphQL을 선택하고 인증을 위해 API 키를 사용합니다. 텍스트 편집기에서 GraphQL 스키마를 엽니다.
amplify add api? Please select from one of the below mentioned services: GraphQL
? Provide API name: nationalparks
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)schema.graphql 파일이 텍스트 편집기에서 열리지 않으면 파일을 엽니다. amplify/backend/api/nationalparks 아래에 있습니다. 샘플 GraphQL 스키마가 이미 있지만 필요한 데이터 형식을 갖도록 편집합니다.
S3Object와 Park의 두 가지 모델을 생성하겠습니다. Park는 우리의 공원을 저장할 것입니다. 각 공원에는 ID, 이름 및 이미지가 있습니다. 이 이미지는 Amazon S3에 저장된 이미지를 참조합니다(amplify add storage를 실행할 때 버킷을 생성했습니다). S3Object에는 S3에 저장된 이미지에 대한 정보(버킷, 리전 및 키)가 있습니다. 키를 사용하여 앱의 이미지에 액세스합니다.
type S3Object {
bucket: String!
region: String!
key: String!
}
type Park @model {
id: ID!
name: String!
image: S3Object
}이제 증폭 푸시를 실행하여 리소스를 클라우드에 배포하십시오! 이제 완전히 배포된 백엔드가 있습니다.
Amplify 라이브러리를 설치합니다. 이를 통해 JavaScript 도우미 코드와 React 구성 요소를 사용하여 프런트엔드 개발을 가속화할 수 있습니다.
npm i aws-amplify @aws-amplify/ui-react백엔드가 배포되면 Amplify.configure()를 사용하여 프런트엔드를 백엔드에 연결해야 합니다. Amplify에서 자동으로 생성한 src/aws-exports.js 파일의 구성 정보를 사용하고 서버의 API에서 가져올 수 있도록 ssr 플래그를 true로 설정해야 합니다.
다음을 페이지/_app.js 상단에 추가하세요.
import Amplify from 'aws-amplify'
import config from '../src/aws-exports'
Amplify.configure({ ...config, ssr: true })Frontend Logic
구성 코드가 완료되었으므로 이제 프론트엔드 React 로직을 작성할 수 있습니다. 먼저 새 공원을 만들기 위해 양식을 만들어 보겠습니다. 우리의 양식을 렌더링할 페이지를 보관할 파일 pages/create-park.js를 만듭니다. 파일에 React 구성 요소를 만듭니다.
// create-park.js
function CreatePark () {
return <h1>Create Park</h1>
}
export default CreatePark그런 다음 withAuthenticator 고차 구성 요소를 사용하여 /create-park 페이지로 이동하기 전에 로그인을 요구합니다. 또한 가입이 가능하고 계정 확인이 필요합니다.
// create-park.js
import { withAuthenticator } from '@aws-amplify/ui-react'
function CreatePark () {
return <h1>Create Park</h1>
}
export default withAuthenticator(CreatePark)이제 사용자가 공원 이름과 이미지를 입력할 수 있는 React 양식을 만들 것입니다.
// create-park.js
import { useState } from 'react'
import { withAuthenticator } from '@aws-amplify/ui-react'
function CreatePark () {
const [name, setName] = useState('')
const [image, setImage] = useState('')
const handleSubmit = async () => {
}
return (
<form onSubmit={handleSubmit}>
<h2>Create a Park</h2>
<label htmlFor='name'>Name</label>
<input type='text' id='name' onChange={e => setName(e.target.value)} />
<label htmlFor='image'>Image</label>
<input type='file' id='image' onChange={e => setImage(e.target.files[0])} />
<input type='submit' value='create' />
</form>
)
}
export default withAuthenticator(CreatePark)마지막으로 사용자의 이미지를 S3에 업로드한 다음 GraphQL API를 사용하여 데이터베이스에 새로 생성된 공원을 저장하는 handleSubmit 함수를 구현합니다. aws-exports.js에서 구성 정보를 다시 가져오고 Amplify가 src/graphql 디렉터리에 생성한 GraphQL 변형 중 하나를 가져옵니다.
그런 다음 이미지 이름을 키로 사용하고 이미지 자체를 값으로 사용하여 Storage.put()을 사용하여 이미지를 업로드합니다. 그런 다음 API.graphql을 사용하여 사용자가 입력한 데이터와 S3 버킷에 대한 구성 정보로 graphQL 변형을 실행합니다.
// create-park.js
import { useState } from 'react'
import { API, Storage } from 'aws-amplify'
import { withAuthenticator } from '@aws-amplify/ui-react'
import { createPark } from '../src/graphql/mutations'
import config from '../src/aws-exports'
function CreatePark () {
const [name, setName] = useState('')
const [image, setImage] = useState('')
const handleSubmit = async e => {
e.preventDefault()
// upload the image to S3
const uploadedImage = await Storage.put(image.name, image)
console.log(uploadedImage)
// submit the GraphQL query
const newPark = await API.graphql({
query: createPark,
variables: {
input: {
name,
image: {
// use the image's region and bucket (from aws-exports) as well as the key from the uploaded image
region: config.aws_user_files_s3_bucket_region,
bucket: config.aws_user_files_s3_bucket,
key: uploadedImage.key
}
}
}
})
console.log(newPark)
}
return (
<form onSubmit={handleSubmit}>
<h2>Create a Park</h2>
<label htmlFor='name'>Name</label>
<input type='text' id='name' onChange={e => setName(e.target.value)} />
<label htmlFor='image'>Image</label>
<input type='file' id='image' onChange={e => setImage(e.target.files[0])} />
<input type='submit' value='create' />
</form>
)
}
export default withAuthenticator(CreatePark)원하는 경우 스타일/globals.css 파일에 붙여 넣을 수 있는 몇 줄의 CSS를 사용하여 앱을 좀 더 보기 쉽게 만들 수 있습니다.
amplify-s3-image {
--width: 70%;
overflow: hidden;
margin: 0 auto;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.img-square img h2 {
margin: 0 auto;
text-align: center;
}마지막으로 색인 페이지에 모든 공원을 나열합니다. src/graphql/queries.js에서 생성된 listParks graphql 쿼리를 사용하여 공원을 가져오고 AmplifyS3Image 구성 요소를 사용하여 페이지에 이미지를 렌더링 합니다. 새 공원이 추가될 때 앱이 동적으로 업데이트 되도록 서버 측에서 공원을 가져옵니다.
import Head from 'next/head'
import { withSSRContext } from 'aws-amplify'
import { listParks } from '../src/graphql/queries'
import { AmplifyS3Image } from '@aws-amplify/ui-react'
import Link from 'next/link'
export async function getServerSideProps () {
const SSR = withSSRContext()
const { data } = await SSR.API.graphql({ query: listParks })
return {
props: {
parks: data.listParks.items
}
}
}
export default function Home ({ parks }) {
return (
<div>
<Head>
<title>National Parks</title>
</Head>
<div className='container'>
<h1>National Parks <Link href='/create-park'>(+)</Link></h1>
<div className='img-grid'>
{parks.map(park => {
return (
<div key={park.id} className='img-square'>
<h2>{park.name}</h2>
{/* use the AmplifyS3Image component to render the park's image using its S3 key */}
<AmplifyS3Image imgKey={park.image.key} height='200px' />
</div>
)
})}
</div>
</div>
</div>
)
}Frontend Deployment
이제 우리 앱에는 완전한 프론트엔드가 있습니다! Amplify 호스팅을 통해 배포해 보겠습니다. 코드를 GitHub 리포지토리에 푸시한 다음 앱용 Amplify 콘솔을 엽니다. 프런트엔드 환경 탭을 클릭한 다음 앱 연결 버튼을 클릭합니다. 리포지토리를 선택하고 자동 생성된 구성을 사용하고 저장하고 배포합니다. 몇 분이면 앱이 활성화됩니다!
추가 구성이 필요하지 않습니다. Amplify는 SSR Next.js 앱을 만들고 있다고 추론하고 앱에 필요한 호스팅 리소스를 배포합니다. 관심이 있으시면 여기에 더 많은 정보가 있습니다!
Cleanup
앱을 배포된 상태로 유지하고 싶지 않을 수 있습니다. 이 경우 AWS 콘솔에서 앱 삭제 버튼을 클릭하거나 명령줄에서 amplify delete를 실행할 수 있습니다. 그러면 AWS 계정에서 백엔드 리소스의 프로비저닝이 해제됩니다!
AWS Amplify를 사용하면 클라우드 또는 전체 스택 개발에 대한 지식이 없어도 데이터, 이미지 스토리지 및 인증을 사용하여 Next.js 앱을 전체 스택으로 만들 수 있습니다.
출처 : https://welearncode.com/build-a-fullstack-app-nextjs/
- 이전글Ant Design Charts - React 차트 라이브러리 21.07.25
- 다음글Vercel의 디자인에서 비롯된 현대적이고 미니멀한 React UI 라이브러리 21.07.18