笨蛋ovo

はじめに#

• Rin とは
  Cloudflare Pages + Workers + D1 + R2 の全家族を基にしたブログです
  言い換えれば：フロントエンドは純静的ページで、バックエンドはフロントエンドに記事と設定情報を取得するための API を提供し、すべてが Cloudflare 上で完結します

• なぜこれを選ぶべきか
  サーバー不要、登録不要、Cloudflare に解析されたドメインがあれば十分で、一定の使用量内では完全に無料です（小規模な個人ブログには十分すぎる）

どんな人に向いているか#

• サーバーを立てたくない、動的ブログを維持したくない人
• 軽量化を追求する人
• クラウドネイティブが好きな人
• すべてをタダで楽しみたい人

向いていないかもしれない人#

• 大規模なものを追求する人
• 両方を求める人
• すでに多くのブログ記事を移行する必要がある人
  現在、Rin は Wordpress からの一括インポートのみをサポートしており、他のブログのデータ移行はやや面倒かもしれません

注意#

現在、Rin はまだ始まったばかりで、機能や安定性がやや不十分ですので、デプロイ前に心の準備をしてください
使用中に問題が発生した場合は、まず Issues を確認して、誰かがすでに提起しているかどうかを見てください

Cloudflare は R2 機能を有効にするために支払い方法をバインドする必要があります。Paypal または銀行カードをバインドしてアクティブにできます （料カードも可能ですが、カードの確認はありません）

この記事で使用されている Rin は 公式バージョン であり、当サイトで使用されているのは 個人修正版 です。99% のコードは ChatGPT から来ており、実装方法はすべて答弁に依存していますので、 自分のバージョンを公式に提出することは考えていません。必要があれば自分でデプロイしてください
私の修正版を使用して問題が発生した場合は、公式リポジトリではなく、まず私に連絡してください。混乱を避けるためです

準備作業#

以下の内容を準備する必要があります

• GitHub アカウント
• Cloudflare アカウント、同時に自分のドメインを解析済み
• 頭と手、そして忍耐を持参

正式デプロイ#

まず、Rin プロジェクトのアドレスを開き、Fork ボタンをクリックします

Rin はフロントエンドとバックエンドが分離されたプロジェクトなので、フロントエンドとバックエンドをそれぞれデプロイする必要があります

フロントエンド#

Cloudflare コンソールを開き、サイドバーのWorkersとPagesに入り、作成をクリックします

Pagesタブに移動し、Gitに接続をクリックします

以前に Cloudflare Pages を使用したことがない場合、ここで認証を行う必要があります
認証後、Fork したリポジトリを選択し、下の設定を開始をクリックします

設定ページに入ったら、以下の内容を入力します

ビルドコマンド：bun b
ビルド出力ディレクトリ：client/dist

言及されていないプロジェクトはデフォルト値のままにします
入力後、環境変数（高度）を開き、以下の変数を追加します（余分な空白がないように注意）

NAME=Xeu # ニックネーム、左上に表示されます
DESCRIPTION=雑食動物 # 個人説明、左上のニックネームの下に表示されます
AVATAR=https://avatars.githubusercontent.com/u/36541432 # アバターアドレス、左上に表示されます
API_URL=https://rin.xeu.life # サーバーのドメイン、まずはデフォルト値を使用して効果を確認し、後でサーバーをデプロイした後に修正します
PAGE_SIZE=5 # デフォルトのページサイズ、推奨は5
SKIP_DEPENDENCY_INSTALL=true
UNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i

最後の 2 行の環境変数SKIP_DEPENDENCY_INSTALLとUNSTABLE_PRE_BUILDは変更せず、そのまま追加してください

保存してデプロイをクリックし、ビルドデプロイを待ちます。問題がなければ約 30 秒後にデプロイが完了します

Pages 管理ページに戻り、カスタムドメインに移動し、自分のフロントエンドドメインをバインドします

状態が有効に変わるのを待ち、ドメインを開くとフロントエンドページが表示されます

これで、あなたは半分の操作を完了しました
実際に複雑なのはバックエンドのデプロイです

バックエンド#

ここでは Cloudflare Workers で新しいプロジェクトを自分で作成する必要はなく、バックエンドは GitHub Actions でデプロイされるので、GitHub 側の設定を行うだけです

Cloudflare R2 バケットの設定#

新しいバケットを作成#

Cloudflare コンソールに入り、サイドバーのR2に移動し、新しいバケットを作成をクリックします

任意の名前を入力し、バケットを作成をクリックします
位置のヒントを提供は選択しなくてもよく、アジア太平洋地域を選ぶと若干の速度向上が得られるかもしれません（？

バケットの設定#

バケットに入り、設定をクリックし、S3 APIをコピーします

下の公開アクセスでドメインをバインドします

下のCORSポリシーでCORSポリシーを追加をクリックします
注：このステップは必ずしも必要ではありませんが、問題を避けるために事前にクロスオリジンを設定することをお勧めします
下のhttps://blog.obdo.ccを自分のフロントエンドドメインに置き換えます

[
  {
    "AllowedOrigins": [
      "https://blog.obdo.cc"
    ],
    "AllowedMethods": [
      "GET",
      "DELETE",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "Content-Type"
    ]
  }
]

