はじめに
- Amplify, Beanstalkで動かせなかった（経験不足、情報不足）ので、手動でデプロイすることにした
- 本番環境ではなく、Shopifyと連携できることを確認するためのシンプルな環境を構築した
- １時間くらいでできるので、最初にこれをやってから、サーバレス系を試すべきだった
関連
手順
EC2インスタンスの生成
- EIPの付与
- RDS Proxy経由でPostgresqlへ接続できるようにセキュリティグループを設定
- nginxのインストール
- Remixソースをgitからチェックアウト
ビルド、DBマイグレーション
- .envを設定
- npm install
- remix vite:build
- npx prisma generate
- npx prisma migrate deploy
- PublicスキーマにSessionテーブルが生成されたことを確認
- デーモン化してポート3000で起動するファイルを作成
import { createRequestHandler } from "@remix-run/express";
import express from "express";
// notice that the result of `remix vite:build` is "just a module"
import * as build from "./build/server/index.js";
const app = express();
app.use(express.static("build/client"));
// and your app is "just a request handler"
app.all("*", createRequestHandler({ build }));
app.listen(3000, () => {
console.log("App listening on http://localhost:3000");
});
- forever start server2.js で起動
$ lsof -i:3000
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 22084 ec2-user 19u IPv6 65593 0t0 TCP *:hbci (LISTEN)
$ forever list
info: Forever processes running
data: uid command script forever pid id logfile uptime
data: [0] kChV /home/ec2-user/.nvm/versions/node/v20.14.0/bin/node server2.js 33892 33899 /home/ec2-user/.forever/kChV.log 0:6:58:30.498999999999796
Amazon Certificate Manager
- ワイルドカードドメインがあったので、サブドメインのSSL証明書を作成（以降、対象ドメイン）
Target Groupの作成
Load Balancerの作成
- 対象ドメイン:443のアクセスの場合、Target Groupへ転送
- SSL証明書を登録
Route53
- 対象ドメインのAレコードを作成し、エイリアスでLBに転送するように設定
Nginxの設定
server {
listen 80; # ポート80でリッスン
server_name {対象ドメイン}; # 対応するドメイン名を設定
location / {
proxy_pass http://localhost:3000; # ポート3000へのプロキシ設定
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Shopify Partner
- ShopifyアプリのApp URLやリダイレクト先を、対象ドメインに設定する
Shopify管理画面
- Embedしたアプリをクリックすると、管理画面内に画面が表示されることを確認する
