Google DriveにファイルをアップロードしたらWebページが公開される仕組みを作った

はじめに

今年もアドベントカレンダーはじまりました！
NEアドベントカレンダーの1日目の記事です！
NE株式会社が自分たちの興味あるテーマについて自由に書いていきます。
言い出しっぺの法則で毎年1日目をいただいています。
毎年一緒に参加して盛り上げてくれる皆さんに感謝です👏

概要と背景

お客様と商談をしていく中で、お客様が直接触れるWebモック画面を提供したい、というニーズがチーム内にありました。
今の時代、生成AIにより簡単なWebモックであればすぐに作れる世の中になってきています。
これを毎回Webサーバー立てて提供する、だと手間であったため
最速でモックを作ってお客様に対して「例えばこんなイメージなんですけど〜」と提供することを目指しました。

連携図

今回はモックなので静的ページのみの提供。

各仕組みの詳細

n8n

n8nとは複数のアプリケーションやサービスをノーコードでつなぎ、業務プロセスを自動化できるオープンソースのワークフロー自動化ツールです
以下のようなワークフローを組みました。

google drive

特定のフォルダ配下にファイルを追加/更新することをトリガーにn8nが動く仕組みとなっています。

google cloud

ドライブへのアクセスを可能とするためにGoogle CloudのAPIキーを作成。
こちらをn8nにCredential登録することでドライブへのアクセスを可能としています。

S3

非公開バケットを作成。
ここにアップロードされる。

IAM

S3へアクセスするためのIAMユーザーを作成。
アクセスキーを発行し、これをn8nのcredential登録することで先程のS3バケットに対してアップロード可能にしています。

CloudFront

CloudFrontに先程のS3バケットを設定しWebページとして提供しています。
今回のニーズに合わせてキャッシュポリシーも作成。

Slack

処理が完了したらSlackへ通知する。
SlackのAPIアプリクライアントを作成しキーをn8nのcredential登録することで対応しています。

まとめ

技術の組み合わせでできるだろうなーと脳内で思っていたものがサクッと構築できて良かったです。
思いつきから実現まで多分1週間くらいでした。（実作業は2人日くらい？）
n8nのワークフローも初めて組んだし、CloudFrontも自分で組んだのは初めてでした。
初めてのものでも思い描いたモノが作れて提供できたのは良かったです。
実際作った仕組みが活用され、お客様に最速でモックイメージを提供できており、やりたいことが実現できていて良い感じです。

おわりに

今年もアドカレ頑張っていきましょー！
明日の記事もお楽しみに〜！