AWS Cloud9에서 Amplify Serverless App 실습 (Cognito 로그인 화면 구현)

AWS Amplify Serverless Application 워크샵 실습해보기 (조금씩 수정)

- Cognito 회원가입/로그인 화면 구현

 

 

 

<사이트 참고>

https://master.d3f5073vvso9t3.amplifyapp.com/lab1/contents/bootstrapping/

어플리케이션 부트스트래핑 :: Amplify Serverless Application 워크샵

 

1. app 생성

npx create-react-app <app name>
cd <app name>
npm start                         ## 앱 실행 잘 되는지 확인. 
                                  ## Preveiw -> Preview Running Application 실행

Ctrl+C                            ## 앱 나오기

npm install -g @aws-amplify/cli   ## amplify cli 설치

 

2. Backend 구성

amplify init               amplify init      ## amplify 초기화


**
Access key ID  :  
Secret access key  :  
**

 

amplify add auth                ## auth 추가

 

amplify push

yes 선택

 

 

3. Frontend 구성

## 설치

npm install aws-amplify@1.2.4
npm install aws-amplify-react@^2.5.4
npm install --save semantic-ui-react
npm install --save react-slick react-dom react-router-dom@5
npm install --save slick-carousel styled-components

## 프로젝트/src/App.css 파일에 코드 추가


@import "https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css";
@import "~slick-carousel/slick/slick.css"; 
@import "~slick-carousel/slick/slick-theme.css";

## 프로젝트/src/config 폴더 만들고 프로젝트/src/config/signUpConfig.js 파일을 생성


const signUpConfig = {
  header: 'Create an Amplify-Workshop Store Account',
  defaultCountryCode: '82',
  signUpFields: [
    {
      label: 'First name',
      key: 'given_name',
      required: true,
      displayOrder: 100,
      type: 'string'
    },
    {
      label: 'Last name',
      key: 'family_name',
      required: true,
      displayOrder: 101,
      type: 'string'
    },
    {
      label: 'Address',
      key: 'address',
      required: true,
      displayOrder: 102,
      type: 'string'
    }
  ]
};

export default signUpConfig

## src/index.js 코드 추가


import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

## 프로젝트/src/App.js 내용 변경


import React from 'react'
import { Header } from 'semantic-ui-react'
import { withAuthenticator } from 'aws-amplify-react'
import signUpConfig from './config/signUpConfig'

import './App.css'

class App extends React.Component {
    constructor(props, context) {
      super(props, context);
    }
  
    render() {
        if (this.props.authState === "signedIn") {
            return functionApp();
        } else {
            return null;
        }
    }
  }
  
function functionApp() {
    return (
        <div style={styles}>
            <Header as='h1'>Hello World!</Header>
        </div>
    );
}

export default withAuthenticator(App, { signUpConfig })

const styles = {
  marginLeft: '1em',
  marginRight: '1em'
}

npm start 로그인 화면 확인

에러뜸

 

## webpack compiled with 19 errors and 1 warning 에러

Ctrl + c
rm -rf node_modules package-lock.json           
npm install
npm audit fix --force

npm start 

해결 짠

회원가입 로그인 잘 되는지 확인하기

 

 

 

4. 코드 수정

wget -P ./src/ https://master.d3f5073vvso9t3.amplifyapp.com/files/images.zip
unzip ./src/images.zip -d ./public

wget -P ./src/ https://master.d3f5073vvso9t3.amplifyapp.com/files/components.zip
unzip ./src/components.zip -d ./src/

wget -P ./src/ https://master.d3f5073vvso9t3.amplifyapp.com/files/config.zip
unzip ./src/config.zip -d ./src/

yes

wget -P ./src/ https://master.d3f5073vvso9t3.amplifyapp.com/files/context.zip
unzip ./src/context.zip -d ./src/

wget -P ./src/ https://master.d3f5073vvso9t3.amplifyapp.com/files/pages.zip
unzip ./src/pages.zip -d ./src/

## “src/index.js” 파일을 다음과 같이 수정

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'
import Amplify from 'aws-amplify'
//import * as serviceWorker from './serviceWorker';

import AppProvider from './context/AppProvider'

// Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0

import App from './App';
import Product from './pages/Product'
import Checkout from './pages/Checkout'
import PlacedOrder from './pages/PlacedOrder'

import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

const routing = (
    <AppProvider>
        <Router>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/product/:id" component={Product} />
                <Route path="/checkout" component={Checkout} />
                <Route path="/ordercomplete" component={PlacedOrder}/>
                <Route component={App} />
            </Switch>
        </Router>
    </AppProvider>
)

ReactDOM.render(routing, document.getElementById('root'));

//serviceWorker.unregister();

## “src/App.js” 파일을 다음과 같이 수정


import React from 'react'
import { Container, Header } from 'semantic-ui-react'
import { withAuthenticator } from 'aws-amplify-react'

import signUpConfig from './config/signUpConfig'

import InitState from './pages/InitState'
import TopMenu from './components/TopMenu'
import Carousel from './components/Carousel'
import ItemTable from './components/ItemTable'

import './App.css'

class App extends React.Component {
    constructor(props, context) {
      super(props, context);
    }
  
    render() {
        if (this.props.authState == "signedIn") {
            return functionApp();
        } else {
            return null;
        }
    }
  }
  
function functionApp() {
    return (
        <div style={styles}>
            <InitState/>
            <TopMenu />
            <Container text style={{ marginBottom: '1em' }}>
                <Header as='h1' style={{ textAlign: 'center' }}>All things Alexa</Header>
            </Container>
            <Container fluid>
                <Carousel />
            </Container>
            <Container style={{ marginTop: '2em' }}>
                <Header as='h2'>Smart displays</Header>
                <p>Everything you love about Alexa, and now she can show you things. Get the weather forecast, watch the news, and see lyrics with Amazon Music.</p>
            </Container>
            <Container style={{ marginTop: '2em' }}>
                <ItemTable type='echo' />
            </Container>
            <Container style={{ marginTop: '2em' }}>
                <Header as='h2'>Echo companions</Header>
                <p>Enjoy richer, more dynamic music with devices designed to work with Echo smart speakers or your existing sound system.</p>
            </Container>
            <Container style={{ marginTop: '2em' }}>
                <ItemTable type='companion' />
            </Container>
        </div>
    );
}

export default withAuthenticator(App, { signUpConfig })

const styles = {
    marginLeft: '1em',
    marginRight: '1em'
}