ビルドとデプロイ
アプリケーションの開発が完了したら、次のステップはビルドとデプロイです。この章では、Svelte アプリケーションのビルドプロセスを理解し、静的サイトとしてまたは SPA（シングルページアプリケーション）としてデプロイする方法を学びます。
1. ビルドプロセスの理解
Svelte アプリケーションをビルドするとき、ソースコードは最適化され、ブラウザで実行可能な形式に変換されます。このプロセスには、不要なコードの削除（ツリーシェイキング）、コードの圧縮、そして必要に応じてトランスパイル（ES6 以上の JavaScript を ES5 に変換）が含まれます。
例: Svelte プロジェクトのビルド
Svelte プロジェクトで使用されるビルドツール（例えば Rollup や Webpack）には、通常、ビルドプロセスを管理するための設定ファイルが含まれています。プロジェクトのルートディレクトリで以下のコマンドを実行してビルドを開始します。
npm run build
このコマンドは、package.jsonに定義されたbuildスクリプトを実行し、アプリケーションのビルドプロセスを開始します。ビルドが完了すると、publicやdistディレクトリにビルドされたファイルが生成されます。
2. 静的サイトの生成と SPA のビルド
Svelte アプリケーションは、静的サイトとしても、SPA としてもデプロイできます。選択するデプロイ方法は、アプリケーションの要件とホスティング環境によって異なります。
静的サイトのデプロイ
静的サイトとしてデプロイする場合、ビルドプロセスは全てのページを事前に生成します。これにより、サーバーはリクエストごとに HTML ファイルを直接提供でき、高速なページロードが可能になります。
SPA のデプロイ
SPA としてデプロイする場合、ビルドプロセスはシングルページアプリケーションのための JavaScript バンドルを生成します。このアプローチでは、クライアントサイドでルーティングが処理され、動的なユーザーインタラクションが可能になります。
3. デプロイメント
デプロイは、ビルドされたアプリケーションを実際のユーザーがアクセスできるようにインターネット上に公開するプロセスです。Netlify、Vercel、GitHub Pages などのサービスを利用すると、デプロイプロセスを簡単に行うことができます。
例: Netlify を使用したデプロイ
- Netlify にログインし、「New site from Git」を選択します。
- ビルドするリポジトリを選択し、ビルドコマンド（
npm run build）とパブリッシュディレクトリ（例:dist）を設定します。 - 「Deploy site」ボタンをクリックしてデプロイを開始します。
Netlify は、GitHub、GitLab、Bitbucket のリポジトリと直接連携し、コードの変更があるたびに自動的にビルドとデプロイを行うことができます。