Ubuntu 22.04にGatsby.jsノードフレームワークをインストールする方法

Ubuntu 22.04にGatsby.jsノードフレームワークをインストールする方法

このページで

1. 前提条件
2. 新しいユーザーを設定する
3. nvm（ノードバージョンマネージャー）とNode.jsのインストール
4. Gatsby-CLIのインストール
5. Gatsbyjsで最初のサイトを作成する
6. 結論

GatsbyJSまたはGatsbyは、Reactを使用して驚異的に速く、現代的なアプリやウェブサイトを構築するための無料でオープンソースのフレームワークです。Gatsbyは、コアウェブバイタルやライトハウススコアなど、現代のウェブ技術に最適化されています。ReactJS、Webpack、JavaScript、CSSに基づいています。また、すべてのコンテンツを超高速でロードし、広範なライブラリやプラグインに対応しています。

GatsbyJSは開発プロセスをさらに高速化し、ウェブサイトやアプリケーションのためのスターターパックやテンプレートを提供します。GatsbyJSは、WordPress、Contentful、Drupal、Shopify、Strapi、Ghost、およびNetlifyCMSなどの複数のCMSバックエンドをサポートするヘッドレスCMS構築のためのフレームワークです。GatsbyJSは、動的にレンダリングされたサイトの制御とスケーラビリティを、ウェブサイトやアプリケーションを作成するための静的サイト生成の速度と組み合わせています。

このチュートリアルでは、Ubuntu 22.04マシンにGatsby.jsをインストールして設定する方法を学びます。

前提条件

• Ubuntu 22.04のマシン - デスクトップ版またはサーバー版を使用できます。
• ルートまたは管理者ユーザー。

新しいユーザーを設定する

最初に、Gatbs.jsプロジェクト/アプリケーションを実行するために使用される新しいLinuxユーザーをシステム上に作成します。このデモでは、'alice'という名前の新しいユーザーを作成します。

次のコマンドを実行して新しいユーザーaliceを作成します。

useradd -m -s /bin/bash alice

次に、以下のコマンドを使用してユーザーaliceのパスワードを設定してください。

passwd alice

ユーザー「alice」をグループ「sudo」に追加し、ユーザー「alice」が「sudo su」コマンドを実行してルート/管理者権限を取得できるようにします。

sudo usermod -aG sudo alice

今、以下のコマンドを使用してユーザーaliceとしてログインし、sudo suコマンドを実行してルート管理者権限を確認してください。

su - alice
sudo su

aliceのユーザーのパスワードを入力して、ENTERを押してください。"root@ubuntu-machine"のような新しいプロンプトが表示されたら、ルート権限を正常に取得したことになります。

終了コマンドを入力するか、Ctrl+dを押してルート権限から退出すると、ユーザーaliceとしての通常のプロンプトが表示されます。

nvm（ノードバージョンマネージャー）とNode.jsのインストール

Gatsby.jsはNode.jsで書かれたJavaScriptフレームワークであり、今からあなたのUbuntuシステムにNode.jsをインストールします。

UbuntuシステムにNode.jsをインストールする方法はいくつかあります。これには、公式APT Ubuntuリポジトリによって提供されるNode.jsを使用する方法、nodesourceのようなサードパーティリポジトリを使用する方法、そしてNVM（Node Version Manager）を使用する方法が含まれます。

この例では、NVM（Node Version Manager）を使用してNode.jsをインストールします。そして、これは最初の段階で作成したユーザーaliceの下にインストールされます。

Ubuntuリポジトリを更新し、次のコマンドを使ってcurlパッケージをシステムにインストールしてください。

sudo apt update
sudo apt install curl

今、curlコマンドを使ってNVMインストーラスクリプトをダウンロードして実行してください。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

すべてのプロセスが完了すると、以下のスクリーンショットのような出力メッセージが表示されます。ご覧の通り、インストーラーはNVMのソースコードをあなたのホームディレクトリにダウンロードし、~/.bashrcファイルにいくつかの設定を追加します。

次に、以下のコマンドを実行して~/.bashrcファイルをソースし、現在のbashシェルセッションを再読み込みします。また、これにより~/.bashrcの設定ファイルに新しい変更が適用され、現在のセッションからログアウトすることなくNVMをすぐに実行し、実行できるようになります。

source ~/.bashrc

次に、以下の nvm コマンドを実行して nvm （Node Version Manager）インストールを確認してください。

nvm --version
nvm --help

