私はassetsファイルなどの静的ファイルをサーバで配信することが多いのですが、本当はS3において、さらにCloudFrontなどのCDNでキャッシュした方が良いよなと思っていました。

が、、ちょっと面倒で後回しになっていたので、実際にサーバ負荷を確認して、静的ファイルをS3に移動させる労力に見合う結果が得られそうか確認したいと思います。

今回の検証では、サーバはECS Fargateで、1vCPU/2GBを使います。

ECS Fargateは以下の記事のようにたてられます。

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみる

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみます！ ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。 ACM ALB ECS オートスケール設定 以下

it.kensan.net

assets/images配下に、100KBの画像を格納して、その画像ファイルにjmeterで大量アクセスした際の負荷を検証してみます。

準備

以下のようにFargateコンテナを立ち上げます。

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみる

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみます！ ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。 ACM ALB ECS オートスケール設定 以下

it.kensan.net

assets/images配下に100KBの画像を格納します。

以下のコマンドでビルドします。

docker build -t rails-demo .

以下のコマンドでコンテナ起動します。

docker run -d -p 3000:3000 \
  -e RAILS_MASTER_KEY=$(cat config/master.key) \
  --name my-app \
  rails-demo

100KBの画像のパスを取得するため、コンテナにbashで入ります

＜コンテナID確認＞
docker ps -a
＜コンテナにbashではいる＞
docker exec -it {コンテナID} /bin/bash

以下のコマンドでパスを取得できます。

bundle exec rails c
helper.asset_url("100KB.png")

jmeter準備

macの場合以下のコマンドでインストールできます

brew install jmeter

インストールしたら

jmeter

とターミナルに打ち込むとjmeterが起動します。

jmeter設定

以下の設定で1分間かけて50スレッド立ち上がるようにします。そのあとは4分間継続して負荷を描けます

Thread Group
  Number of Threads:50
  Ramp-up:60
  Duration:300

Constant Throughput Timer
 Target throughput:3000

HTTP Request
  protocol:https
  Server Name or ip:ECSのドメイン
  Path:{helper.asset_url("100KB.png")の結果}

14%とそれほど高いとも言えず、何とも言えない結果ですが、利用者数が増えるほど無視できない負荷になることも考えられると思います。

そのため、以下のような対応が必要と思われます…!

• CloudFrontなどのCDNでのキャッシュ
• そもそもassetsファイルはS3などにおき、サーバにリクエストが来ないようにする
  • S3に置いたうえで、CDNでキャッシュもした方が良さそう

ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。

• ACM
• ALB
• ECS
• オートスケール設定

以下の記事を試してみる感じです。

Amazon ECS Express Mode を使用して、インフラストラクチャを複雑化することなく、本番環境に対応したアプリケーションを構築 | Amazon Web Services

コンテナ化されたアプリケーションを本番環境にデプロイするには、ロードバランサー、自動スケーリングポリシー、ネッ

aws.amazon.com

ざっくり以下のような感じでECS-Fagate-Express モードを試してみます！

1. テスト用のコンテナイメージをECRにPush
   1. 試しにRails8.1のコンテナイメージをPushします
2. ECSコンソールに移動して、Expressモードを選択して、設定してみる

テスト用のコンテナイメージをECRにPush

テスト用のコンテナイメージをECRにPushします。

今回はRails8.1のコンテナイメージをPushします。

Railsコンテナイメージの作成

ローカルにRailsインストールして、Railsアプリを作成してみます。

以下のコマンドでRailsインストール

sudo gem install rails

以下のコマンドでRailsアプリ作成して、作成したディレクトリに移動

rails new my-app
cd my-app

バージョン確認

rails -v
Rails 8.1.1

Dockerfileも作成されているので「vi Dockerfile」で確認します。

以下のようになっていると思います。

# syntax=docker/dockerfile:1
# check=error=true

# This Dockerfile is designed for production, not development. Use with Kamal or build'n'run by hand:
# docker build -t my_app .
# docker run -d -p 80:80 -e RAILS_MASTER_KEY= --name my_app my_app

