【Amplify入門】Amplifyとは？使い方まで紹介
今回はAmplifyとは？使い方までの紹介です。
Amplifyとは？
AWS Amplifyは、Webアプリやモバイルアプリに必要な開発・デプロイ機能をまとめたフルスタック開発プラットフォームです
Amplifyの特徴
| 特長 | 内容 |
|---|---|
| 初心者でも簡単 | CLIや管理画面で簡単に全体構成ができる |
| フルスタック対応 | フロント＆バックエンドをTypeScriptで一括構築可能 |
| CI/CD標準搭載 | Git連携による自動ビルド・プレビュー・マルチ環境作成などができる |
スポンサードサーチ
Amplifyの利用される場面
- 静的サイトやサーバーレス構成をすばやくデプロイしたい場合
- 小〜中規模のWebサービスやプロトタイプ開発に最適
- フロントエンド開発者がインフラを意識せずアプリを公開したい時
Amplifyの構築方法
- 新しいアプリを作成
- ソースコードプロバイダーを選択
- リポジトリとブランチを追加
- アプリケーションの設定
- 確認
スポンサードサーチ
ソースコードプロバイダーを選択
今回はGithubと連携します
リポジトリとブランチを追加
Githubと連携するとリポジトリがプルダウンで選択できます。
リポジトリに紐づくブランチが選択できるので、選んでください。
アプリケーションの設定
- アプリケーション名
- ビルド設定：ymlを編集
version: 1.0
frontend:
phases:
preBuild:
commands:
- nvm install xx # Node.jsバージョンxxをインストール
- nvm use xx # 指定バージョンを使用
- node -v # Node.jsのバージョン確認（ログ出力用）
- npm -v # npmのバージョン確認（ログ出力用）
- npm install . # パッケージのインストール
build:
commands:
- npm run generate # サイトのビルドコマンド（静的ファイル生成）
artifacts:
baseDirectory: dist # ビルド成果物（公開するファイル）の場所
files:
- '**/*' # すべてのファイルを成果物として含める
cache:
paths:
- 'node_modules/**/*' # node_modulesをキャッシュしてビルド高速化
詳細設定
ビルドのインスタンスタイプ
ビルド実行時に使われる仮想マシンのスペックを選ぶ項目
現在の設定：標準（8GB メモリ｜4vCPU｜128GBディスク）
- 通常はこのままで十分
- ビルドが極端に重い場合や時間がかかる場合だけ、上位スペックを選ぶ
ビルドイメージ
ビルド時に使われるOSの環境を指定
現在の設定：Amazon Linux 2023（デフォルト）
- 特別な理由がなければデフォルトでOK
- 特定のNodeバージョンやライブラリが動かない場合は、変更を検討
環境変数
.envに書く内容で管理したい場合
- ここで設定した値は、ビルドやアプリ内で
process.env経由で参照可能 - APIキーやシークレットトークンの管理に便利
keypassで管理はせずに、Amplifyで管理すると言う方法もあります
Cookieをキャッシュキーに保存
キャッシュの最適化関連設定
- 有効にすると、特定Cookieをキャッシュ判定に含められる
- 静的サイトなら基本無効でOK
- 状況次第でパフォーマンスが変わるため、注意喚起が出ている
ライブパッケージの更新
ビルド時に、指定したパッケージだけ最新バージョンを適用できる
- 基本的に安定したバージョンで固定する場合は無視でOK
- 特定パッケージだけ常に最新化したい場合に使う
サーバーサイドレンダリング（SSR）のデプロイ
SSR機能がある場合（Next.jsやNuxt.jsでAPIを含む構成）に有効化する
- 静的サイト（SSG）の場合はチェック不要
- SSR機能を使いたい場合のみ有効化する
アクセスコントロール
アクセスコントロールではURLにアクセスした時にパスワードをかけることができます
開発環境ではパスワードを設定して、本番ではパブリックにして誰でも閲覧できるようにしておきましょう(注:コーポレートやECサイトを例にした場合）
スポンサードサーチ
ビルド通知
ビルド通知ではデプロイされるとその結果が通知されます。
チャットワークやスラックなどよく目につくところに通知するのをおすすめします。
カスタムドメイン
カスタムドメインとはご自身で決めたドメインとAmplifyが発行しているドメインの紐付けを行います。
カスタム
https://hogehoge.com → mainブランチ公開用
https://dev.hogehoge.com → developブランチ公開用- 保有・管理する独自ドメイン
- Route 53 や他社DNSでドメインを購入し、Amplifyと紐づけたもの
- ユーザーがアクセスする「本番・開発用の見せるURL」として使う
- Amplifyが裏側でSSL証明書（https）を自動発行・管理
amplifyapp.com
AWS Amplifyが発行する以下のようなURL次のようになっています。
https://main.xxxxx.amplifyapp.com
https://develop.xxxxx.amplifyapp.com- Amplifyがアプリ作成時に自動で発行する無料のサブドメイン
- 設定しなくても勝手に割り当てられる
- テストや確認用URLとして使う場合が多い（本番運用では使わないのが一般的）
- 独自ドメインと違い、見た目が信用されづらい
