Remix

Remix版Shopifyアプリの運用 – 手動デプロイ

はじめにAmplify, Beanstalkで動かせなかった(経験不足、情報不足)ので、手動でデプロイすることにした本番環境ではなく、Shopifyと連携できることを確認するためのシンプルな環境を構築した1時間くらいでできるので、最初にこれをやってから、サーバレス系を試すべきだった関連https://www.s3lab.co.jp/blog/remix/2189/https://www.s3lab.co.jp/blog/remix/2145/手順EC2インスタンスの生成EIPの付与RDS Proxy経由でPostgresqlへ接続できるようにセキュリティグループを設定nginxのインストールRemixソースをgitからチェックアウトビルド、DBマイグレーション.envを設定npm installremix vite:buildnpx prisma generatenpx prisma migrate deployPubl

Remix

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

はじめにDBマイグレーションはEC2からおこなうCIツールは取り扱わない結末情報不足で動かすことができなかったので一旦中止する参考https://tamotech.blog/2020/07/17/forever-pm2-express/https://remix.run/docs/en/main/start/quickstart開発環境での作業Shopify 関連Shopify Partnerへのデプロイ$ shopify app deploy --resetリリース準備環境での作業設定ファイルの更新.envにステージに応じた設定を入力SHOPIFY_API_KEY= # Shopify partner consoleSHOPIFY_API_SECRET= # Shopify partner consoleDATASOURCE_URL=SHOPIFY_APP_URL=ビルド実行buildディレクトリにデプロイ用のcli

Remix

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

はじめに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-a

Remix

Remixの特徴

はじめにhttps://remix.run/docs/en/main/discussion/introduction#http-handler-and-adaptersRemix Q&AQ. Remixアプリは、サーバーとクライアントサイドにデプロイする必要がありますか?A. はい、Remixを使用する場合、アプリケーションを完全に動作させるためには、サーバーサイドとクライアントサイドの両方にデプロイする必要があります。サーバーサイド(SSR):役割: サーバーサイドレンダリング(SSR)を行い、初期ページロード時にHTMLを生成してクライアントに送信します。これにより、SEOが向上し、初期表示が高速化されます。また、サーバーサイドでAPIリクエストやデータベースとのやり取りを行います。構成: build/server/index.jsに生成されたサーバーHTTPハンドラーが使用されます。このハンドラーは、すべてのルートとモジュールを含み、サーバー上でのリクエスト処理を行います。クライアントサイド(CSR)

Remix

Remixアプリの作成手順

はじめにhttps://remix.run/docs/en/main/start/quickstartHello world! の表示https://remix.run/docs/en/main/start/tutorialhttps://remix.run/docs/en/main/file-conventions/routes環境% npm -v10.7.0% node -vv20.14.0Hello World作成% mkdir my-remix-app% cd my-remix-app% npm init -y% npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom% npm i -D @remix-run/dev vitevite.config.js の作成app/root.jsx の作成npx remix vite:buildpackage.

Lang »