Amplify Gen2 で HUGO で作ったサイトを構築する
AWS Amplify Gen2 なるものが出ていたらしいので、現行の Amplify との違いを知りたい。
Amplify は SSG で作ったサイトをホスティングするためだけに使っているので、バックエンド側の Amplify の知識は皆無。
バックエンドの違いについては一切触れない。
とりあえずアプリを作ってみる
AWS Console で Amplify の画面に行くと callout が出ている。
[アプリを作成]をクリックする
おしゃれな画面が出た。
オプション2の既存のアプリケーションを使用 のルートに進む。
プロジェクトのルートに Amplify を追加するらしい。
既存のプロジェクトがなかったので、Quick start の手順に沿って新規サイトを作る
HUGO のバージョンは v0.123.2
hugo new playground-hugo-amplify-gen2
cd playground-hugo-amplify-gen2
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo new content posts/my-first-post.md
hugo serve
プレビュー成功したので、Git 管理したくないものを .gitignore
に追加してコミットしておく
echo "resources/\npublic/\n.hugo_build.lock" > .gitignore
git add -am "first commit"
ここで Amplify の手順に戻る。
プロジェクトのルートで npm create amplify
する。
プロジェクトをどこに作るかと聞かれるので、デフォルトの現在位置(.
)を指定すると、依存パッケージのインストールが始まる。
npm create amplify
Need to install the following packages:
create-amplify@0.6.0
Ok to proceed? (y) y
? Where should we create your project? .
Installing required dependencies...
依存パッケージのインストールが終わると、テンプレートが生成されたらしい
# npm create amplify の続きの出力結果
Creating template files...
Successfully created a new project!
Welcome to AWS Amplify!
プロジェクトのルートに「amplify」ディレクトリが作られた。
amplify の中身はバックエンドに関係しそうなファイルがたくさんある。
あとはルートに package.json
も作られている
├── amplify
│ ├── auth
│ │ └── resource.ts
│ ├── backend.ts
│ ├── data
│ │ └── resource.ts
│ ├── package.json
│ └── tsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── HUGO に必要なファイル群
ルートの package.json のなかみ
{
"name": "playground-hugo-amplify-gen2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-amplify": "^6.0.17"
},
"devDependencies": {
"@aws-amplify/backend": "^0.12.1",
"@aws-amplify/backend-cli": "^0.11.1",
"aws-cdk": "^2.129.0",
"aws-cdk-lib": "^2.129.0",
"constructs": "^10.3.0",
"typescript": "^5.3.3"
}
}
この状態でコミットして push する
echo "node_modules/" >> .gitignore
git add .
git commit -m "Init amplify gen2"
git push origin main
Amplify の画面に戻って、Git リポジトリを接続する
ビルド設定をする
HUGO は自動検出されなかったので、「ビルドコマンド」「ベースディレクトリ」を HUGO 用に変更する
サービスロールは新規に作る
現行だと、アプリを作ってからサービスロールを設定するはずなので、ビルドの時点で指定できるのは嬉しい
環境変数とビルドイメージを設定する
ライブパッケージで HUGO を選択しておく。現行と同じでここに存在するのはありがたいところ。
[次へ]をクリックする
確認画面が表示されるので、[保存してデプロイ]をクリックするとアプリの作成が始まる
デプロイに失敗した。
ログを見ると、使用した HUGO のテーマ(ananke)の CSS ビルドに失敗したみたい。
DartSass に依存してたので、HUGO の extented の方を使わないといけないみたい。
ライブパッケージに extented を指定することはできないので、HUGO のテーマを変更する
Error: error building site: TOCSS: failed to transform "/ananke/css/main.css" (text/css). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
2024-02-23T03:56:14.880Z [ERROR]: !!! Build failed
2024-02-23T03:56:14.880Z [ERROR]: !!! Error: Command failed with exit code 1
2024-02-23T03:56:14.880Z [INFO]: # Starting environment caching...
2024-02-23T03:56:14.881Z [INFO]: # Environment caching completed
雑にテーマを作る
プロジェクトのルートで以下のコマンドを実行する
hugo new theme foo
使用するテーマも foo に変更しておく
- theme = 'ananke'
+ theme = 'foo'
ちょっと前まで空のテンプレートが出来てた気がするけど、ボイラーテンプレートが作られるようになってる?
ありがたい。
この内容でコミットして push しておく。
git add .
git commit -m "Replace theme"
git push origin main
今度こそビルドに成功した。
ちなみに作成したアプリは「プレビュー」というラベルがついて一覧に表示されるらしい。
アプリを作ってみたので、現行の違いを確認する。
左メニューはこんな感じ
近日公開はついているけど、ホスティングの機能数においては現行との違いはなさそう。
すでにリリースされている機能に差分がありそうかを見る
「アクセスコントロール」「環境変数」「シークレット」「リダイレクトとリライト」は現行との機能に違いがなさそう。
UI が今どきになったという感じ。
現行は amplify.yml
にビルド設定をフェーズごとに記載しているけれど、Gen2 で変わっているのか気になると思って調べたら、相変わらず amplify.yml
でよさそう。
プロジェクトの直下におけば良いというのも変化なしっぽい。
フォーマットのバージョンも変わっていない
プロジェクトの全般設定も現行と同じっぽい。
以下は気になるところ
- amplify.yml から backend の phase を消すとどうなる?
- SSG だけで作りたい場合、バックエンドの設定は不要。「amplify」ディレクトリを消すとどうなる?
- もっと言えば「
npm create amplify
していない Git リポジトリを連携して Gen2 な Amplify アプリを作れる?
amplify.yml から backend の phase を消すとどうなる?
結果:ビルド成功した
version: 1
- backend:
- phases:
- build:
- commands:
- - 'nvm use 18'
- - 'npm ci'
- - 'npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID'
frontend:
phases:
preBuild:
commands:
- 'npm ci'
build:
commands:
- hugo
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- 'node_modules/**/*'
ビルド時間は 5 分 24 秒から 2 分 14 秒に短縮した
SSG だけで作りたい場合、バックエンドの設定は不要。「amplify」ディレクトリを消すとどうなる?
rm -rf amplify/
ビルドに成功した。「amplify」ディレクトリは必須ではないらしい。
ルートの package.json を消すとどうなるんだろうか。
rm -f package.json package-lock.json
ビルドに失敗した!
npm ci
しようとして、package-lock.json
がないので怒られるっぽい。
# Executing command: npm ci
2024-02-23T05:19:09.510Z [WARNING]: npm
2024-02-23T05:19:09.516Z [WARNING]: ERR! code EUSAGE
npm ERR!
npm ERR! The `npm ci` command can only install with an existing package-lock.json or
npm ERR! npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or
npm ERR! later to generate a package-lock.json file, then try again.
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global] [--global-style] [--legacy-bundling]
npm ERR! [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run "npm help ci" for more info
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2024-02-23T05_19_05_966Z-debug-0.log
2024-02-23T05:19:09.675Z [ERROR]: !!! Build failed
2024-02-23T05:19:09.675Z [ERROR]: !!! Error: Command failed with exit code 1
2024-02-23T05:19:09.675Z [INFO]: # Starting environment caching...
2024-02-23T05:19:09.675Z [INFO]: # Uploading environment cache artifact...
2024-02-23T05:19:09.805Z [INFO]: # Uploaded environment cache artifact
2024-02-23T05:19:09.805Z [INFO]: # Environment caching completed
Terminating logging...
じゃあpackage-lock.json があれば成功するのかな
rm -rf node_modules/
npm init -y
npm install
git add package.json package-lock.json
git commit -m 'npm init'
git push origin main
成功した!
ビルドの準備段階として aws-cdk などがある前提で npm ci するので、そこを通す必要があったみたい。
もっと言えばnpm create amplify
していない Git リポジトリを連携して Gen2 な Amplify アプリを作れる?
これは作れなかった。
npm create amplify
をするか、Amplify Hosting(現行の「新しいアプリケーション > ウェブアプリケーションをホスト」から操作をしろと言われた
何をみて判定しているんだろう。
https://zenn.dev/link/comments/de356881a2b86c で npm ci
する前提なので、package.json を追加すればいいんだろうか。
がダメ!
からの「amplify」ディレクトリだとどうか? -> NG
mkdir amplify
touch amplify/.gitkeep
npm create amplify
して、amplify/package.json
だけあるとどうなるんだろう
ダメだった。
色々実験したところ、以下の条件を満たすと Gen2 に接続できてビルドに成功するっぽい。
- リポジトリを接続する段階で
amplify.yml
が存在しない - package.json と pacakge-lock.json が存在する
- package.json の依存パッケージに amplify ビルドに必要なパッケージがある(どれをみているかは不明)
"dependencies": { "aws-amplify": "^6.0.17" }, "devDependencies": { "@aws-amplify/backend": "^0.12.1", "@aws-amplify/backend-cli": "^0.11.1", "aws-cdk": "^2.130.0", "aws-cdk-lib": "^2.130.0" }
Amplify Gen2 for ホスティング機能だけを使う前提のまとめ
現時点では、ホスティング機能だけを目的に使うには Gen2 はまだ早い、というよりはバックエンド機能を持つアプリを作ることを前提として(先行して?)作られているっぽく見えた。
- 現行にある「カスタムドメイン」「プレビュー」「カスタムヘッダー」「モニタリング」がまだ提供されていない
- Gen2 としてアプリを作るためには、package.json に Amplify 関係の npm パッケージの定義が必要
これから先、現行からGen2に移行が必要になるとしたら、ホスティング or アプリケーション のように分かれるのかも?