インフラお久しぶりとなってしまいました。10/1に弊社コーポレートサイトがリニューアルされました。このサイトにおける技術的な部分にフォーカスして紹介をしていきたいと思います。システムコンセプト通常コーポレートサイトといいますとwordpressなどのCMSの導入をする事がほとんどです。弊社でもこれまではwordpressを利用していましたが運用するうちに気づいた事として管理が非常に面倒という点がありました。更新の簡単さと差し引いても目に見えにくい人的コストが高い状態は否めませんでした。そのため、リニューアルにあたっては早いうちから、管理コストの少ない構成とする事は決めていました。サーバーレスアーキテクチャを採用するという方針を決定致しました。バックエンドインフラ構成は以下の通りですサイトの大部分はs3で公開されています。prodといったビルドコマンドでs3に同期するような仕組みです。大部分はs3で公開されている為、s3は静的ホスティングとしています。前段にcloudfrontをかませていますが、これは独自ドメインにてSSLを使いたかったが為に使用しています。そのためキャッシュ及びネガティブキャッシュのTTLは0です。SSLはACMで取得しました。gatewayとlambdaを利用しています。この部分は一括して、リードプログラマの川勝さんに担当していただけました。lambdaはvalidateと、SMTP-AUTHにて別のサーバーにメールリレーするだけの簡単なプログラムとなっています。SESを利用しても問題はないかと思います。$1.5ほどの費用となります。TOPページに動画を使っている関係かこのうちの$1.2は転送量(cloudfront)です。このままでおおよそ$5/monthほどのコストで運用できるのではないでしょうか。考えなくてもよいという見えない人的コストも大きく削減されています。フロントエンドフロントエンド側では弊社フロントチームに新卒で参加した寺澤さんがコーディングから実装までほぼすべてを行いました。モバイルファーストを考え、スマフォの際はできるだけ転送量がかからないようjsやcssをminifyを行ったり、モバイル端末の際はTOP動画をgifアニメにするなどの変更を行っています。PC側の動画の圧縮なども作業いただきました。静的ファイルを生成するという構成上、テンプレートエンジンの利用は当初より考えていてPugを使用しています。ビルドはgulpを利用していて、ビルド時のコマンドで生成したhtml、css、画像、jsをs3へ持っていく形としています。jsフレームワークはVue.jsです。スライダーやページの動きはこちらで実装し、一部ページ(newsや制作実績、お問い合わせページ)ではSPAっぽいもので構成しています。1点、起こった問題として、s3静的サイトホスティングではmod_rewriteのようにURLの書き換えができない点がありました。リダイレクトは可能なのですがリライトはできないのですね・・・。s3での運用に際し、この点はURLが少し不格好となってしまいますがクエリストリングで対応するようにしました。デザイン昨年、弊社に入社されたデザイナーの河野さんが全て取り仕切って行ってくれました。スマフォでいかに見やすいか、という点を注意してデザインいただけました。TOPにて背景動画を流したり、遊び心のあるイラスト(河野さんの自作!)など、素敵なデザインになったと思います。イラストの一部にシーズ社員数名が紛れ込んでいるので、是非探してみてください。終わりに今回の構成では今後できるだけ手間をかけない、可能な限り今後の運用が低コストとなるよう考えて制作しました。規模に対して過剰な設備であったり、本来注視すべきコンテンツ以上にこれらの対応で時間が取られる事もしばしばあります。いう観点は通常のシステム開発でもとても重要なものであると改めて思いました。Composeプロジェクトをインテグレーション...はじめまして。構築され...2019-09-26slackに学ぶ、デザインシステムを作る重要性こんにちは。デザイナーの河野です。.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。