[AWSKRUG] 혼자서 커뮤니티 귀동냥하며 만든 Next.js & Amplify & serverless framework 서버리스 웹 플랫폼 서비스 구현 후기 - Frontend ver.

혼자서 커뮤니티 귀동냥하며 만든
Next.js & Amplify & serverless
framework 웹 플랫폼 서비스 구현(삽질)
후기
박태성(@geoseong) at IDEASAM

공유하려고 하는 이유
나의 발전, 이 발표자료를 보시는 분들의 발전을
위해.
영감을 받으시거나 혹은 반면교사로 삼으셨으면

박태성 @IDEASAM
R&D Specialist (개발잡부🤫)
발표자 소개
geoseong
geoseong
구로디지털 #gudi Organizer
프론트엔드 #frontend Organizer
Community Hero

MATCHMON - 주짓수 대회운영 플랫폼

[serverless.yml]
[AWS 콘솔에 배포된 Lambda Layer의 모습]
아키텍쳐 - Lambda Layer
/.next
/node_modules

아키텍쳐 - AWS서비스
참가신
청알람
/
대회일
정알람
회원
로그인
이미지

Lambda
Layers
serverless framework
serverless cli
framework
$ STAGE=(dev|prod) next build
frontend
아키텍쳐 - 프론트엔드 amplify cli
$ amplify push
$ sls deploy
amplify framework
cli

프론트엔드 프로젝트 구성

프론트엔드 프로젝트 구성
matchmon.com/[pages]
process.env.{...}
import { createContext } from 'react'
import { ThemeProvider } from 'styled-components'

MatchView.getInitialProps = async props => {
// 백엔드 서버 요청 후 응답 받기
let responseObj = await fetch(endpoint, param)
let { status, data } = responseObj
return { status, data, … }
}
프론트엔드 Server Side Rendering (Next.js)
matchmon.com/match/gigipaivacup
const MatchView = props => {
return <div>
<Head><title>{title}</title><meta property=”og:title” content={title} /></Head>
<><Component /></>
</div>
}
export default Index
import Head from 'next/head'

구현 - 프론트엔드 서버 (serverless framework)

구현 - 프론트엔드 서버
(serverless framework)
Lambda
Layers
( /opt | /로컬람다레이어경로)

Lambda Layer
path

prefetch
img, …
구현 - 프론트엔드 서버 (serverless framework)

프론트엔드 웹애플리케이션 구현 다른 방법

[AWSKRUG] 혼자서 커뮤니티 귀동냥하며 만든 Next.js & Amplify & serverless framework 서버리스 웹 플랫폼 서비스 구현 후기 - Frontend ver.

관리자 회원 관리 (Amplify
Framework)
Amplify CLI로 Cognito UserPool을 만들고 Amplify sdk로 유저관리

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security
configuration? Manual configuration
Select the authentication/authorization services that you want to use:
User Sign-Up & Sign-In only (Best used with a cloud API only)
Please provide a friendly name for your resource that will be used to
label this category in the project: kendrabuttonauth
Please provide a name for your user pool: kendrabuttonauth
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Username
Do you want to add User Pool Groups? No
관리자 회원 관리 (Amplify CLI)
https://github.com/awskrug/kendra-button/wiki
/[Auth] Making Cognito Userpool for kendra button
Do you want to add an admin queries API? No
Multifactor authentication (MFA) user login options: OFF
Email based user registration/forgot password: Enabled (Requires
per-user email entry at registration)
Please specify an email verification subject: Your verification code
Please specify an email verification message: Your verification code is
{####}
Do you want to override the default password policy for this User Pool? No
Warning: you will not be able to edit these selections.
What attributes are required for signing up? Email
Specify the app's refresh token expiration period (in days): 30
Do you want to specify the user attributes this app can read and write? No
Do you want to enable any of the following capabilities?
Do you want to use an OAuth flow? No

관리자 회원 관리 (Amplify SDK)

이미지 업로드
[프론트엔드]
백엔드에서 얻은 토큰으로
public 이미지 업로드

이미지 업로드
[백엔드] S3 업로드 권한 얻기(cognito도
세팅해봄)
[호출->]

SEO (Site Engine Optimization)

회고
규모가 작더라도 개발기획은 꼭 하자
목표를 잘개 쪼개서 성취감을 느껴 사기를 높이자
혼자 다 해내려고 하지 말고 다른 사람에게 도움을 요청해라
중간중간 결산을 위해 상대를 찾아 코드리뷰를 하자
커뮤니티 활동 덕분에 문제해결 많이했다 (아는척 할수 있게 되었다)

[AWSKRUG] 혼자서 커뮤니티 귀동냥하며 만든 Next.js & Amplify & serverless framework 서버리스 웹 플랫폼 서비스 구현 후기 - Frontend ver.

More Related Content

What's hot (20)

Similar to [AWSKRUG] 혼자서 커뮤니티 귀동냥하며 만든 Next.js & Amplify & serverless framework 서버리스 웹 플랫폼 서비스 구현 후기 - Frontend ver. (20)

[AWSKRUG] 혼자서 커뮤니티 귀동냥하며 만든 Next.js & Amplify & serverless framework 서버리스 웹 플랫폼 서비스 구현 후기 - Frontend ver.