マークダウン形式のドキュメントサイトを超簡単に構築＆公開する(Docusaurus+Github+AWS Amplify)

# はじめに

Docusaurusでドキュメントサイトを構築し、AWS Amplify Gen2で公開したのでその備忘録です。
正直なところ **こんな記事を読まなくても超簡単にできちゃいます** (^^;

## Docusaurusって？

Meta社が開発しているオープンソースの静的サイトジェネレータです。
Reactベースのプロジェクトで、テーマも用意されている為、テーマをベースにしつつちょっとだけ手を加える、といったこともできます。

https://docusaurus.io/

過去にこちらの記事も書いていますのでよければどうぞ。

https://qiita.com/fabisuke/items/cd908b4438bc988d46cf

### AWS Amplifyって？

なんと表現していいいのかわかりませんが、インフラの構築からCI/CDまで全部丸っとやってくれます。

https://aws.amazon.com/jp/amplify/

VercelやCloudflareなどとよく比較されています。

今回上で挙げたような他サービスとの比較は行わず、普段AWSを利用していることもありAmplify一択でした。
またAmplifyを触ったことが無かったので触ってみたかった、というのもあります。

それでは早速構築していきます。

# 手順

## 1. ローカルでDocusaurusを構築する

前回記事の「やってみる」章を参照してくださいm(__)m

https://qiita.com/fabisuke/items/cd908b4438bc988d46cf#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

## 2. Githubにプッシュする

ここも特に特別なことはありません。
今回はOrganization内のprivateなリポジトリに格納しました。

※ Organizationに対してIPアドレス制限をかけている場合、AWS Amplifyからのアクセスを受け付けるためにIPアドレスをホワイトリストに指定する必要があります、、がしかし、AWS Amplifyでは静的IPが公開されていません。
なのでIPアドレス制限を利用されている場合には注意が必要です。

## 3. Amplifyでデプロイする

AWSマネジメントコンソールにアクセスし、Amplifyページを開きます。
早速デプロイできそうなボタンがあるのでクリックします。
（出荷っておもろいですね）

![スクリーンショット 2025-02-17 185139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/93280c8e-620b-4f4a-99be-dff37565403b.png)

次にGit プロバイダーをします。今回はGithubを利用します。
CodeCommitが選べるのが意外でした。[CodeCatalyst](https://aws.amazon.com/jp/codecatalyst/)との差別化ポイントは気になるところですね。

![スクリーンショット 2025-02-17 185346.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/92c284ba-2eb5-43cc-968c-89a145c0f2af.png)

Githubを選択して次へをクリックすると、リポジトリとブランチを選択することができます。
モノレポかどうかを選択することができます。
今回このリポジトリでは1つのアプリ（ドキュメントサイト）しか管理しないので、チェックはいれませんでした。

![スクリーンショット 2025-02-17 185939.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/143ece3e-6ca4-4949-8755-223cb12e3c6e.png)

次にビルドの設定を行います。


![スクリーンショット 2025-02-17 190245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/d3c0f43d-efa6-4881-9618-2a3a40c04b5d.png)


#### フロントエンドビルドコマンド

手順1でDocusaurusを構築しましたが、ビルドっぽいコマンドはどれか`package.json`を確認してみます。

![スクリーンショット 2025-02-17 191219.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/f9994f46-e564-4433-a9fd-ddba5c9ba231.png)

まあ`build`ですよね。なのでこれはデフォルトの`npm run build`で問題ありません。

#### 出力ディレクトリをビルド (原文ママ)

デフォルトは`dist`になってますが、`npm run build`の結果はREADNEによると下記画像の通り`build`に出力されるので、`build`と入力します。
（最初まんまと騙されました）
![スクリーンショット 2025-02-17 191530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/a6a561f8-90a6-4119-acad-3e6a701ce046.png)


#### 自分のサイトをパスワードで保護

公開はしたいものの完成するまで内容は見られたくないので、パスワードをかけます。
こいつを設定しておくと、アクセスした際にBasic認証っぽい入力欄が表示されるようになります。

![スクリーンショット 2025-02-17 190909.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/5dda1468-c01e-44af-92ce-6d8f184f6078.png)

ここまで出来たら次のページでこれまでの設定内容を確認し、
問題なければ「保存してデプロイ」をクリックします。
しばらく待つとURLが発行されました。

![スクリーンショット-2025-02-17-192736-02-17-2025_07_29_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/2248f8aa-2cae-4ddf-adb8-fbfb999363e9.png)

まだデプロイ中みたいですが・・・アクセスしてみます。
パスワード保護の設定をしていたので、ID/パスワードの入力を求められます。
入力してみると・・・

![スクリーンショット 2025-02-17 192801.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/c0a99a46-52fc-4796-b5d8-55e6882eee66.png)

こんな感じの画面が出ました。一応領域自体は作られているような状態ですかね。
しばらく待つとデプロイ済みになったのでリロードしてみます。

![スクリーンショット 2025-02-17 193248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356430/380c434b-14ae-4cd1-bb40-38a7c4e993a5.png)

無事にDocusaurusのページが表示されました。
他のページにもアクセスしてみましたが、ローカルで動かすのと遜色ないスピードでサクサクページ遷移できます。
流石静的サイト！（？）

# さいごに

Amplifyがどういう仕組みで動いているのか、というところには一旦触れずに、とにかく簡単にドキュメントサイトを作って公開するという体験をしてみました。
どうなってるのかわからないまま公開できてしまう怖さはありますが、知ってしまえば怖くありません。
きちんと知って使うことでとてもスピーディな開発を実現することができそうです。