# For a containerized dev environment, see Dev Containers: https://guides.rubyonrails.org/getting_started_with_devcontainer.html

# Make sure RUBY_VERSION matches the Ruby version in .ruby-version
ARG RUBY_VERSION=3.4.2
FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base

# Rails app lives here
WORKDIR /rails

# Install base packages
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y curl libjemalloc2 libvips sqlite3 && \
    ln -s /usr/lib/$(uname -m)-linux-gnu/libjemalloc.so.2 /usr/local/lib/libjemalloc.so && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Set production environment variables and enable jemalloc for reduced memory usage and latency.
ENV RAILS_ENV="production" \
    BUNDLE_DEPLOYMENT="1" \
    BUNDLE_PATH="/usr/local/bundle" \
    BUNDLE_WITHOUT="development" \
    LD_PRELOAD="/usr/local/lib/libjemalloc.so"

# Throw-away build stage to reduce size of final image
FROM base AS build

# Install packages needed to build gems
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y build-essential git libyaml-dev pkg-config && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Install application gems
COPY Gemfile Gemfile.lock vendor ./

RUN bundle install && \
    rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git && \
    # -j 1 disable parallel compilation to avoid a QEMU bug: https://github.com/rails/bootsnap/issues/495
    bundle exec bootsnap precompile -j 1 --gemfile

# Copy application code
COPY . .

# Precompile bootsnap code for faster boot times.
# -j 1 disable parallel compilation to avoid a QEMU bug: https://github.com/rails/bootsnap/issues/495
RUN bundle exec bootsnap precompile -j 1 app/ lib/

# Precompiling assets for production without requiring secret RAILS_MASTER_KEY
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile




# Final stage for app image
FROM base

# Run and own only the runtime files as a non-root user for security
RUN groupadd --system --gid 1000 rails && \
    useradd rails --uid 1000 --gid 1000 --create-home --shell /bin/bash
USER 1000:1000

# Copy built artifacts: gems, application
COPY --chown=rails:rails --from=build "${BUNDLE_PATH}" "${BUNDLE_PATH}"
COPY --chown=rails:rails --from=build /rails /rails

# Entrypoint prepares the database.
ENTRYPOINT ["/rails/bin/docker-entrypoint"]

# Start server via Thruster by default, this can be overwritten at runtime
EXPOSE 80
CMD ["./bin/thrust", "./bin/rails", "server"]

今回はテスト用なので、Dockerfileを以下のように変更します。

「ENV RAILS_ENV="production"」をコメントアウトして、「ENV RAILS_ENV=development」を追記します。
#ENV RAILS_ENV="production" \
ENV RAILS_ENV=development\

以下のようにENTRYPOINTをコメントアウト
#ENTRYPOINT ["/rails/bin/docker-entrypoint"]

以下のようにEXPOSEとCMDを変更
#EXPOSE 80
#CMD ["./bin/thrust", "./bin/rails", "server"]

EXPOSE 3000
CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

config/environments/development.rbに以下を追記します。これがないとFargateで確認時にエラーになります。

config.hosts.clear

コンテナイメージの動作確認

まずはビルドします。

docker build -t rails-demo .

次にコンテナ起動です。

docker run -d -p 3000:3000 \
  -e RAILS_MASTER_KEY=$(cat config/master.key) \
  --name my-app \
  rails-demo

http://localhost:3000/にアクセスして以下のwelcome画面が出ればokです。

Rails8.1のコンテナイメージをECRにPush

以下のコマンドで、AWSの接続設定をしておきます。

aws configure

次にECRログインします。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com

以下のコマンドでリポジトリを作成します。

aws ecr create-repository \
        --repository-name rails \
        --image-scanning-configuration scanOnPush=true \
        --region ap-northeast-1

Railsアプリのタグ作成します