nvmコマンドのNVMバージョンとヘルプメッセージの出力が得られた場合、インストールは成功しており、Node.jsのインストールができる準備が整いました。

以下のnvmコマンドを実行して、Node.js v16をシステムにインストールしてください。このインストールはユーザーaliceの環境にのみ影響します。

nvm install 16

今、NVMがNode.js v16のバイナリファイルをダウンロードし、ユーザーaliceのために自動的にインストールを設定しているのがわかります。

すべてのプロセスが完了したら、下記のコマンドを実行してデフォルトのNode.jsバージョンを v16に設定してください。

nvm use 16

最後に、以下のコマンドを使用してNode.jsのバージョンとNPMのバージョンを確認できます。

node --version
npm --version

次のスクリーンショットにあるように、Node.js v16がユーザーaliceの下でUbuntuマシンにインストールされました。そして、NVM（Node Version Manager）を使ってNode.jsをインストールしました。

Gatsby-CLIのインストール

Gatsby-CLI は、Gatsby アプリケーションのためのコマンドスターターです。新しい Gatsby プロジェクトを開始および作成したり、Gatsby の開発サーバーを実行したり、デプロイメント用に Gatsby アプリケーションをビルドしたりするために使用できます。

Gatsby-CLIはnpmのNode.jsリポジトリからインストールできます。

以下のnpmコマンドを実行して、gatsby-cliをローカル環境にインストールしてください。

npm -g install gatsby-cli

インストールが完了したら、次のgatsbyコマンドを実行してバージョンを確認し、Gatsby-CLIのインストールを検証します。

gatsby --version

以下に、Gatsby CLI v4.15. がインストールされていることがわかります。

さらに、Gatsbyプロジェクトで匿名データ使用のテレメトリと報告を無効にするために、以下のコマンドを実行します。

gatsby telemetry --disable

Gatsbyjsで最初のサイトを作成する

この時点で、あなたはGatsby-CLIのインストールを完了しました。これからGatsbyを使用して最初のアプリケーション/プロジェクトを作成する準備が整いました。

以下のgatsbyコマンドを実行して、新しいGatsbyプロジェクトを作成します。

gatsby new

これから、あなたの Gatsby プロジェクトの設定についていくつか尋ねられます:

• 新しいGatsbyサイト/プロジェクトのタイトルを入力してください。この例は「テストGatsbyサイト」です。
• 新しいGatsbyプロジェクトのディレクトリ名を入力してください。この例では、ディレクトリは「test-site」にあります。
• 新しいGatsbyプロジェクトのプログラミング言語を選んでください。JavaScriptまたはTypeScriptのどちらかを選ぶことができます。この例ではJavaScriptを使用します。
• CMSバックエンドでは、「いいえ（または後で追加します）」オプションを選択できます。Gatsbyは、WordPress、Ghostなどの異なる種類のCMSバックエンドをサポートしています。
• インターフェーススタイリングシステムでは、フレームワークを好みに応じて選択できます。この例では、"Theme UI"を使用します。

そして、あなたの新しいGatsbyプロジェクトのための依存関係のインストールが始まります。

すべてのプロセスが完了すると、次のスクリーンショットのような出力が表示されます。また、Gatsbyプロジェクトのすべてのソースコードと設定が含まれる「test-site」という新しいディレクトリが作成されます。

今、作業ディレクトリを「test-site」に変更し、以下のコマンドを使用してgatsby開発サーバーを実行します。

cd test-site/
gatsby develop -H 192.168.10.15

オプション -H 192.168.10.15は、Gatsbyのローカル開発サーバーのバインドアドレスを指定します。また、Gatsbyプロジェクトのデフォルトポート8000を使用しています。

下のスクリーンショットでは、あなたのGatsbyプロジェクトの全過程を見ることができます。そして最後には、http://192.168.10.15:8000のアドレスでGatsbyプロジェクトにアクセスできるというメッセージが表示されます。

ウェブブラウザを開き、Gatsbyプロジェクトのアドレス（例：http://192.168.10.15:8000/）にアクセスします。

そして、これであなたのGatsbyプロジェクトのデフォルトのホームページを見ることができます。

結論

おめでとうございます！最新のUbuntu 22.04マシンにGatsbyを正常にインストールしました。また、NVM（Node Version Manager）を使用してNode.jsの設定とインストール方法を学びました。最後に、Gatsbyを使用して新しいプロジェクト/サイトを作成し、Gatsbyプロジェクトの開発サーバーを実行する方法も学びました。