clipcrow.com

企業WEBサイト

クリップクロウの企業WEBサイト。会社案内としてコンサルテーションやSIの事業について言及し、 ClipCrowに関するページでは製品のカラー設計でデザインされている。 SSGとDevOps/CDを利用して、リポジトリにコンテンツをプッシュすると公開先クラウドに自動で展開させる。

/(root)

静的サイトジェネレーター lume を使用して構築されたサイト。以下の手順に従ってメンテナンスや操作を行える。

• Deno をインストールする reference
• このリポジトリをローカル環境にCloneする。リポジトリのルートフォルダに移動する
• 下記コマンドを実行する。WEBブラウザが自動的に開き、WEBサイトをプレビューできる

% deno task serve

お問い合わせSPAからの送信は、Lumeプラグインとして作ったSPA Proxyで受信している。 Deno Deploy上では同等機能の、serve.tsを用いて動作する。以下の設定を行う。

• DEV: .envファイルを用意して、"SLACK_WEBHOOK_URL"キーにSlack Webhook URLを記載する。
• PROD: Deno Deployに、同上のキーを用意する。

/src

サイトのコンテンツが格納されている。テンプレートにはReactを.tsxで利用している。

/src/contact

お問い合わせの機能を提供するSPA。

• Lumeプラグインを用いて、deno bundleを実行している。
• SPAとしての依存関係は、/src/contact/deno.json で定義されている。
• お問い合わせを操作すると、"/slack"へ入力内容を送信する。SPA Proxyもしくはserve.tsで受信して処理を行う

デプロイ

Deno Deploy のGitHub連携(GitHub App)により、リポジトリへのプッシュがあったときにDeno Deployのビルド環境で自動的にビルド・配置される。設定は console.deno.com のアプリ設定で管理する。GitHub Actionsは使用していない。

• ビルドコマンド: deno task build
• エントリポイント: serve.ts(静的サイト配信ではなく動的アプリとして構成する。 /slack へのPOSTを受けるサーバーサイド機能があるため)
• 環境変数 SLACK_WEBHOOK_URL をアプリ設定に登録する