Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for tree__and__tree tree__and__tree
November 19, 2025
6

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

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

Avatar for tree__and__tree

tree__and__tree

November 19, 2025
Tweet

Transcript

  1. Snowpark Container Services (SPCS): Snowflake上でコンテナアプリケーションを実 行できるサービス 特徴: Snowflake環境内でDockerコンテナを実行 Snowflakeデータと同じセキュアな環境 フルマネージドサービス

    メリット: Snowflakeのデータとアプリケーションロジックを統合 既存のコンテナアプリを簡単に移行可能 Snowflake SPCSとは Yusuke Hayashi 9
  2. フロントエンド: React + Vite アプリ画面(質問・返信の投稿・表 示) バックエンド: FastAPI ロジック周り、Firebaseとの連携 データベース:

    Firebase Realtime Database リアルタイムデータ保存・同期 デプロイ:SPCS(Snowpark Container Services) 全体像 Yusuke Hayashi 10
  3. 実施内容: 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
  4. 課題1: アーキテクチャミスマッチ Apple Silicon (ARM64) でビルド → SPCSはAMD64 解決: --platform

    linux/amd64 オプションでクロスビルド 課題2: esbuildクラッシュ(Frontend) QEMUエミュレーション環境でGoランタイムが不安定 解決: Google Cloud Buildでネイティブビルド 2. コンテナイメージビルド 躓いた点 Yusuke Hayashi 12
  5. 課題: 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
  6. 課題: Content Security Policy (CSP) 違反 Refused to connect because

    it violates the document's Content Security Policy. Snowflake Proxyが自動的にCSPヘッダーを注入 → 異なるオリジン間の通信(別のSPCSサービスへの通信)が拒否される 3. サービスデプロイ Yusuke Hayashi 17
  7. CSP問題の解決策 1. Backendを内部エンドポイント化 ( public: false ) 2. Frontend nginxにリバースプロキシ追加

    3. Frontend API URLを相対パス化 ( /api ) 結果: ブラウザからは同一オリジンへのリクエスト扱い → CSP OK nginx(サーバー側)が内部Backendにプロキシ サーバー間通信はCSP対象外 3. サービスデプロイ Yusuke Hayashi 18