Amplify + Next.jsでSSR, ISR
モチベーション
Amplifyの基礎を理解する
Next.jsでSSRしたい
Next.jsでISRしたい
SSRについて
SSRは、クライアントとAPIサーバの間にページを生成する為のレンダリングサーバを用意する。
SPAの場合、画面を構築する作業はクライアントで行っていたが、SSRでは、この作業をレンダリングサーバに移譲する。
クライアントは、すでに構築済みのページを受け取ることが出来るので、初回表示が高速化される。
SEOの観点からもSPAと比較して有利
SSRのデメリットは、SPAと比較した時、レンダリングサーバというインフラのコンポーネントが一つ増えるので、インフラの実装、運用コストが増える。
また、レンダリングをクライアントで行うか、レンダリングサーバで行うかという実装の住み分けが必要になる為、設計の難易度や実装コストが増える。
SEOがそもそも必要ない場合は、SPAが選択される場合が多い。
Amplifyについて
Webアプリを最速でリリースするための開発プラットフォーム。
jsフレームワークでのSPAやSGなどを利用し、最速開発する。
バックエンドを素早く構成できる。
アプリケーション開発者はフロントエンドに集中し、バックエンドとインフラはAWSにサーバレスでおまかせ可能。
GithubやBitbucket等のリポジトリサービスとの連携、CI/CDの構築が数クリックで実現可能。
AWSサービスを駆使して同様な環境を構築できるが、膨大なサービスから選定してアーキテクトするのはコストが高い。
それをAmplifyが解決してくれる。
フロントエンドとのシームレスな接続。数クリックでデプロイ。
専門のインフラエンジニア、バックエンドエンジニアを抱えることの出来ない開発組織においては、非常に強力なツールとなる
Amplify CLI
Amplify Framework
Amplify Console
Amplify CLI
コマンドラインから対話的に質問に答えることで環境を構築することが出来る仕組み。
Amplify Framework
クライアントがバックエンドと連携するための処理を数行で記述できるフレームワーク。
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク。
SDKとコンポーネントが一緒になったみたいなもの。
Amplify Console
SPA、SSGのホスティング
CI/CDの運用を自動化
GithubやAWS CodeCommit等のソースリポジトリと連携
2020.9.15にAmplify LibraryがSSR対応
2021.5.19にAmplify Consoleが、Next.jsのSSRホスティング対応。これまでは、Serverless Frameworkと呼ばれるAmplify CLIとは別のCLIを用いる必要があった。
SSRホスティングには、特別な操作は必要なし。package.jsonの中身から自動判定。
AWSアカウントの紐付け設定
※node -v 15.12.0で設定する
↓amplify cli
npm install -g @aws-amplify/cli
↓
amplify configure
↓
awsに移動
↓
サインイン
↓
次へ
↓
AdministratorAccessが選択された状態で次へ
↓
キーも特に必要なければ次へ
↓
ユーザの作成
↓
成功
このまま画面を閉じずに、ターミナルの方をエンター
↓
アクセスキーIDをコピーし、ターミナルに貼り付け、エンター
↓
secretAccessKeyも同じ様に
↓
画面に沿ってok
完了
AWSバックエンドのセットアップ
amplify init
自動的に色々設定される(予めNext.jsをインストールしたプロジェクトで作業しているから?)
AWS profileを選択し、上記で設定したユーザ名を選択する
これでAWSバックエンドの初期セットアップが完了
create-react-app + amplify
パッケージのインストール
npm i -D aws-amplify @aws-amplify/ui-react@1.2.25
※@aws-amplify/ui-reactが1.2.25でないと、AmplifySignOutが利用できない。
code:react
import './App.css'
import Amplify from 'aws-amplify'
import { AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
function App() {
return (
<div className="App">
<AmplifySignOut />
<h2>コンポーネント</h2>
</div>
)
}
export default withAuthenticator(App)
amplify add auth
Default configuration
Email
No
amplify pushを入力すると
認証、認可のamazon cognitoが追加される
Yを押下すると、
aws-exports.jsに設定が追加される
npm strart でローカルサーバ立ち上げ
参考
AWS Amplify × Next.js で Server Side RenderingのデプロイおよびCI/CD環境を構築する
Amplify ConsoleでServer Side Renderingするチュートリアルを作った
AWS Amplify CLI をチュートリアルで試してみた
AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜
AmplifyがNext.jsとNuxt.jsを利用したSSR(Server Side Rendering)に対応しました!
Next.jsのISRで動的コンテンツをキャッシュするときの戦略
AWS Amplify はじめてみる編
'AmplifySignOut' is not exported from '@aws-amplify/ui-react'.を解消する