DigitalOceanでヘッドレスHashnodeを使い始める

導入

Hashnodeは、技術愛好家のエンゲージメントを高めるために設計された、無料で利用できるコンテンツ公開プラットフォーム兼開発者コミュニティです。ユーザーがブログ記事を作成・共有し、様々な技術分野でコミュニティを構築するためのスペースを提供します。HashNodeは、開発者フレンドリーでSEOに最適化された技術ブログの作成と管理を簡素化することを目指しており、カスタムドメイン、組み込みエディター、GitHubなどの一般的なバージョン管理システムとのシームレスな統合などの機能を提供しています。最新製品であるHeadless Hashnodeでは、Hashnodeの革新的なGraphQL APIを使用してブログをゼロから構築できます。ブログはゼロから構築することも、Next.jsスターターキットを使用することもできます。.

このチュートリアルでは、DigitalOcean Droplets に Hashnode ヘッドレスをセットアップします。.

HeadLess HashNode の紹介

ヘッドレスコンテンツ管理システム（CMS）は、コンテンツ管理層とプレゼンテーション層を分離したアーキテクチャです。従来のCMSでは、コンテンツの作成、保存、表示が1つのシステムで行われますが、ヘッドレスアーキテクチャでは、コンテンツの保存と表示を個別に処理できるため、デザイナーや開発者はブログが消費者にどのように見えるかを自由に試すことができます。.

Headless Hashnode は、ユーザーが個人または企業のブログを構築できるように設計された専用の CMS です。ホスティング中にコンテンツや分析の追跡を気にすることなく、Hashnode の WYSIWYG エディター、AI、SEO 最適化ツールを使用してドメインを自由に操作できます。.

始める

前提条件:

1. DigitalOceanのアカウント
2. Hashnode のアカウント。.

 DigitalOcean Dropletsの使用

DigitalOcean Droplet は、1 分以内に簡単に導入できるシンプルでスケーラブルかつ信頼性の高い仮想マシンです。.

まず、DigitalOceanのコントロールパネルにアクセスし、ページ右上にある緑色の「作成」ボタンをクリックします。ドロップダウンメニューから「Droplets」を選択します。これが最初の選択肢になります。.

次のウィンドウでは、地域、画像とサイズ、その他の詳細について設定する必要があります。データセンターが既に選択されている場合でも、潜在的な読者に最も近い地域を選択することを強くお勧めします。.

次の「イメージ」というオプションで「マーケットプレイス」タブに移動し、「Ubuntu で NodeJS」を検索してください。DigitalOcean のマーケットプレイスには、「1-Click アプリ」と呼ばれる、すぐにデプロイできるツールとリソースのコレクションが用意されています。依存関係をすべて手動でダウンロードする代わりに、マーケットプレイスにアクセスして、構成済みのイメージと設定、そしてプロジェクトに必要なすべてのパッケージと依存関係が付属する 1-Click アプリを実行できます。画面は次のようになります。

次のウィンドウでは、ドロップレットのサイズを選択できます。今後投稿予定のブログの数を考慮し、ご自身または会社にとって最適なサイズをお選びください。この実装を本番環境で実行する場合は、理想的には少なくとも25GBのSSDハードドライブを使用することをお勧めします。より高速なパフォーマンスを求める場合は、Intel、AMDプロセッサ、NVMe SSDをサポートするプレミアムドロップレットをお勧めします。標準ドロップレットと同様に、ニーズに合わせてプレミアムドロップレットを選択できます。.

完了したら、認証方法を選択する必要があります。DropletにはSSHキーまたはパスワードでログインできます。このチュートリアルではパスワードを使用しますので、任意の文字列を追加してメモしておいてください。次のセクションでは、オプションの横にあるチェックボックスをオンにすることで、拡張メトリック監視とアラートを無料で追加できます。これで設定は完了です。Dropletにシンプルなホスト名を追加し、「Dropletを作成」をクリックする前に、すべての詳細を確認してください。.

Dropletのプロビジョニングには約1分かかります。完了したら、「Get Started」リンクをクリックして、Marketplaceアプリの概要と含まれる機能をご確認ください。.

ドロップレットの起動

Droplet を起動するには、着信接続を受け入れ、ローカル ターミナル内のアプリケーションにリダイレクトします。

