Amplifyホスティングハンズオン
本ハンズオンについて
本ページは以下Amplifyホスティングのワークショップと同様手順をNext.js 13以降、且つ2023年10月時点でのAWSコンソール画面に合わせて修正・肉付けしたものとなります。
事前準備
ハンズオン行う方は事前に以下をご準備ください。
- AWSアカウント
- GIthubアカウント
※いずれも個人の検証用など、ハンズオン利用に適したものをご用意ください。
※本ページではMac環境を想定していますが、ご自身の環境に合わせて読み替えの上進めてください。
ハンズオン
①Next.js アプリケーションを作成する
ターミナルソフトを開き、任意の場所(デスクトップetc..)でCreate Next Appを使用して新しいプロジェクトを作成しましょう 。
npx create-next-app@13.5.6 my-app
npx: command not foundが返ってきた場合
npm install npx -g
この時、npm: command not foundが返ってきた場合は、以下記事のような手順を踏んでください。
Need to install the following packagesが返ってきた場合
※もし以下のように表示された場合はyを入力してEnterしてください。
Need to install the following packages:
create-next-app@13.5.6
Ok to proceed? (y)
↓
このタイミングでnpmもupdateしましょうと言われたりもします。
npm notice
npm notice New major version of npm available! 9.8.0 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice
↓
(特に問題がない場合)ついでにupdateもしておきます。
npm install -g npm@10.2.1
The directory my-app contains files that could conflictが返ってきた場合
以下のように返ってきた場合、同名(my-app)がすでに同階層に存在しているかと思われます。
既存のmy-appを削除して再実行か、名前をmy-app2等に変更して進めましょう。
The directory my-app contains files that could conflict:
.eslintrc.json
README.md
app/
jsconfig.json
next.config.js
node_modules/
package-lock.json
package.json
public/
Either try using a new directory name, or remove the files listed above.
↓
※重要※ 対話形式で以下のように問われますのでESlint以外はNoを選択してください。
今回のハンズオンでは、ここの選択を間違うと後の工程でエラーがおきます。
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias (@/*)? … No
↓
無事"Success!"と表示されました。
Using npm.
Initializing project with template: default
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- eslint
- eslint-config-next
added 275 packages, and audited 276 packages in 16s
106 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Success! Created my-app at /Users/hoge/my-app
↓
作成された"my-app"フォルダの中(ディレクトリ)に移動します。
yarn devコマンドについては後ほど表示を見る事で理解出来るかと思います。
cd my-app && yarn dev
yarn: command not foundが返ってきた場合
yarnをインストールして再実行します。
npm install yarn -g && yarn dev
↓
yarn run v1.22.19
$ next dev
▲ Next.js 13.5.6
- Local: http://localhost:3000
✓ Ready in 4.2s
「Ready in ○.○s」」表示が確認出来たら、ページがブラウザに正しく読み込まれるかどうかを確認します。ブラウザから http://localhost:3000 にアクセスしてください。
↓
「 ✓ Ready in ○.○s」の下に以下のように追加表示されます。
✓ Compiled / in 2.3s (232 modules)
↓
ブラウザには以下が表示される事を確認出来るかと思います。
※このページは動的に更新される為、開きっぱなし(後でまた見る事になります。)
※ターミナルもそのままの状態で放置でOKです。
②ルートページをレンダリングするpages/index.jsを更新する
my-appフォルダをご自身のエディタに読み込ませます。
pages/index.jsを書き換えます。
↓
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from "react";
export default function Home({ breeds = [] }) {
const [breedList, setBreedList] = useState([]);
useEffect(() => {
setBreedList(Object.keys(breeds));
}, []);
return (
<div className={styles.container}>
<Head>
<title>Amplify Hosting Test</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Amplify Hosting Test App</h1>
<br />
<select>
{breedList.map((breed) => (
<option key={breed} value={breed}>
{breed}
</option>
))}
</select>
</main>
</div>
);
}
// ドロップダウンリストの中身を取得
export async function getServerSideProps(context) {
const url = "https://dog.ceo/api/breeds/list/all";
const res = await fetch(url);
const data = await res.json();
const breeds = data.message;
return {
props: { breeds },
};
}
↓
再び、
✓ Compiled in 281ms (203 modules)
等表示され、ブラウザの先ほどのページの表示が以下のように変わった事が確認出来ます。
③gitリポジトリの初期化を行う
このプロジェクトの git リポジトリを(https://github.com/new)に作成しましょう。
まずはGithubにサインインします。
↓
以下のように設定して、「create repository」を押下します。
ここでは”Private”を選択の上、Repository Nameは「amplifyNextjsHandsOn」とします。
↓
リポジトリを作成が完了したら、フォルダー内の git を初期化し、作成したリポジトリの URL を追加しましょう。
ターミナルに戻り、先ほどyarn devをしていたのと別タブを開いて、以下を実行します。
cd 「my-appフォルダがあった場所のフルパス」
↓
echo "# amplifyNextjsHandsOn" >> README.md
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/「あなたのGitHubユーザー名」/amplifyNextjsHandsOn.git
↓
この後、pushをする訳ですが、
ここ一点、先に注意点となりますが、
既にGithub上で、今回作成した新しいリポジトリ(amplifyNextjsHandsOn)を対象としたpushも可能となるアクセストークンを利用していない場合、先にGithub上でアクセストークンを作成する必要があります。
アクセストークンを作成していない場合やremote: Support for password authentication was removed on August 13, 2021.が返ってきた場合
git push時ユーザーネーム・パスワード入力を求められますが、
Username for 'https://github.com':
Password for 'https://「あなたのGitHubユーザー名」@github.com':
ここで
Passwordに先ほどブラウザからGitHubにログインした際に、入力したようにパスワードを入力してしまうと、以下メッセージが返される事になります。(ここは本来アクセストークンを入力可能である事がわかるようになっているべきかもしれません)
「パスワード認証のサポートは2021年8月13日に削除されたので、現在推奨されている認証(アクセストークン)を利用するように」という内容です。
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hoge/amplifyNextjsHandsOn.git/'
この場合の対処は以下となります。
↓
0.macの場合「キーチェーンアクセス」からgithubのWebフォームパスワードを削除。(存在する場合)
↓
1.ブラウザ上でGitHubの右上の自分のアイコンをクリック
2.「Settings」をクリック
3.左メニュー下部の「Developer settings」をクリック
4.左メニューの「Personal access tokens」をクリック
5.「Fine-grained tokens」をクリック
6.右上の「Generate new token」をクリックしてアクセストークンを作成
- Token nameに任意のトークンネーム
- 「Only select repositories」ラジオボタンを選択。「SelectRepositories」 をクリックし、先ほど作成したamplifyNextjsHandsOnを選択。
- 「Permissions」→「Repository permissions
」→「Contents」に「Read and write」を許可。
7.「Generate Token」をクリック。
8.以下をコピーして、先ほどのPassword部分に当該トークンを入力(ペースト)。
remote: Write access to repository not granted.が返ってきた場合(現在利用しているTokenがamplifyNextjsHandsOnを対象としたpushを行うに十分な権限を持っていない。)
以下が返ってきた場合、
remote: Write access to repository not granted.
fatal: unable to access 'https://github.com/[あなたのGitHubユーザー名]/amplifyNextjsHandsOn.git/': The requested URL returned error: 403
ひとつ上のアコーディオンの手順でアクセストークンを設定してください。
既存のアクセストークンを削除する場合はmacではキーチェーンアクセスを開きます。(手順0番目)
↓
git push -u origin main
↓
Username for 'https://github.com': [あなたのGitHubユーザー名]
Password for 'https://[あなたのGitHubユーザー名]@github.com':[先ほど作成したアクセストークン]
↓
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 12 threads
Compressing objects: 100% (20/20), done.
Writing objects: 100% (22/22), 46.94 KiB | 9.39 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/[あなたのGitHubユーザー名]/amplifyNextjsHandsOn.git
* [new branch] main -> main
branch 'main' set up to track 'origin/main'.
④Amplify ホスティング
Amplify コンソールで新しいプロジェクトを作成しましょう。
※今回は東京(ap-northeast-1)を選択しています。
以下の順序でクリックします。
※既に他のアプリが存在する方は新しいアプリケーション > WEBアプリケーションをホストとクリックします。
↓
⑤リポジトリに接続する
「GitHub」を選択して「続行」をクリックしてください。
GitHubの使用許可を求められた場合サインイン→許可します。
先ほどとは別ブラウザを利用している場合等、サインインし直しも求められるかもしれません。
[サインイン]
↓
[パーミッション]
ここからが本作業です。
↓
手元の挙動ですが、以下のように赤帯のエラーが発生するかもしれません。
↓
もう一度「GitHub」→続行をクリックすると「Githubの認証が成功しました。」と出るかと思います。
「最近更新されたリポジトリ
↓
「新しいサービスロールを作成して使用する」→「次へ」をクリック。
↓
確認画面が出ますので、「保存してデプロイ」をクリック。
↓
進行しています。
↓
プロビジョンが完了。
↓
構築が完了。
↓
デプロイが完了しました。(体感数分程度)
↓
「アクション」→「アプリ設定を表示」をクリック。
↓
「本番稼働ブランチ URL」をクリックします。
↓
本番稼働ブランチ URLから以下が確認出来ました。
⑥Build Image SettingsからデフォルトではLatestとなっているNext.jsのヴァージョンを変更する
Amplifyコンソール左サイドカラムから「ビルドの設定」をクリック。
→最下部「Build Image Settings」セクション右上の「Edit」をクリック。
↓
「構築イメージ設定を編集」モーダルから下部「パッケージバージョンの上書きを追加」をクリック。
「Next.js Version」を選択。
↓
ヴァージョンはデフォルトでは「Latest」になっています。
↓
エディタに戻って、Next.jsのヴァージョンを確認してみます。
package.jsonからdependencies > next を確認(＋コピー)します。
↓
先ほど「Latest」だった部分を上書きして「保存」します。
↓
反映されました。
↓
「環境変数」にも以下のように対応した値が確認出来ました。
⑦別ブランチ作成→マージ、プッシュ→確認
ローカルでpages/index.jsの内容を変更して保存します。
<h1 className={styles.title}>Amplify Hosting Test App ver2</h1>
↓
git checkout -b issue1
git add .
git commit -m "issue1 commit"
git checkout main
git merge issue1
git branch -d issue1
git push -u origin main
↓
再びプロビジョン→構築→デプロイが走りました。
↓
先ほどの「本番稼働ブランチ URL」のタブをリロードしてみます。
反映が確認出来ました。
⑧お片付け
- Amplifyコンソールからアプリの削除
- GITHUBリポジトリの削除(作成したTokenの削除)
お疲れ様でした。
Discussion