目次
1.はじめに
2.今回やること
3.ご紹介
4.前提条件
5.AWSの設定
6.Next.jsプロジェクトの作成、Amplifyの組み込み
7.ソースコードの管理
8.ソースのホスティング
9.おわりに
1. はじめに
業務でNext.js、Amplifyを扱うことになりました。
そのとき構築したことの手順をつらつらと書き綴っていきます。
本記事ではWindows10で構築しています。
2. 今回やること
Next.jsで新規プロジェクトの雛形を作成。
AmplifyでWebサイトのデプロイ、ホスティング。
とりあえず開発環境を整えるというイメージで進めていきます。
3. ご紹介
今回登場する主役2名の簡単な紹介をします。
Next.jsくん
Reactをベースとしたフレームワーク。
SSR（サーバーサイドレンダリング）やファイルシステムベースのルーティングができる。
SSRを行う事によって、初期表示の読み込み速度を大幅に改善してくれる。
Amplifyさん
AWSで提供されているサービス。
諸々のバックエンド構築をしてくれる。
フロントエンドとバックエンドの接続を容易にする。
静的ページのデプロイ、ホスティングを一瞬で実現できる。
4. 前提条件
以下環境が整っていることを前提に進めていきます。
nodejsがインストールされている。
git 1.7.9以上 がインストールされている。
pythonがインストールされている。
AWSアカウントを所持している。
Visual Studio Codeがインストールされている。(他のエディタでも大丈夫です)
5. AWSの設定
AWSCLI用のユーザーを作成
AWSの下記ページにてユーザーを作成します。
ユーザー追加ページ
①ユーザー名の設定
任意のユーザー名を設定
AWSCLI用のユーザーなのでAwsCliUserとします。
②アクセスの種類の選択
AWSCLIでアクセスするので、プログラムによるアクセスは必須です。
③次のステップを押下
④アクセス許可の設定
既存のポリシーを直接アタッチを選択
⑤アタッチするポリシーを選択
AdministratorAccessを選択(AWSCLIを操作するために管理者権限が必要なため)
⑥次のステップを押下
⑦次のステップを押下
⑧ユーザーの作成を押下
⑨アクセスキーIDを確認＆メモ
⑩シークレットアクセスキーを確認＆メモ
シークレットアクセスキーは他人にみせちゃダメなやつです。 そしてシークレットアクセスキーは必ずここでメモしてください。 後から確認できないです。
AWSCLI用ユーザーの作成完了です。
Amplify用のユーザーを作成
先程と同様にユーザーの追加を行います。
ほとんど同じ操作なので、画像は省略します。
①ユーザー名の設定
任意のユーザー名を設定
Amplify用のユーザーなのでAmplifyUserとします。
②アクセスの種類の選択
プログラムによるアクセスにチェック
③次のステップを押下
④アクセス許可の設定
既存のポリシーを直接アタッチを選択
⑤アタッチするポリシーを選択
先人様がいらっしゃったので、こちらを参考にポリシーを選択しました。
下記のポリシーを選択
- AdministratorAccess-Amplify
- IAMFullAccess
- AmazonS3FullAccess
更に追加でAmplifyの全権限を持ったインラインポリシーを設定しますがそちらは後述します。
⑥次のステップを押下
⑦次のステップを押下
⑧ユーザーの作成を押下
⑨アクセスキーIDを確認＆メモ
⑩シークレットアクセスキーを確認＆メモ
Amplify用ユーザーの作成完了です。
インラインポリシーの作成と適用
先程少し話が出てきましたが、Amplifyの全権限を持ったインラインポリシーを作成しAmplifyUserに付与します。
AWSの下記ページにてポリシーを作成します。
ポリシー作成ページ
①サービスの選択
Amplifyを選択します。
②許可するアクションの選択
すべてのAmplifyアクションを選択します。
③リソースの指定
すべてのリソースを選択します。
④次のステップを押下
⑤次のステップを押下
タグの追加は不要です。
⑥名前の指定
今回はAmplifyFullAccessとする。
⑦ポリシーの作成を押下
⑧作成したポリシーを適用
ユーザー一覧からAmplifyUserを選択します。
アクセス権限の追加から先ほど作成したAmplifyFullAccessを直接アタッチします。
最終的に下記のようになればOKです。
AWS CLIのインストール、ユーザーの紐付け
AWS CLIのインストーラをダウンロード
くわしい手順はこちら
ダウンロード後、AWS CLI をインストールします。
その後コマンドプロンプトを開いて下記コマンドを実行します。
aws --version
次のような感じでバージョンが確認できればOKです。
aws-cli/2.1.38 Python/3.8.8 Windows/10 exe/AMD64 prompt/off
次にAWS CLIとAwsCliUserを紐付けます。
①下記コマンドを実行
aws configure --profile aws-cli
②（AwsCliUserの）アクセスキーを入力
AWS Access Key ID [None]:
③（AwsCliUserの）シークレットアクセスキーを入力
AWS Secret Access Key [None]:
④ ap-northeast-1 と入力
Default region name [None]:
⑤ json と入力
Default output format [None]:
⑥下記コマンドを実行
aws ec2 describe-instances --profile aws-cli
プロフィール情報が表示されれば完了です。
※-- More -- と出力されている状態は ctrl+c で処理中断できます。
Amplify CLIのインストール、ユーザーの紐付け
下記コマンドを実行し、 Amplify CLIをインストールします。
npm install -g @aws-amplify/cli
次のコマンドでバージョンが確認できればOKです
amplify --version
次にAmplify CLIとAmplifyUserを紐付けます。
①下記コマンドを実行
amplify configure
②ブラウザが開いてAWSの画面へ遷移するので、コマンドプロンプトに戻る。
③Press Enter to continue と表示されているので Enterを押下
④ap-northeast-1 を選択
※ユーザー作成済みなのでホントは何でも良い
⑤任意のユーザー名を入力（今回はAmplifyとしました。）
※ユーザー作成済みなのでホントは何でも良い
⑥IAMユーザーの作成画面が表示されますが、すでにユーザーは作成しているのでそのまま閉じてコマンドプロンプトに戻る。
⑦Press Enter to continue と表示されているので Enterを押下
⑧（AmplifyUserの）アクセスキーIDを入力
? accessKeyId: ********************
⑨（AmplifyUserの）シークレットアクセスキーを入力
? secretAccessKey: ********************
⑩任意のプロファイル名を入力
今回はAmplifyProfileとしました。
? Profile Name: AmplifyProfile
下記メッセージが表示されたら完了です。
Successfully set up the new user.
AWSの設定が完了しました。
お疲れさまです！
6. Next.jsプロジェクトの作成、Amplifyの組み込み
プロジェクトの作成
①コマンドプロンプトを開き、プロジェクトを格納したいフォルダの作成&遷移
mkdir Workspace
cd Workspace
②Nextjsプロジェクトの作成
npx create-next-app
③プロジェクト名を聞かれるので任意の名前を入力
今回は nextjsapp としました
? What is your project named? » nextjsapp
④Visual Studio Codeでプロジェクトフォルダ(nextjs_app)を開く
今後はVisual Studio Code内のターミナルでコマンドを実行していきます。
Amplifyの組み込み
①下記コマンドを実行
amplify init
②プロジェクト名を入力
Enter a name for the project (nextjsapp)
③環境名を入力
Enter a name for the environment (dev)
④使用エディタを選択
> Visual Studio Code
⑤言語を選択
> javascript
⑥フレームワークを選択
> react
⑥ソースディレクトリを入力
Source Directory Path: (src)
⑦ディストリビューションディレクトリを入力
※outに書き換える（デフォルトだとbuild）
Distribution Directory Path: out
⑧ビルドコマンドを入力
Build Command: (npm.cmd run-script build)
⑨スタートコマンドを入力
Start Command: (npm.cmd run-script start)
⑩AWSプロファイルを使用する
> AWS profile
⑪先ほど作成したプロファイルを選択
> AmplifyProfile
以上でプロジェクトの作成、Amplifyの組み込みが完了しました。
お疲れ様です！
7. ソースコードの管理
コードの管理はCodeCommitを利用します。
CodeCommitは簡単に言うとAWS上で使えるGitHubのようなものです。
役割としては同じものになります。
リポジトリの作成とプッシュ
①git-remote-codecommit (GRC)をインストール
CodeCommitを扱うためのツールです。pythonがインストールされている必要があります。
pip install git-remote-codecommit
②リポジトリを作成
aws codecommit create-repository --repository-name nextjs_app
③リポジトリの確認
CodeCommitでリポジトリが作成されていることを確認します。
④リモートリポジトリ追加
git remote add origin codecommit::ap-northeast-1://nextjs_app
⑤プロジェクトのソースをプッシュ
git push origin HEAD
⑥（再）リポジトリの確認
CodeCommitでソースがアップされていることを確認します。
これでCodeCommit上でソースの管理ができるようになりました。
お疲れさまです。
8. ソースのホスティング
Web上に今回作成したソースを公開します。
①FrontEnd Frontend environments タブを選択
②AWS CodeCommit を選択
③Connect branch を押下
④リポジトリ:nextjs_appを選択
⑤ブランチ:mainを選択
⑥次へを押下
⑦Create New Role を押下
新しいタブが開きロール作成画面が表示されます。（次へ の押下だけなので画像省略）
⑧次のステップ: アクセス権限 を押下
⑨次のステップ: タグ を押下
⑩次のステップ: 確認 を押下
⑪ロールを作成 を押下
ロール作成後、元のページに戻って操作をします。
⑫devを選択
⑬Refresh existing roles を押下
⑭amplifyconsole-backend-role を選択
⑮チェックを入れる
⑯次へ を押下
⑰保存してデプロイを押下
デプロイには少し時間がかかるので少々お待ち下さい
⑱サイトの確認
Next.jsのプロジェクトページが表示されれば、ホスティング完了です。
以上で全行程完了です。本当にお疲れさまでした！
あとはNextjsを思う存分楽しみましょう。
9. おわりに
NextjsもAmplifyもコマンドを打つだけで簡単に環境を構築できるのでとても便利だなと思いました。
技術の進歩は目覚ましいです！
拙い記事でしたがここまで閲覧いただきありがとうございます。
今後も新しい技術に触れることがあればまた筆を取ると思いますのでよろしくおねがいします。
以上、したらば！