npm run start / build

起動につかうコマンドは、npm run start, npm run build がある

開発モード (ローカルサーバ用)

ビルド＋ローカルサーバ実行 (開発モード)

bash

npm run start

→ これだけでローカルサーバが起動し、ブラウザが開かれる

プロジェクト内のファイルが変更されると自動で更新される (ホットリロード)。

本番モード (配布用)

ビルド

bash

npm run build

→ build/ フォルダに deploy 用の html が生成される

ローカルサーバ起動 (本番モード)

bash

npm run serve

→ ローカルサーバが起動し、ブラウザが開かれる

ホットリロードは無し

何のためにあるのかというと、デプロイ前に動作確認したいとき用
(更新時刻表示、検索プラグイン、draft表示など、開発用/本番用で動作のことなる部分の確認)

配布

Web サーバには build/ フォルダの中身をまるっとあげれば良い

→ 自分は AWS S3 に上げるので、このようにシェルスクリプト化している

bash

cd build
aws s3 sync . $AWS_S3_PATH --delete --acl public-read
aws cloudfront create-invalidation --distribution-id $AWS_CF_DIST --paths '/*'

# invalidation の節約版 (画像が多いと料金が大変なことになるので対策したもの)
# aws cloudfront create-invalidation --distribution-id $AWS_CF_DIST --paths '/*.html' '/*/*.html' '/*/*/*.html'

他のホスティングサービス等でのやり方については、公式ドキュメントにいろいろ載ってる。

https://docusaurus.io/docs/deployment

Docusaurus 開発モードと本番モードの違いについて

ドキュメントのどこかには書いているかもしれないが、HTMLソースを見たのをきっかけに気がついた。
SPA か SSG か、という違いあるようだ。

せっかくなので違いをまとめる。

表1. 本番モードと開発モードの違い

項目	開発モード	本番モード
コマンド	npm run start	npm run build
方式	SPA (Single Page Application)	SSG (Static Site Generation)
HTMLどう出るか	ソースで見ても中身はほぼカラ(JSで生成するから)	各ページ毎に静的HTMLが生成される
画面遷移どうしてるか	JavaScriptで仮想ページ遷移(DOM差替)	ページ毎にHTML読み直し
ページ毎にリロードされるか	されない	される
採用される理由	ホットリロードで開発効率に良い	SEO的に良い (クローラが処理しやすい)

レイヤが違うことを並べて書いているような気もしてきたので、別視点で書くと、こう。

• npm run start 時は CSR 開発モードの SPA（擬似SSRあり） ← Client Side で Rendering してる
• npm run build時は SSG による静的SPA 出力（本番環境向け） ← Server Side で Generation してる

あまり厳密に書いてもよく分からなくなってくるので、表のように捉えておくのも良いのかもしれない。

表2. アーキテクチャとしての使い分け (SPA vs SSG)

アーキテクチャ	向いているケース
SPA (Single Page Application)	アクセス後の画面操作が中心のUIアプリケーション
SSG (Static Site Generation)	検索流入からのアクセスが中心で、ページ単位で読まれる構造のコンテンツサイト

・・という意味で、以下の点で理にかなっているということ

• 開発モードは開きっぱなし操作を想定
• 本番モードは検索流入を想定