概要に戻り、R2 APIトークンを管理をクリックします

APIトークンを作成を選択します

名前は適当に入力し、権限は管理者の読み書きを選択し、APIトークンを作成をクリックします

下のアクセスキーIDとシークレットアクセスキーを記録します
トークンを取得した人はアカウントの制御権を得るため、トークンを他人に送信したり公開したりしないでください

Cloudflare でアカウント ID と API トークンを取得#

Cloudflare コンソールに入り、任意のドメインに入って、下のアカウントIDを記録します

右上のマイプロフィールに入ります

サイドバーのAPIトークンに入り、トークンを作成をクリックします

一番下のカスタムトークンを編集の右側の使用を開始をクリックします

トークンにWorkers R2ストレージ D1 Workersスクリプトの編集権限を付与します
TTL は空白のままにして永久に有効にするか、期限が切れる前に再生成する必要がある時間を設定できます
以下の図のように設定し、続行して要約を表示をクリックします

トークンを作成をクリックします

生成されたトークンを記録して、後で使用します
トークンを取得した人はアカウントの制御権を得るため、トークンを他人に送信したり公開したりしないでください

GitHub OAuth を接続#

Rin のログインシステムは GitHub 認証を使用しているため、まず GitHub OAuth アプリを申請する必要があります

GitHub OAuth Appsに入り、New OAuth Appをクリックします
以下のパラメータに従って入力します
Homepage URLには上記のフロントエンドアドレスを入力します
Authorization callback URLにはhttps://<あなたのバックエンドアドレス>/user/github/callbackを入力します
ここでのバックエンドアドレスは、後で Cloudflare Workers にバインドする必要があるドメインです。ここではhttps://rin.obdo.cc/user/github/callbackを例にします

アプリケーションを登録をクリックします
次に、新しいクライアントシークレットを生成をクリックします。ここで二段階認証が必要になる場合があります
生成されたClient IDとClient secretを記録します

GitHub Actions を設定#

自分の Fork した GitHub リポジトリを開き、Settings、Secrets and variables、Actions、Variablesの順に移動します

以下の値を順にNew repository variablesをクリックして追加します

FRONTEND_URL=フロントエンドアドレス、上文でフロントエンドにバインドしたドメインを入力します、例： https://blog.obdo.cc
S3_BUCKET=R2バケット名、上文の例のrin-storageのように
S3_REGION=auto
S3_ENDPOINT=R2のS3 API、ドメインの後のパスを削除します、例： https://1234567890abcdef1234567890abcd.r2.cloudflarestorage.com
S3_ACCESS_HOST=R2の公開アクセスドメイン、上文の例の https://rin-storage.obdo.cc のように

追加後はこのようになります

次にSecretsに移動します

以下の値を順にNew repository secretをクリックして追加します
パスワードジェネレーター

CLOUDFLARE_ACCOUNT_ID=CloudflareのアカウントID
CLOUDFLARE_API_TOKEN=CloudflareのユーザーAPIトークンの値
RIN_GITHUB_CLIENT_ID=上文で生成されたGithub Client ID
RIN_GITHUB_CLIENT_SECRET=上文で生成されたGithub Client Secret
JWT_SECRET=暗号化用のキー、パスワードジェネレーターでランダムに生成できます
S3_ACCESS_KEY_ID=バケットAPIのアクセスキーID
S3_SECRET_ACCESS_KEY=バケットAPIのシークレットアクセスキー

追加後はこのようになります
Secretsなので値は表示されませんが、追加時には必ず正しく追加されていることを確認してください

自分の Fork したリポジトリの Actions 画面に入り、
初めて入るときはページ上にボタンが 1 つだけ表示されるので、クリックして Actions 機能を有効にします
Deployメニューに入り、Run workflowをクリックします

約 1 分ほど待ち、緑のチェックマークが表示されるのを待ちます
× が表示された場合は、環境変数の設定に誤りがないか確認してください

フロントエンドとバックエンドを接続#

まず、自分を祝福しましょう。あなたはフロントエンドとバックエンドのデプロイを完了しました。次に残るのは最後のステップ、フロントエンドとバックエンドを接続することです
Cloudflare コンソールに入り、サイドバーのWorkersとPagesに移動します
前のデプロイがすべて順調であれば、ここにrin-serverという名前の Worker が表示されるはずです
rin-serverの設定に入り、トリガーに移動します
カスタムドメインを追加をクリックし、自分のバックエンドドメインをバインドします
ルートを追加をクリックし、フロントエンドドメイン/sub/* フロントエンドドメイン/seo/*を順に追加します
以下の図のように

前に作成したフロントエンド Pages 設定に戻り、APL_URLをバックエンドドメインに変更します

デプロイページに入り、デプロイを再試行をクリックします

1〜2 分待ってデプロイが完了するのを待ちます
あなたのフロントエンドドメインを開き、右上のGitHubでログインをクリックします
最初にログインした人がサイトの管理者になります

これで、すべてが完了しました。おめでとうございます、あなたは Rin ブログを持つことができました 🎉

この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://blog.baka.plus/posts/tech/rin-blog-deployment-tutorial