했던 일

그물에서 찾은 대시보드 템플릿을 Amplify에 배포합니다.
기본은 튜토리얼을 따라 가면 할 수 있으므로, 빠져 포인트를 기재.

환경

Paper Dashboard PRO React1.2.0
대시보드 템플릿.
자신은 유료판을 사용하고 있지만, 무료판도 같다고 생각한다.
htps //w w. ㅜㅜㅔㅇㅇm. 코 m / p 로즈 ct / 파페 루다

npm 6.14.8

Amplify CLI 4.29.3

절차

기본

기본적으로는 매뉴얼대로 이하로 갈 수 있다.amplify 명령에 대화식 입력이 있지만 모두 기본값으로 남아 있습니다. (npm, amplify 설치 등은 생략)amplify publish 로 URL이 표시되므로 브라우저로 표시할 수 있다.

이것만으로 배포까지 할 수 있는 굉장하다. (한층 더 여기로부터 인증이라든가 API라든지 만들 수 있는 것보다 대단하다.)

cd paper-dashboard-pro-react-v1.2.0/
npm install
npm install aws-amplify @aws-amplify/ui-react
amplify init
amplify hosting add
amplify publish

위에서 문제가 있던 부분 3 점

create-react-app 로 만든 얼마 안되는 React 앱이라면 위에서 문제 없지만, 이번에는 템플릿을 이용하고 있기 때문에 몇 개소에서 문제가 발생했다.

배포 후 새하얀 화면이됩니다.

루트의 인식이 어긋나 있는 모습.package.json의 다음 부분을 삭제하고 해결했습니다.

package.json

  "homepage": "https://demos.creative-tim.com/paper-dashboard-pro-react/#/",

덧붙여서 처음에 이쪽 을 보고 ./ 로 했는데, 새하얀은 해결했지만 이미지등의 콘텐츠의 로드로 루트가 어긋나 취득할 수 없고 해결에 대단한 시간이 걸려 버렸다. .

URL 직접 지정, 브라우저 재로드로 AccessDenied가 표시된다

Github 위에서 화제가 되고 있는 대로, 아래와 같이 Amplify 콘솔에 입력해 주면 해결한다.
이것은 자동으로 해결해 주었으면 했지만, 조사해 발견했기 때문에 우선 좋았다.



매뉴얼 에도 쓰여 있다.

인증이 제대로 작동하지 않음

모처럼의 Amplify이므로 인증을 사용하고 싶다.
매뉴얼에 따라 App.js가이 템플릿에 존재하지 않습니다.
layouts/admin.js 에 withAuthenticator 를 설정해 보았을 때 아래와 같은 에러가 나와 잘못된다.

TypeError: Cannot read property 'pathname' of undefined

여러가지 시험해, 우선 동작한 방법은 이하의 2종류.
어느 쪽도 우선 동작한 상태이므로 문제가 있을지도 모른다.
자신은 첫 번째 방법으로 대응했다.

App.js 만들기

템플릿에서는 index.js 에서 layouts/xxx.js 를 호출하고 있는 곳을 새롭게 App.js 를 작성해, index.js 로부터 호출하도록(듯이) 했다.
템플릿에 App.js를 포함해 두었으면 좋겠다고 생각하면서 대응.
궁극적으로 다음 파일이되었습니다.

index.js

/*!

=========================================================
* Paper Dashboard PRO React - v1.2.0
=========================================================

* Product Page: https://www.creative-tim.com/product/paper-dashboard-pro-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

App.js

import React from 'react';

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import AuthLayout from 'layouts/Auth.js';
import AdminLayout from 'layouts/Admin.js';
import { withAuthenticator } from '@aws-amplify/ui-react';

import 'bootstrap/dist/css/bootstrap.css';
import 'assets/scss/paper-dashboard.scss?v=1.2.0';
import 'assets/demo/demo.css';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

const hist = createBrowserHistory();

function App() {
  return (
    <div className='App'>
      <Router history={hist}>
        <Switch>
          <Route path='/auth' render={(props) => <AuthLayout {...props} />} />
          <Route path='/admin' render={(props) => <AdminLayout {...props} />} />
          <Redirect to='/admin/dashboard' />
        </Switch>
      </Router>
    </div>
  );
}

export default withAuthenticator(App);

aws-amplify-react 사용

매뉴얼에서는 @aws-amplify/ui-react를 이용하고 있지만, aws-amplify-react를 이용하면 동작한다.@aws-amplify/ui-react 쪽이 새롭기 때문에, aws-amplify-react 의 UI는 괴멸적이지만, 실제로 사용한다면 어느 쪽도 사용하지 않을 거라고 생각하기 때문에, 거기는 신경쓰지 않는다.

npm install aws-amplify-react

한 후에

Admin.js

import { withAuthenticator } from '@aws-amplify/ui-react'

을

Admin.js

import { withAuthenticator } from 'aws-amplify-react'

에 수정하기만 하면.
하지만 이것이 Auth.js도 대응할 필요가 있다는 것을 생각하면 역시 App.js를 만드는 것이 좋을 것 같다.

참고로 아래 각 UI.

aws-amplify-react

@aws-amplify/ui-react

감상

Firebase도 접한 적이 없고, Amplify가 최초의 Baas이므로, 상당히 빠져 버렸지만, 인증 등 간단하게 구현할 수 있는 것은 훌륭하므로 점점 진화해 주었으면 한다고 생각한다.

참조

htps : // / cs. 아 mpぃfy. 아 ws / s rt / q / 이니 g 라치온 / 레아 ct
htps : // 기주 b. 코 m / 아 ws - 아 mp ぃ fy / 아 mp ぃ fy js / 이스에 s / 2545