はじめに
- Remixで作成したShopifyアプリをAWS Amplifyへデプロイし動かしてみた
- amplify.ymlでビルド時の指示ができる、これはAmplifyコンソール上のビルド指示を上書きする
- サーバーサイドとクライアントサイドを同時にデプロイできるメリットがある
- Amplifyコンソールで設定する環境変数はビルド時のものなので、実行時は別で準備する必要がある
- サーバーサイドはLambda関数が自動で作られている、これに環境変数を渡すため、ビルド時に.envを作成し、実行時にdotenvで読み込むことにした
- node_modulesを含めたサイズが220MB以下になるエラーでハマったが、node-pruneで凌いだ
- Shopifyのセッション管理をsqliteはやめて、postgresqlに変更
結末
- LambdaからRDSへの接続を解決できず、情報が少ないため断念
参考
- https://richdevelops.dev/how-to-deploy-remix-apps-with-ssr-to-aws-amplify
- https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html
- https://docs.aws.amazon.com/amplify/latest/userguide/access-logs.html
- https://docs.aws.amazon.com/amplify/latest/userguide/using-framework-adapter.html
- https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/troubleshooting-SSR.html
- https://docs.amplify.aws/react/build-a-backend/auth/
- https://shopify.dev/docs/apps/launch/deployment/deploy-web-app/deploy-to-hosting-service#step-4-set-up-environment-variables
- https://github.com/Shopify/shopify-app-js/tree/main/packages/apps/session-storage/shopify-app-session-storage-prisma#troubleshooting
- https://www.prisma.io/docs/orm/reference/prisma-cli-reference#prisma-migrate
- https://www.xiegerts.com/post/prisma-nextjs-amplify-hosting/
- https://docs.amplify.aws/react/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/
開発
Amplifyでアプリ作成
Githubでリポジトリを選択
デプロイ実行
Node.jsのversionを指定
必須ではないが、デプロイサイズ縮小のためにバージョンを固定してみた
node_modulesが原因でサイズエラー発生
2024-08-24T05:06:14.379Z [ERROR]: !!! CustomerError:
The size of the build output (285436745) exceeds the max allowed size of 230686720 bytes.
Please reduce the size of your build output (/codebuild/output/src3774881223/src/{app name}/.amplify-hosting/compute/default) and try again.
ロールの指定
ビルド、デプロイ、実行時のログを確認してデバッグするために設定する
- Amplifyの権限付与
- Cloudwatchの権限付与
amplify.ymlの例
.amplify-hostingディレクトリ以下にサーバーサイド、クライアントサイドをそれぞれデプロイする
version: 1
baseDirectory: .amplify-hosting
frontend:
phases:
preBuild:
commands:
- node -v
- npm ci
- npm install -g node-prune
build:
commands:
- rm -rf build .amplify-hosting
- echo "SCOPES=${SCOPES}" >> .env
- echo "SHOPIFY_API_KEY=${SHOPIFY_API_KEY}" >> .env
- echo "SHOPIFY_API_SECRET=${SHOPIFY_API_SECRET}" >> .env
- echo "SHOPIFY_APP_URL=${SHOPIFY_APP_URL}" >> .env
- echo "SHOPIFY_MANAGEMENT_API_ENDPOINT=${SHOPIFY_MANAGEMENT_API_ENDPOINT}" >> .env
- echo "SHOPIFY_MANAGEMENT_API_KEY=${SHOPIFY_MANAGEMENT_API_KEY}" >> .env
- cat .env
- npm run build
- mv build .amplify-hosting
- mv .amplify-hosting/client .amplify-hosting/static
- mkdir -p .amplify-hosting/compute
- mv .amplify-hosting/server .amplify-hosting/compute/default
- cp .env .amplify-hosting/compute/default/
- npm prune --production
- node-prune
- mv node_modules .amplify-hosting/compute/default/
- cp package.json .amplify-hosting/compute/default
- cp server.js .amplify-hosting/compute/default
- cp deploy-manifest.json .amplify-hosting/deploy-manifest.json
- du -sh .amplify-hosting
- uname -a
artifacts:
files:
- "**/*"
baseDirectory: .amplify-hosting
ssr:
customHeaders:
- pattern: '**/*'
headers:
- key: 'Cache-Control'
value: 'max-age=0'
cloudWatchLogs:
enabled: true
logGroupName: '/aws/amplify/{}'
ビルド・デプロイ時の環境変数の設定
フロントの表示確認
prismaの初期化
Amplifyでビルドしても、実行環境はLambdaであり、sqliteファイルを直接操作するには、様々な困難があるため、postgresqlに変更する。
コマンド | 説明 |
| ・node_modules/@prisma/clientを生成 ・./schema.prismaがデフォルトのスキーマファイル |
prisma migrate deploy | ・データベースの生成 ・変更の反映 ・prisma/migrations/SQLファイル |
- RDSがVPC内にある場合、Publicly AccessibleをONにする必要がある
- RDSがVPC内にある場合、データベースのポートへローカルIPからのインバウンドルールを追加する必要がある