【個人開発】Laravelでサーバーレスなアプリをサクッと作ろう

はじめに

アプリの作成手順だけ見たい方はこちらから

正月の暇な時間を使い、Laravelで小さなアプリを作成しました。ランニングコストを抑えるべくサーバーレスな構成にしたので、その過程をまとめておきます。

作ったアプリ

読める誤字メーカー

「誤字のある文章だけど、気にせず読める」という体験は日本人なら誰もがしたことがあると思います。このアプリは、入力されたテキストを、自然に読めるレベルまで誤字だらけにしてくれます。

使用例

入力：

むかしむかし、あるところに、小さな村がありました。その村には、のんびりした人たちがすんでいて、毎日畑で野菜を育てたり、小川で魚をとったりしてくらしていました。

↓
出力：

むかしむかし、あるところに、小さな村がありました。その村には、のびんりした人たちがすんでいて、毎日畑で野菜を育てたり、小川で魚をとったりしてくしらていしまた。

※この現象はタイポグリセミアと言われるそうです。興味ある方は調べてみて下さい。

構築手順

brefの利用

本アプリの構築にあたっては、LaravelアプリケーションをLambdaで実行するため、PHPのランタイムを提供してくれるbrefを利用します。
brefは公式ドキュメントが（英語ですが）とても充実しており、今回の構築でもほぼ公式ドキュメントの通りに進めて作成ができました。
そのため、この記事ではドキュメントに載っていないor少し引っ掛かるかもしれない個所をメインに書いていきます。

インフラ構成図

Brefの公式ドキュメントにある構成と同じです。セットアップ手順もこちらのページに載っています。
・メインの処理を行うリクエストはLambdaへ
・JSやCSSなどの静的ファイルはS3に配置し、CloudFrontでキャッシュさせる
という形をとっています。

引用：https://bref.sh/docs/use-cases/websites

気をつけるべき点として、S3に配置する静的ファイルは、プロジェクトごとに配置が異なるため、適宜適切なディレクトリを指定して下さい。（私の場合はpublic/build/assets/にjsファイルやCSSファイルを配置していたので、/build/assets/*にアクセスした際にS3の静的ファイルのキャッシュを取得するようにしています。）

Serverless.ymlの設定

静的ファイルをキャッシュするCloudFrontを簡単に作成するため、serverless-liftプラグインを使用しています。constructs要素に下記のように書くことで、S3へのアセットの配置・CloudFrontのビヘイビアの設定・カスタムドメインの設定までを一通り行ってくれます。

service: laravel

provider:
    name: aws
    region: ap-northeast-1 # 東京リージョンを指定
    environment:
        APP_ENV: production 
        SESSION_DRIVER: cookie

package:
    patterns:
        - '!node_modules/**'
        - '!public/storage'
        - '!resources/assets/**'
        - '!storage/**'
        - '!tests/**'
        - '!database/*.sqlite'

functions:

    web:
        handler: public/index.php
        runtime: php-82-fpm
        timeout: 28 
        events:
            - httpApi:
                path: /{proxy+} 
                method: ANY
    artisan:
        handler: artisan
        runtime: php-82-console
        timeout: 720

plugins:
  - ./vendor/bref/bref
  - serverless-lift

constructs:
    website:
        type: server-side-website
        assets:
            '/build/assets/*': public/build/assets/
            '/favicon.ico': public/favicon.ico
            '/robots.txt': public/robots.txt
        domain: <使用したいカスタムドメイン名> # あとで設定
        certificate: <SSL証明書のARN> # あとで設定

※カスタムドメインとACMで発行するSSL証明書のARNは、使用するCloudFrontのドメインが発行された後に記述しています。

カスタムドメインを設定するためにCloudFrontのドメインが必要になるため、一度serverless deployを実行しておきましょう。初回は5 ~ 10分程度かかります。
表示されたURLをすると、作成したアプリにアクセスできるはずです。

カスタムドメインの設定

ここまでくればもうほぼ完成なのですが、.cloudfront.netでアクセスしてもらうのも少し味気ないので、カスタムドメインを設定するところまで行います。

Route53でドメインの発行が済んでいる前提で進めています。

Route53で、使用するカスタムドメインのCNAMEレコードを作成します。向き先はserverless deploy実行時に表示されるCloudFrontのドメインを指定します。

Route53の設定例：

また、us-east-1リージョンでカスタムドメインのSSL証明書を作成しておきます。（CloudFrontはus-east-1リージョンに作成された証明書しか利用できないため）

完成

カスタムドメイン名と発行したSSL証明書のARNをserverless.ymlに記述します。（記述例は上述の通り）
最後に、もう一度serverless deployを実行すると、カスタムドメインのURLが表示されます。

無事、作成したアプリにアクセスできました！

参考

bref公式ドキュメント：
https://bref.sh/docs/setup

brefを使ったサーバーレスWebサイトの構築手順：
https://bref.sh/docs/use-cases/websites

serverless-liftプラグインのリポジトリ：
https://github.com/getlift/lift