RemixをAWS Amplify Hostingでデプロイする
code:tree
my-app/
├─ bin/
│ ├─ package.json
│ ├─ postbuild.sh
├─ deploy-manifest.json
├─ server.js
// package.jsonがあるディレクトリ
追加で必要になるファイルはこのようになっています。
code:bin/package.json
{
"type": "module"
}
code:postbuild.sh
rm -rf ./.amplify-hosting
mkdir -p ./.amplify-hosting/compute/default
cp -r ./build ./.amplify-hosting/compute/default/build
cp -r server.js ./.amplify-hosting/compute/default
cp -r bin/package.json ./.amplify-hosting/compute/default
cp -r ./node_modules ./.amplify-hosting/compute/default/node_modules
cp -r public ./.amplify-hosting/static
cp deploy-manifest.json ./.amplify-hosting/deploy-manifest.json
code:deploy-manifest.json
{
"version": 1,
"framework": { "name": "remix", "version": "2.10.0" },
"imageSettings": {
"domains": [],
"remotePatterns": [],
"formats": [],
"minimumCacheTTL": 60,
"dangerouslyAllowSVG": false
},
"routes": [
{
"path": "/_amplify/image",
"target": {
"kind": "ImageOptimization",
"cacheControl": "public, max-age=3600, immutable"
}
},
{
"path": "/*.*",
"target": {
"kind": "Static",
"cacheControl": "public, max-age=2"
},
"fallback": {
"kind": "Compute",
"src": "default"
}
},
{
"path": "/*",
"target": {
"kind": "Compute",
"src": "default"
}
}
],
"computeResources": [
{
"name": "default",
"runtime": "nodejs18.x",
"entrypoint": "server.js"
}
]
}
code:server.js
import { createRequestHandler } from '@remix-run/express';
import express from 'express';
import * as build from './build/server/index.js';
const app = express();
app.use(express.static('build/client'));
app.all('*', createRequestHandler({ build }));
app.listen(3000, () => {
});