AWS AmplifyでRemix版Shopifyアプリを運用<情報不足で中止>

Remix

はじめに

  • Remixで作成したShopifyアプリをAWS Amplifyへデプロイし動かしてみた
  • amplify.ymlでビルド時の指示ができる、これはAmplifyコンソール上のビルド指示を上書きする
  • サーバーサイドとクライアントサイドを同時にデプロイできるメリットがある
  • Amplifyコンソールで設定する環境変数はビルド時のものなので、実行時は別で準備する必要がある
  • サーバーサイドはLambda関数が自動で作られている、これに環境変数を渡すため、ビルド時に.envを作成し、実行時にdotenvで読み込むことにした
  • node_modulesを含めたサイズが220MB以下になるエラーでハマったが、node-pruneで凌いだ
  • Shopifyのセッション管理をsqliteはやめて、postgresqlに変更

結末

  • LambdaからRDSへの接続を解決できず、情報が少ないため断念

参考

開発

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に変更する。

コマンド説明
prisma generate・node_modules/@prisma/clientを生成
・./schema.prismaがデフォルトのスキーマファイル
prisma migrate deploy・データベースの生成
・変更の反映
・prisma/migrations/SQLファイル
  • RDSがVPC内にある場合、Publicly AccessibleをONにする必要がある
  • RDSがVPC内にある場合、データベースのポートへローカルIPからのインバウンドルールを追加する必要がある

関連記事

カテゴリー

アーカイブ

Lang »