2022-05-20 S3 にファイルをアップロードして discord で共有するアプリケーションの作成
の続き。
目をつけていたスクリプト は無事動き、ブラウザから discord の Webhook へリクエストすることができた。
がしかし、 localhost ではよかったものの、アプリケーションをビルドし、 S3 にアップロードして動かしたところまたも CORS のエラーが発生した。
再度調べてみたが、Access-Control-Allow-Origin · Issue #2545 · discord/discord-api-docs にあるように、相当無理があるようだった。
そもそも、バックエンドのアプリケーションは自分管理でなく Discord 管理なので、CORS エラーについて自分ではどうしようもない。 Discord 側に、自分のドメインを許可してもらうようにお願いするしかないが、現実的でない。
Discord の Webhook URL を叩くだけの、バックエンドアプリケーションを作成してホストすることにした。
mimetype の取得
S3 にファイルを送る際、 mimetype の情報を指定する必要がある (そうでないと全部 octet-stream になってしまう)。そのため、下記のライブラリを指定した。
[AWS] S3へMIMEタイプを自動判定しながらアップロードする - Node.js
画像をアップロードする際に image/png など正しく指定して送るとブラウザでアクセスした際画像として開くが、 application/octet-stream として保存してしまうと、ブラウザはどんな名前のファイルであっても単にダウンロードしてしまう。
このライブラリを組み込むことによって、簡単にこの問題を解決することができた。感謝。
.env
script.js ファイルに認証情報等を直書きしていたが、もとより修正するつもりだったのでこのタイミングで修正を行った。
選定は下記のサイトを読んで。
Webpack build 時に環境にに応じた .env を読み込ませたい - かもメモ
ファイルサイズの判定
こんな感じでファイルサイズを表示してあげたかったので、以下のライブラリを使用。
1GB とかの大きなファイルの場合は、家に帰ってから Wi-Fi でダウンロードしたいかもしれないからね！
S3 と CloudFront でのホスト
この辺と、過去に同じようなことをやっているのでその設定を参照しながら設定。
ドメインは Freenum で取得。
- Deploy a Single Page Application (SPA) to AWS | by Jakob Pennington | Taptu | Medium
- Create alias records for services hosted in AWS
PHP のバックエンドを App Engine にデプロイする
Building an app with PHP 7+ | App Engine standard environment for PHP docs | Google Cloud を参照してデプロイ。
成果物は tarohida/discord-webhook-proxy
まだこの機能の実装を PHP 単体で行うつもりだったときに、App Engine へのデプロイは済ませていたので特に詰まることなく実施できた。
