SPCSで社内用webアプリを作る

2025年11月19日の「帰ってきたSPCS活用最新事例LT祭：再び解き放て、Snowpark Container Servicesの力！（https://techplay.jp/event/987932）」というLT会で発表した際の資料です。SPCS(Snowpark Container Services)を使ってWebアプリをデプロイしたという内容です。

Transcript

1. SPCSで社内用webアプリを作る さみっと（Yusuke Hayashi） Yusuke Hayashi
2. ナレッジシェア活動の取り組み 今回作成したアプリ「ナレトーーク！」について SPCSでの構築過程 デモ アジェンダ Yusuke Hayashi 2
3. さみっと(Yusuke Hayashi) X: @tree__and__tree (アンダーバー2 つです) マーケティングリサーチの会社でAI エンジニア、データエンジニアとし て働く 最近はLLMの活用や社内分析環境構 築、ナレッジシェア活動に従事 自己紹介 Yusuke Hayashi 3
4. ナレッジシェア活動の取り組み ナレッジシェア活動の取り組み 今回作成したアプリ「ナレトーーク！」について SPCSでの構築過程 デモ Yusuke Hayashi 4
5. 24年夏、組織の再編成によって本部に技術系メンバーが集結 本部内（約70名）を対象に、 「各メンバーがナレッジを共有する文化を醸成すること」 を目的として、ナレッジシェア活動をスタート ナレッジ投稿の場としてConfluence、ナレッジシェア活性化の場としてTeamsチャネル を使用し、現在も継続中 毎週500~1,000ほどの閲覧、50件ほどのページ作成 使われ続けるために様々な施策を実施 1年ほど前からナレッジシェア活動を推進 Yusuke Hayashi 5
6. 今回作成したアプリ「ナレトーーク！」について ナレッジシェア活動の取り組み 今回作成したアプリ「ナレトーーク！」について SPCSでの構築過程 デモ Yusuke Hayashi 6
7. 匿名で質問や意見を投稿できるアプ リ フラットなコミュニケーション の促進 遠慮や体裁にとらわれずに業務 上の疑問を解消 Google Cloudで構築したが、SPCSで もできたらいいなと思い試してみた 施策の一環として「ナレト ーーク！」を作成 Yusuke Hayashi 7
8. SPCSでの構築過程 ナレッジシェア活動の取り組み 今回作成したアプリ「ナレトーーク！」について SPCSでの構築過程 デモ Yusuke Hayashi 8
9. Snowpark Container Services (SPCS): Snowflake上でコンテナアプリケーションを実 行できるサービス 特徴: Snowflake環境内でDockerコンテナを実行 Snowflakeデータと同じセキュアな環境 フルマネージドサービス メリット: Snowflakeのデータとアプリケーションロジックを統合 既存のコンテナアプリを簡単に移行可能 Snowflake SPCSとは Yusuke Hayashi 9
10. フロントエンド： React + Vite アプリ画面（質問・返信の投稿・表 示） バックエンド： FastAPI ロジック周り、Firebaseとの連携 データベース： Firebase Realtime Database リアルタイムデータ保存・同期 デプロイ：SPCS（Snowpark Container Services） 全体像 Yusuke Hayashi 10
11. 実施内容: Snowflakeリソースの作成 Database、Schema、Image Repository Compute Pool（XSサイズ、1インスタンス） External Access Integration（Firebase接続用）:これによってSnowlflake外部へのア クセスを可能にしている Secret（Firebase Service Account Key） ：バックエンドとデータベースの通信で使 用 Firebase RTDB新規インスタンス作成 アプリのソースコード実装は省略 1. 環境構築 Yusuke Hayashi 11
12. 課題1: アーキテクチャミスマッチ Apple Silicon (ARM64) でビルド → SPCSはAMD64 解決: --platform linux/amd64 オプションでクロスビルド 課題2: esbuildクラッシュ（Frontend） QEMUエミュレーション環境でGoランタイムが不安定 解決: Google Cloud Buildでネイティブビルド 2. コンテナイメージビルド 躓いた点 Yusuke Hayashi 12
13. バックエンド：ローカルでビルド し、SPCSにデプロイ フロントエンド：Google Cloud Build でビルドし、SPCSにデプロイ 2. コンテナイメージビルド 最終的に Yusuke Hayashi 13
14. Firebaseと接続するための情報を環 境変数、シークレットに記載 内部エンドポイントのみにし、 Frontendのnginx経由でアクセス 3. サービスデプロイ バックエンド Yusuke Hayashi 14
15. 公開エンドポイントにし、ブラウザ からアクセスできるように 3. サービスデプロイ フロントエンド Yusuke Hayashi 15
16. 課題: Firebase認証エラー Invalid control character at: line 1 column 175 原因: Snowflake SecretのJSON文字列に改行文字が含まれる 解決: Pythonコードで制御文字をエスケープ service_account_env_escaped = ( service_account_env.replace('\n', '\\n') .replace('\r', '\\r') .replace('\t', '\\t') ) 3. サービスデプロイ Yusuke Hayashi 16
17. 課題: Content Security Policy (CSP) 違反 Refused to connect because it violates the document's Content Security Policy. Snowflake Proxyが自動的にCSPヘッダーを注入 → 異なるオリジン間の通信（別のSPCSサービスへの通信）が拒否される 3. サービスデプロイ Yusuke Hayashi 17
18. CSP問題の解決策 1. Backendを内部エンドポイント化 ( public: false ) 2. Frontend nginxにリバースプロキシ追加 3. Frontend API URLを相対パス化 ( /api ) 結果: ブラウザからは同一オリジンへのリクエスト扱い → CSP OK nginx（サーバー側）が内部Backendにプロキシ サーバー間通信はCSP対象外 3. サービスデプロイ Yusuke Hayashi 18
19. サービスデプロイ Yusuke Hayashi 19
20. デモ ナレッジシェア活動の取り組み 今回作成したアプリ「ナレトーーク！」について SPCSでの構築過程 デモ Yusuke Hayashi 20
21. デモ: ナレトーーク！ 実際の動作をお見せします Yusuke Hayashi 21
22. まとめ SPCS+Firebaseのアーキテクチャで 動くWebアプリ（匿名投稿アプリ） ができた Yusuke Hayashi 22
23. 公式ドキュメント サービス間通信 Snowpark Container Services上でWebアプリ(FastAPI/React/TypeScript)を動かしてみた 参考 Yusuke Hayashi 23