📝

Elastic Beanstalk に Cloudflare の har-sanitizer をデプロイしてみた

に公開

cloudflare/har-sanitizer
Elastic Beanstalk 環境にデプロイしてみました。

前提

  • コマンド実行環境は CloudShell

1. プロジェクトのクローン

プロジェクトのクローンと初期設定を行います。

$ git clone https://github.com/cloudflare/har-sanitizer.git
$ cd har-sanitizer
$ npm install
$ npm i concurrently

# ローカルでの動作確認
$ npm run build
$ npm run dev

エラーが発生しなければ初期設定は完了です。

2. Elastic Beanstalk 用の設定

Elastic Beanstalk へのデプロイ用にファイルの追加などを行います。

$ mkdir .ebextensions
$ cat > .ebextensions/nodejs-settings.config << 'EOF'
option_settings:
  aws:elasticbeanstalk:application:environment:
    PORT: 8080
    NODE_ENV: production
EOF

$ cat > .ebignore << 'EOF'
# Elastic Beanstalk Files
.elasticbeanstalk/*
!.elasticbeanstalk/*.cfg.yml
!.elasticbeanstalk/*.global.yml

# Docker files (we want to use Node.js platform instead)
Dockerfile
.dockerignore

# Development files
.git/
node_modules/
.vscode/
*.log
.env.local
.env.development.local
.env.test.local
.env.production.local
EOF

# package.json の修正
$ npm pkg set scripts.start="vite preview --port \${PORT:-8080} --host 0.0.0.0"

# 依存関係の修正
# Vite 関連
$ npm pkg set dependencies.vite="^4.4.5"
$ npm pkg set dependencies.@vitejs/plugin-react="^4.0.3"
$ npm pkg set dependencies.typescript="^5.0.2"

# CSS 関連
$ npm pkg set dependencies.tailwindcss="^3.3.4"
$ npm pkg set dependencies.postcss="^8.4.31"
$ npm pkg set dependencies.autoprefixer="^10.4.16"

# devDependencies から削除
$ npm pkg delete devDependencies.vite
$ npm pkg delete devDependencies.@vitejs/plugin-react
$ npm pkg delete devDependencies.typescript
$ npm pkg delete devDependencies.tailwindcss
$ npm pkg delete devDependencies.postcss
$ npm pkg delete devDependencies.autoprefixer

# vite.config.ts の修正
cat > vite.config.ts << 'EOF'
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
        plugins: [react()],
        server: {
                port: 3000,
                hmr: {
                        clientPort: 3001,
                },
        },
        preview: {
                host: '0.0.0.0',
                port: 8080,
                strictPort: true,
                allowedHosts: [
                        '.elasticbeanstalk.com'
                ]
        }
});
EOF

3. EB CLI のインストール

aws/aws-elastic-beanstalk-cli-setup: Simplified EB CLI installation mechanism.
コマンドでのデプロイ用に EB CLI をインストールします。

$ git clone https://github.com/aws/aws-elastic-beanstalk-cli-setup.git
$ python ./aws-elastic-beanstalk-cli-setup/scripts/ebcli_installer.py
$ echo 'export PATH="/home/ec2-user/.ebcli-virtual-env/executables:$PATH"' >> ~/.bash_profile && source ~/.bash_profile
$ eb --version
EB CLI 3.25 (Python 3.9.23 (main, Aug 11 2025, 00:00:00) 
[GCC 11.5.0 20240719 (Red Hat 11.5.0-5)])

CLI のバージョン情報が表示されればインストール完了です。

再度ローカルでビルドとテストを実行します。

$ npm run build
$ PORT=8080 npm start

エラーが発生しなければテストは完了です。

4. Elastic Beanstalk 環境の作成

EB CLI でデプロイしていきます。

# Elastic Beanstalk 環境の初期化
$ eb init
# 東京リージョンを選択
Select a default region
...
(default is 3): 9

Select an application to use
1) [ Create new Application ]
(default is 1):

# Node.js プラットフォームを選択
It appears you are using Docker. Is this correct?
(Y/n): n
Select a platform.
...
6) Node.js
(make a selection): 6

Select a platform branch.
1) Node.js 22 running on 64bit Amazon Linux 2023
2) Node.js 20 running on 64bit Amazon Linux 2023
(default is 1): 

Do you wish to continue with CodeCommit? (Y/n): n
Do you want to set up SSH for your instances?
(Y/n): n

# EC2 インスタンス 1 つでデプロイ
$ eb create --single
Enter Environment Name
(default is har-sanitizer-dev): 
Enter DNS CNAME prefix
(default is har-sanitizer-dev): 

Would you like to enable Spot Fleet requests for this environment? (y/N): 

エラーが発生しなければデプロイ完了です。

5. 動作確認

Elastic Beanstalk コンソールから、作成した環境のドメインにアクセスします。
以下のようなページが表示されれば成功です。

まとめ

今回は Elastic Beanstalk に Cloudflare の har-sanitizer をデプロイしてみました。
どなたかの参考になれば幸いです。

参考資料

Discussion