株式会社アマテックのコーポレートサイトでの技術紹介について
株式会社アマテックのコーポレートサイトを技術的な観点から解説させて頂きます。
目次
技術スタック
Astro
Astroは、静的サイトジェネレーター（SSG）の一つで、ReactやVue.jsなどのフレームワークを使用して、高速でSEOに優れたウェブサイトを構築することができます。
Astroは、サーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）もサポートしており、柔軟な開発環境を提供します。
設計方針として、静的ファイルとしてホスティングすることを心がけています。
Astroは、MarkdownやMDXなどのマークアップ言語をサポートしており、コンテンツの管理が容易です。
Astroのアイランド（Islands）機能がフレームワークを選んだ一番のポイントです。
最大のメリットを活用することで、必要な部分だけをインタラクティブにし、パフォーマンスを最大化できることです。
ページ全体を静的に生成しつつ、必要な部分だけクライアント側で動的に動作させることができます。
Node.js
Node.jsは、JavaScriptをサーバーサイドで実行するためのランタイム環境です。
Node.jsを使用することで、JavaScriptをフロントエンドとバックエンドの両方で使用することができ、一貫性のある開発環境を提供します。
TypeScript
TypeScriptは、JavaScriptのスーパーセットで、静的型付けをサポートしています。
TypeScriptを使用することで、コードの可読性と保守性が向上し、開発効率が向上します。
Cloudflare
Cloudflareは、グローバルCDN（Content Delivery Network）サービスを提供しており、
サイトのパフォーマンスを向上させることができます。
Cloudflareを使用することで、サイトのセキュリティも向上させることができます。
Cloudflare Turnstileは、Web訪問者が人であるかどうかを確認することで、
実際のユーザーのWeb体験を遅延させることなく迷惑ボットをブロックできます
Github
Githubは、ソースコードのバージョン管理と共有をサポートするプラットフォームです。
Githubを使用することで、チームでの開発がスムーズに行えるようになります。
サイトの構成
フロントエンド
フロントエンドは、ユーザーが直接操作する部分です。
フロントエンドは、HTML、CSS、JavaScriptで構成されています。
フロントエンドは、ユーザーが入力した情報をバックエンドに送信します。
バックエンド
バックエンドは、ユーザーが直接操作しない部分です。
バックエンドは、Node.jsで構成されており、APIを提供しています。
APIは、フロントエンドから呼び出され、turnstileの認証を行います。
また、メールサーバーと連携して、メールを送信します。
データベース
データベースは、データを保存する部分です。
データベースは、このサイトでは使っておりません。
mdxファイルを使用して、データを保存しています。
Githubで管理することができます。
インフラ
インフラは、サイトを動かすための基盤です。
インフラは、CloudflareとVPS(Virtual Private Server)で構成されています。
サイトの運用
サイトの更新
ニュース・ブログの更新は、MDXファイルを編集することで行います。
サイトのバックアップ
Githubで管理することで、バックアップが自動的に行われます。
サイトのセキュリティ対策
Cloudflareのセキュリティ対策を利用しています。
サイトのパフォーマンス最適化
サイトのパフォーマンス最適化には、以下のようなことが含まれます。
画像の最適化
Astroを使うことで、WebPやAVIF形式に自動変換されます。
CSSの最適化
Astroを使うことで、HTMLへ埋め込むことができるため、インライン化することができます。
また、CSSの最適化を行うことで、CSSのファイルサイズを削減できます。
JavaScriptの最適化
Astroを使うことで、必要最低限のJavaScriptとすることができます。
ファイルの圧縮
Astroを使うことで、自動でファイルの圧縮が行われます。
CDNの利用
CDNは、Cloudflareを使っています。
HTML、CSS、JavaScript、画像、フォントなどのファイルを、世界中のデータセンターにキャッシュすることで、ユーザーからのアクセスを高速化することができます。
AstroとCloudflareを組み合わせることで、爆速なサイトを構築することができます。
参考文献とリンク
株式会社アマテック 公式サイト
※Tech ブログで記載されている内容です。