はじめに
AWS初心者です。AWSの基本知識をキャッチアップすべく、色々触りながら学習中です。
今回は、モバイルアプリやウェブアプリを構築するためのAWSのサービスであるAWS Amplifyを触ってWebアプリをどのくらい簡単にデプロイできるか試した内容を記事にしました。初心者向けの内容となっておりますので、温かい目で見て頂ければ幸いです。
想定読者
- AWS初心者で、基本機能を色々触ってみたい方
概要
本ページでは、ローカルで用意した簡易WebアプリをAWS Amplifyにデプロイしてアクセスするところまでの手順をまとめています。
チュートリアル
簡易Webアプリの作成
今回あまり本質ではない部分なので、初めてのNext.jsサンプルプログラム作成を参考にさせていただきました。とても分かりやすかったです。開発環境は揃っていたので、5分程度でサンプルプログラムを準備できました。
Amplifyにデプロイするための対応
後述でも出てきますが、Amplifyにデプロイするフォルダの構成/形式として以下のような注意書きがありました。
調べてみた結果、Amplifyにデプロイするにはnext exportを使用して静的サイトとして出力したうえで、zip化する必要があることが分かったため、以下の手順を追加で行いました。
「package.json」のスクリプト定義
以下のスクリプトを追加
"scripts": {
"export": "next build && next export"
「next.config.ts」への設定追加
静的エクスポート用の設定を追加
module.exports = {
output: 'export', // 静的エクスポート用の設定
};
buildとexportの実行
cd my-app
npm run export
出力フォルダ(out)をzip化
zip -r amplifyDeploy.zip ./out
デプロイするWebアプリの準備はこれで完了です。
AWS Amplifyへのデプロイ
AWSコンソールへログインし、AWS Amplifyの「アプリケーションのデプロイ」を選択します。
今回は、「Gitなしでデプロイ」を選択して、「次へ」へ進みます。
※本当は今後に向けて、CodeCommitと連携したデプロイをやりたかったですが、新規利用のサポートが終了しているため、諦めました。
前述で作成したzipファイルをドラッグ＆ドロップして、「保存してデプロイ」を選択します。
数秒でデプロイが完了しました。
右上の「デプロイされたURLにアクセス」を選択すると、作成した簡易Webアプリにアクセスできることを確認できました。
## アプリの設定（おまけ）
デプロイしたアプリに対して、アクセスコントールやリダイレクト、カスタムドメイン(Amazon Route53と連携)などGUIで設定が可能となっています。
試しにアクセスコントロールで対象ブランチにアクセス権を設定してみました。
再度、Webアプリにアクセスするとユーザ名とパスワードが要求される動作を確認することができました。
まとめ
AWS Amplifyを使って、Webアプリのデプロイをどれくらい簡単にできるのか試してみました。AWS Amplifyを使えば、初心者でも簡単にWebアプリのデプロイと動作確認することができました。