docker tag rails-demo:latest {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Railsアプリのpushです

docker push {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

ECSコンソールに移動して、Expressモードを選択して、設定してみる

1. ECSコンソールに移動します
2. Expressモードを選択します
   1. イメージ URIでは先ほどpushしたECRのイメージを選択します
   2. その他の設定のコンテナポートは3000を指定します。
3. 作成ボタン押下

Expressモードで作成時はCPUアーキテクチャを設定できないようです。

ARMを使う場合は、作成後にタスク定義からCPUアーキテクチャを変更する必要あがあります。

動作確認

ECSコンソールのアプリケーション URLにアクセスすると以下のようにRailsが起動できました！

以下のようにオートスケールも自動的に設定されています。

素晴らしいー

その１　基本ログ：デバッグの最初の一歩

console.logは、変数や関数の結果を確認する基本的な方法です。コードがどのように動作しているかを追跡するのに便利です。

例:

const userName = "Alice";
console.log("User Name:", userName); // User Name: Alice

ポイント:

• 複数の値をカンマで区切ることで、コンパクトに情報を表示可能。
• エラーが発生している箇所を特定するための第一歩として役立つ。
• console.error()やconsole.warn()を使うと強調できたりする

その２　フォーマットログ：スタイリッシュな出力

文字列にスタイルを適用して、ログを視覚的に整理できます。%cを使ってカスタマイズするのがコツです。

例:

console.log("%cSuccess!", "color: green; font-size: 16px; font-weight: bold;");
console.log("%cWarning!", "color: orange; font-size: 16px; font-weight: bold;");
console.log("%cError!", "color: red; font-size: 16px; font-weight: bold;");

• テキストに色やフォントスタイルを加えることで、重要なメッセージを強調。
• 特に、成功・警告・エラーのログを視覚的に区別するのに便利。

その３　 オブジェクトログ：構造化データの確認

オブジェクトや配列を出力するときは、console.logで構造化されたビューを得られます。console.tableを使うとさらに見やすくなります。

例:

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];

console.log("User List:", users); // 標準的なオブジェクト表示
console.table(users); // テーブル形式で表示

以下、console.table実行結果です。

ポイント:

• console.tableはデータを表形式で表示するため、リストや配列の中身を確認するのに最適。
• APIレスポンスやデバッグで大活躍。

まずはDockerでお勉強環境（動作確認する環境）を作ります。

環境構築

必要なファイルの作成

Dockerfileを以下の内容で作ります。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
WORKDIR /app

次にdocker-compose.ymlを以下の内容で作ります。

services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

コンテナを立ち上げ、必要なもののインストール

コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

必要なものをインストールします。

npm install typescript ts-node ts-node-dev
# tsconfig.jsonファイルを作成
npx tsc --init

動作確認

test.tsファイルを作成し「console.log(‘test’)」と記載して、以下のコマンドで実行できます。

npx ts-node test.ts

Dockerファイルの修正

Dockerfileでpackage.jsonを参照して必要なもののインストールをするように修正します。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
COPY package*.json ./
RUN npm install
WORKDIR /app

再度、コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

動作確認

npx ts-node test.ts

これでお勉強の準備完了です。

型定義を試してみる

TypeScriptといえば、型定義ということで、型定義の勉強をしてみます。

基本の型定義

以下の基本となる型定義を試してみます。

const 変数名: 型 = 値;

文字列に文字列を入れてみる

const name1: string = "ABC";
console.log(name1);
→ABCが出力される

文字列に数値を入れてみるとエラーになります。

const name2: string = 1; 
console.log(name2);
→エラー

anyにすると何でも入れられちゃいます。

const name1: any = "ABC";
console.log(name1);
→ABCが出力される

const name2: any = 1;
console.log(name2);
→1が出力される

オブジェクト

オブジェクトの場合、以下のように定義します。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: "ABC"
}
console.log(item);
→{ id: 1, name: 'ABC' }が出力される

以下のように一部の定義を使用しないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1
}
console.log(item);

オプションパラメーターのハテナマークをつけておくと、定義しなくてもエラーになりません。

const item: {
    id: number,
    name?: string
} = {
    id: 1
}
console.log(item);
→{ id: 1 }が出力される