ssh root@YOUR-DROPLET-IP

«「YOUR-DROPLET-IP」をコントロールパネルのDropletのIPアドレスに置き換えてください。プロンプトが表示されたらパスワードを入力してください。.

次のステップは、ドロップレット内のパッケージを更新およびアップグレードすることです。そのためには、次のコマンドを実行します。

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

ドロップレットに表示され、ポート 3000 を占有しているデフォルトのページを削除するには、次のコマンドを使用します。.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

変更が5分以内に反映されない場合は、Dropletの電源を一度切ってから再度入れ直す必要があるかもしれません。その場合は、ローカルターミナルでDropletにSSH接続し直す必要があります。次の手順では、Dropletに既にインストールされているNode.js、npm、Nginxを使用します。Nginxは、Next.jsアプリケーションへのルーティングをすべて処理するツールです。.

Nginxの設定

次のコマンドを使用して、新しい Nginx 構成ファイルを作成します。

sudo nano /etc/nginx/sites-available/hashnode

次の設定を貼り付けます。server_name を Droplet IP アドレスに置き換えます。

server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

完了したら、ファイルを保存して閉じます。次に、以下のコマンドを使用して設定を有効にするためのシンボリックリンクを作成します。

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

Nginx 設定の構文エラーをテストするには、次のコマンドを実行します。

sudo nginx -t

理想的な出力は次のようになります。

これで Nginx を再起動する準備が整いました。次のコマンドを使用して再起動できます。

sudo service nginx restart

ヘッドレスハッシュノードのインストール

右側のディレクトリに移動します:

cd /var/www

Headless Hashnode Github リポジトリをクローンします。

git clone https://github.com/hashnode/starter-kit

テンプレートを選択し、そのディレクトリに移動します。このチュートリアルでは、Personalテーマを使用します。

cd starter-kit/packages/blog-starter-kit/themes/personal

環境変数ファイルをコピーします。

cp .env.example .env.local

次に、環境変数ファイルを編集します。

nano .env.local

環境変数をHashnodeアカウントを指すように変更する必要があります。NEXT_PUBLIC_HASHNODE_PUBLICATION_HOSTをエンドポイントに、NEXT_PUBLIC_MODEをproductionに変更してください。ファイルは以下のようになります。

依存関係をインストールするには、次のコマンドを実行します。

pnpm install

画面は次のようになります。

準備が整ったら、以下のコマンドを実行してDropletにHeadless Hashnodeをデプロイできます。コンパイルには1分ほどかかるので注意してください。ターミナルは以下のようになっているはずです。

pnpm dev

コンパイルが完了したら、Droplet IP アドレスにアクセスして、Headless Hashnode サイトが稼働していることを確認できます。

これにより、Nginx が提供するリバース プロキシを使用して、DigitalOcean Droplet に Hashnode ヘッドレスをデプロイできました。

PM2プロセスマネージャーの設定

サーバーの再起動やアップデートのインストールなどにより、実行中のコマンドが停止することがあります。PM2ツールを使用して、アプリケーションが常に実行されていることを確認します。アプリケーションがクラッシュした場合でも、PM2は再起動します。.

Node.js MarketplaceイメージにはPM2がプリインストールされています。アプリケーションが常にPM2を使用して実行されるようにするには、以下の手順を実行してください。

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start

PM2が起動時に確実に起動するようにするには、以下のコマンドを実行してください。これにより、PM2を起動時に起動し、その設定を保存するスクリプトが作成されます。このスクリプトをターミナルにコピー＆ペーストすることで、PM2を起動時に起動できます。.

pm2 startup 
pm2 save

結果

ヘッドレスCMSツールはユーザーインターフェースのカスタマイズに最適で、Hashnodeは拡張性と柔軟性に優れたツールを提供します。ブログのセキュリティとSEOを向上させるには、Let's Encryptを使用したSSL証明書の設定とHTTPS接続の実装をご検討ください。独自のドメイン名を追加する場合は、DNS設定を忘れずに行ってください。ドメインのAレコードをDropletのIPアドレスに指定することで、ドメイン名を使用してアプリケーションにアクセスできるようになります。今すぐアカウントにご登録ください。DigitalOceanであなたのブログをご覧いただけるのを楽しみにしています！