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

[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 구현 - 프론트엔드 서버 (serverless framework)
prefetch img, … 구현 - 프론트엔드 서버 (serverless framework)
프론트엔드 웹애플리케이션 구현 다른 방법
관리자 회원 관리 (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.

Check these out next

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

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

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

Último(20)

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