オプションパラメーターのハテナマークをつけておくと、undefinedを設定することも可能です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→{ id: 1, name: undefined }が出力される

ちなみに、オプションパラメーターをつけないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→エラーになる

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

Tips

以下、TypeScriptでもJavaScriptでも使えそうなTips

デバッグ

console.logで変数名を記載してあげると、ログ出力時にどの変数のログかが分かるので便利です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log("item", item);
→item { id: 1, name: undefined }と出力される

文字列操作

` を使って文字列を囲むことで、${} を使えます。${} の中には、変数や式などを埋め込めます。

const name1: String = 'taro'
const test: String = `I am ${name1}.`
console.log(test)
→I am taro.と出力される

数値も入れられちゃいます

const name1: Number = 1 
const test: String = `I am ${name1}.`
console.log(test)
→I am 1.と出力されます

まとめ

TypeScriptの勉強をDocker環境でやってみました！！

↓Value-Authとは↓

本人認証とは、ログイン時にSMS・メールで認証番号を送信し、 その番号によって本人であることを確認するサービスです。
この本人認証が、Value-Authでは0円で簡単に始められます。

Value-Authで本人認証を始めるまでの流れ

1. 申込会員登録
2. Value-Authのアカウント作成
3. Value-Authにログイン
4. APIキー発行
   1. APIキーはどこかにメモしておく
5. サイト登録
6. 以下のWordPressプラグインをインストール
   1. https://www.value-domain.com/security/value-auth/flow/#cms
7. WordPress プラグインの設定
   1. APIキー、認証コードを設定
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

Value-Authでの本人認証をWordPresに設定してみる

Step1　申込会員登録

以下のリンクから会員登録します。

Step2　Value-Authのアカウント作成

以下のメニューからアカウントを作成します。

Step3　Value-Authにログイン

アカウントを作成するとログインボタンが表示されますので、クリックしてログインします。

Step4　APIキー発行

Value-Authのログイン後の画面でAPIキーを発行し、発行されたAPIキーをメモしておきます。

APIキーはWordPress設定時に使用します。

Step5　サイト登録

Value-Authのログイン後の画面で、サイト名とホスト名を指定してサイト登録します。

これで、Value-Auth側の設定は完了です。残りはWordPressの設定です。

Step6　WordPressプラグインをインストール

以下のURLからWordPressプラグインをダウンロードします。

ご利用の流れ | Value-Auth（バリューオース）

Value-Authのご利用の流れページです。Value-Authは、SMSなど複数の本人認証を無料で導入でき、お客様のサービスやアプリへの設置も簡単なサービスです。

www.value-domain.com

ダウンロードしたプラグインをアップロードします。

↓プラグイン画面の新規プラグインを追加を押下↓

プラグインのアップロードボタンを押下すると↓アップロード画面↓が表示されます。

Step7　プラグインの設定

追加したプラグインの設定画面を開き以下を設定します。

1. 1. APIキー、認証コードを設定（Value-Authから発行される値）
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

動作確認

ログインすると、以下の画面が表示されます！

メールアドレスまたはSMSで通知された認証コードを入力すると、ログイン成功します！

まとめ

WordPressセキュリティ対策として、Value-Authを使用して、WordPress管理画面にログイン際に本人認証を追加してみました！

↓Value-Authはこちらから始められます！↓

無料でWordPressを使えるということです！

↓スターレンタルサーバーの申し込みはこちらから↓

スターレンタルサーバー(Star Server)のフリープランの特徴

スターレンタルサーバーはこんなサーバーだよというのを記載していきます。

• 容量
  • ３GB
• 初期費用
  • 0円
• 月額費用
  • 0円
• WordPressが使える
  • しかも複数のWordPressをインストールできる（複数のサイト構築ができる）
• 無料独自SSLも使える

要するに、0円でWordPressが使えてSSL（httpsでのアクセス）に対応しています。

しかも複数サイトの構築ができます！！

スターレンタルサーバー(Star Server)のフリープランの注意点

スターレンタルサーバーの注意点を記載していきます。

• 容量が3GBと少し少なめ
• 3ヶ月ごとに契約更新の手続きが必要となる

容量は少し少なめなものの、試しに初めてみるという方には十分かと思います。

また、3ヶ月ごとに更新が必要となるので、忘れずに更新しましょ！

実際にスターレンタルサーバーを使ってみる

まずは契約からです。

スターレンタルサーバーのフリープラン契約

以下からフリープランの契約が可能です。

WordPressのインストール

スターレンタルサーバーのサーバーパネルからWordPressをインストールできます。

以下の画面の赤線の上をクリックすればインストール画面に進めます。

次にWordPressを追加ボタンを押下します。

WordPress簡単インストール画面が出てくるので、ブログ名/ユーザ名/パスワード/メールアドレスは必須なので入力します。それ以外の項目は、お好みの設定をして「インストールする」ボタンを押下します。(ブログ名/ユーザ名/パスワード/メールアドレス以外は特に変更なしでもOKです。)

「インストールする」ボタンを押下後、しばらくすると出来上がったWordPress画面にアクセスできます。

サイトアクセスして以下の表示がされた場合には、しばらく待ってから再度アクセスするとWordPress画面にアクセスできます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

作成したサイトにアクセスしてみる

作成したサイトにアクセスして、以下のようにWordPressの画面が表示されれば成功です。

SSL化してみる

サーバーパネルからSSL設定を押下して、SSL設定状況をONにするとSSL化完了です！

これでhttpsで作成したサイトにアクセスできます。

使ってみてよかったこと

簡単な画面操作のみで、複数サイト作成できて、SSL化できるというのがかなり便利かと思いました！！初心者でも簡単にサイト作成が可能で、しかも無料です。

また、WordPressで有名な（よく使われている）テーマのCocoonをスターレンタルサーバー管理画面から簡単にインストールできます。

まとめ

スターレンタルサーバー(Star Server)のフリープランを試してみました。

無料で複数サイト作成できて（複数WordPressをインストールできて）、SSL化まで無料でできました！！

素晴らしいスターレンタルサーバー！！

↓申し込みはこちらから↓

ネットオウル Q&A掲示板

secure.netowl.jp

入力できませんでしたが、現在は入力できるようになったようです！

塗り潰しだらけでわかりづらいと思いますが、「_」アンダーバー入力できています！！

↓申し込みはこちらから↓

ライトではWordPressを簡単にインストールできるのですが、エコノミープランではWordPressをインストールできないため、ひと手間かけて配信することになります。

できるだけ安くということで、エコノミープランを使いたい方向けの記事です。

実現方法ですが、以下の流れで「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

1. 自分のPCでWordPressのコンテンツを作成
2. 作成したコンテンツをHTML形式でエクスポート
3. エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

では早速WordPressコンテンツを「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

自分のPCでWordPressのコンテンツを作成

自分のPCにWordPressをインストールする

「Local」を使用するとこで簡単に自分のPCにWordPressをインストールできます。

WindowsでもmacOSでも使えます。

以下のURLから「Local」をダウンロードしてインストールします。

Local

localwp.com

次はWordPress管理画面にアクセスして、WordPressの設定をします。

WordPressの設定

まずは、パーマリンク設定から行います。

Word Pressのパーマリンク設定の変更

WordPress管理画面の設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力します。

次は、staticpress2019プラグインの設定をします。

WordPressのstaticpress2019プラグインを設定

WordPress の管理画面［プラグイン］-［新規追加］から「staticpress2019」をインストールして有効化します。

「staticpress2019」設定画面を開き、以下の2点設定します。

• Static URLに「ロリポップ！」から払い出されたドメインを入力
• Save DIRに作成したコンテンツをエクスポートするディレクトリを指定

次はHTML形式でエクスポートします！

作成したコンテンツをHTML形式でエクスポート

StaticPress2019を使ってエクスポートします。

staticpress2019でWordPressのコンテンツをHTMLファイルとして出力

インストールした「staticpress2019」の画面で「再構築」ボタンを押下します。これだけです。

では、ロリポップサーバーで配信してみます！

エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

まずFTPでロリポップサーバにHTMLをアップロードします。

ロリポップサーバーにHTMLをアップロード

以下のロリポップメニューからFTPを起動します。

エクスポートされたファイルを全てアップロードします。

結構ファイル数多いと思うので、以下を参考にFTPソフトを使う方がいいかもです！

各種FTPソフトの設定方法 - ロリポップ！レンタルサーバー

ロリポップ！レンタルサーバーのご利用マニュアル FTPソフトの設定を説明したマニュアルページです。

lolipop.jp

動作確認

「ロリポップ！」から払い出されたドメインにアクセスして以下のように画面表示できれば成功です。

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

まとめ

「ロリポップ！」レンタルサーバーのエコノミープランでWordPressのコンテンツを配信してみました。

少しでも安くwordpressコンテンツを配信したい方のお役に立てば….!

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

ちなみに私は割とPHP初心者です。

初心者ですが、これからAPI作成するならPHPが良いと思っています。

PHPが良い理由は、実装できる人が多いと思っていて、いざとなれば他の人（他の会社）に協力を仰ぎやすそうだからです。インターネット上に情報もいっぱいあるというアドバンテージもあると思います。

フレームワークは、PHPの中で一番ポピュラーという理由からLaravel！と考えています。

まずは、作成する環境について記載していきます。

作成する環境の構成

以下の構成で動かしてみます。

• プログラム
  • Laravel
• AWSリソース
  • API Gateway
  • Lambda

実際に、Laravel 11をAWS Lambdaで動かしてみます！！

Laravel 11をAWS Lambdaで動かしてみる

まずはLaravelプロジェクトを作成します。

Laravelプロジェクトの作成

以下のコマンドでLaravelプロジェクトを作成します。

composer create-project laravel/laravel lambda_test

プロジェクト作成ができたら、Laravelバージョンを確認します

cd lambda_test/
php artisan -V
Laravel Framework 11.36.1

上記のようにLaravelバージョンが確認できればOKです。

AWSにデプロイする準備

以下のコマンドでAWSのアクセスキーとシークレットキーを設定します

aws configure

アクセスキーとシークレットキーを設定後は、以下のような簡単なコマンドを使用して（以下はバケットの一覧を表示する例）、設定に成功しているか確認できます。

aws s3 ls

次にserverless frameworkをインストールします。

npm install -g serverless

次にbrefをインストールします。

composer require bref/bref bref/laravel-bridge --update-with-dependencies

次に serverless.yamlを生成します。

php artisan vendor:publish --tag=serverless-config

serverless.yamlのregionを以下の通り変更しておきます。（これで、デプロイ先を東京リージョンに変更しています。）

region: ap-northeast-1

serverless.yamlのruntimeも以下の通り変更しておきます。

    web:
        runtime: php-84-fpm
    artisan:
        runtime: php-84-console

修正後のserverless.yamlの全体は以下です。

service: laravel

provider:
    name: aws
    # The AWS region in which to deploy (us-east-1 is the default)
    region: ap-northeast-1
    # Environment variables
    environment:
        APP_ENV: production # Or use ${sls:stage} if you want the environment to match the stage
        SESSION_DRIVER: cookie # Change to database if you have set up a database

package:
    # Files and directories to exclude from deployment
    patterns:
        - '!node_modules/**'
        - '!public/storage'
        - '!resources/assets/**'
        - '!storage/**'
        - '!tests/**'
        - '!database/*.sqlite'

functions:

    # This function runs the Laravel website/API
    web:
        handler: public/index.php
        runtime: php-84-fpm
        timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
        events:
            - httpApi: '*'

    # This function lets us run artisan commands in Lambda
    artisan:
        handler: artisan
        runtime: php-84-console
        timeout: 720 # in seconds
        # Uncomment to also run the scheduler every minute
        #events:
        #    - schedule:
        #          rate: rate(1 minute)
        #          input: '"schedule:run"'

plugins:
    # We need to include the Bref plugin
    - ./vendor/bref/bref

デプロイしてみる

以下のコマンドでデプロイできます

serverless deploy

以下が出てきた場合はLogin/Registerを選択するとWEBブラウザが開くと思うので、ログイン（アカウントを持っていない場合作成）します。

Please login/register or enter your license key: … 
❯ Login/Register
  Get A License
  Enter A License Key
  Explain Licensing Basics

デプロイができると以下のようにエンドポイントが表示されます。

endpoint: ANY - ****************

動作確認

エンドポイントにアクセスし、以下のように画面表示されればOKです。

簡単なAPIを作ってみる

以下のコマンドでコントローラを作成

php artisan make:controller ApiProductController

コントローラを以下のとおり実装

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiProductController extends Controller
{
    public function index()
    {
        $products = [];
        $products['id'] = 1;
        $products['name'] = '商品名';
        return response()->json($products, 200);
    }
}

ルーティング（routes/web.php）ファイルに以下を追加

Route::get('/api', 'App\Http\Controllers\ApiProductController@index');

以下のコマンドでデプロイできます

serverless deploy

「エンドポイント/api」にアクセスして、以下のレスポンスが返って来れば成功です。

{
  "id": 1,
  "name": "商品名"
}

Laravelで作ったAPIをLambdaで動かす際に使うと良さそうAWSサービスは何か

API Gatewayは不要？

まず、Lambda関数URLがあるので、API GatewayはなくてもAPIの公開は可能で、この方がAPI Gateway分のコスト削減が可能とは思います。

しかし、API Gatewayを使用した方が、リクエストの認証（IAM、Cognito、APIキーなど）などが使える点で有利かと思います。

DBは？

RDSなら、RDS Proxy × Aurora Serverless v2という選択肢があると思います。

RDS Proxyを使うことで、データベースへの接続をプロキシすることで、データベースへの負荷を軽減できますが、8ACU分の料金がかかります。

費用を抑えたい場合、かつ同時接続数が少ない場合は、RDS ProxyなしでもOKかな。Aurora Serverless v2はゼロキャパシティのスケーリングをサポートしています。

Amazon Aurora Serverless v2 がゼロキャパシティへのスケーリングをサポート - AWS

AWS の新機能についてさらに詳しく知るには、 Amazon Aurora Serverless v2 がゼロキャパシティへのスケーリングをサポート

aws.amazon.com

ユースケースによっては、Aurora Serverless v2とElastiCacheという組み合わせで、ElastiCacheでRDSの情報をキャッシュしてRDSの負荷を抑えるというのもありかと。

もしくは、DynamoDBという選択肢もあると思いますが、設計の難易度が高い…ですね。

まとめ

DBの選択肢など迷うことも多くありますが、プログラムとしてはLaravel（PHP）がいいと思っています！！

• クラス操作（row-class-name）
  • 特定の行にクラスをつけたい場合に使用
• クリックイベント（row-click）について
  • 行クリックした場合に特定の関数を呼び出す
• 列固定表示
  • 横スクロール時に一番左の列を固定表示にしてみる

Element Plusについて

まずは、Element Plusについて簡単に記載します。

Element Plusは、Vue3対応のUIライブラリです。

A Vue 3 UI Framework | Element Plus

A Vue 3 based component library for designers and developers

element-plus.org

Element Plusのtableのクラス操作について

row-class-nameを使用して、特定の行にクラスをつけてみます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
:row-class-name="addClass"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
addClass({ row }) {
// 条件に応じてクラスを追加
if (row.Id === "1") {
return 'add-class';
}
return ''; // デフォルトでクラスを付けない
},
},
}
</script>

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
clickRow( row ) {
alert(row.Id);
},
},
}
</script>

Element Plusのtableの列固定表示について

カラムの設定で「fixed=“left”」を指定すると列固定表示できます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
fixed="left"
width="300"
/>
<el-table-column
prop="Name"
label="名前"
width="300"
/>
<el-table-column
prop="bikou"
label="備考"
width="300"
/>
</el-table>
</template>