Ubuntu20.04にGatsbyをインストールする方法

Ubuntu20.04にGatsbyをインストールする方法

この記事では、Ubuntu20.04にGatsbyをインストールする方法について説明します。

Gatsbyは、ウェブサイトやアプリを作成するためのReactベースのオープンソースフレームワークです。ポートフォリオサイトやブログを構築している場合でも、トラフィックの多いeコマースストアや企業のホームページを構築している場合でも、それは素晴らしいことです。非常に高速なウェブサイトやアプリを作成し、2000以上のプラグインのパワーを活用します。ギャツビーの2000以上のプラグインを使用して、Shopify、Stripe、WordPressなどの必要なサービスでサイトをすばやく簡単に構築できます。API、データベース、CMS、静的ファイル、または複数のソースを一度に統合します

この記事では、インストールプロセスとデフォルトのスターターGatsbyサイトの展開について説明します。

前提条件

  • Ubuntu20.04にインストールされた専用サーバーまたはKVMVPS。
  • rootユーザーまたはsudo管理者権限を持つ通常のユーザー。

Ubuntu20.04にGatsbyをインストールします

ステップ1-サーバーを最新の状態に保つ

# apt update -y && apt upgrade -y

ステップ2-NodeJSとNPMをインストールする

NodeJSの最新の安定したリリースをインストールします。

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

インストールが成功したことを確認します。

# node -v && npm -v

出力:

v15.9.0
7.5.4

ステップ3-gatsby-cliをインストールする

Gatsby CLI(gatsby-cli)は、グローバルに使用できる実行可能ファイルとしてパッケージ化されています。GatsbyCLIはnpmから利用できます。次のコマンドを実行してgatsby-cliをインストールします。

# npm install -g gatsby-cli

インストールを確認します。

# gatsby --version

出力:

# Gatsby CLI version: 2.19.1

ステップ4-新しいサイトを展開する

新しいGatsbyサイトを生成するには、次のコマンドを実行します。

# gatsby new

出力:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
· My Gatsby Site

CLIは、Gatsbyサイトを作成する前に、これらのオプションを要求するインタラクティブシェルを実行します。あなたのウェブサイトの要件に従って選択し、記入してください。/ rootにGatsbyサイトとディレクトリを作成します。

https://www.gatsbyjs.com/docs/gatsby-cli/ですべてのコマンドを参照してください

スターターからサイトを作成する

デフォルトのスターターを使用してmy-awesome- siteという名前のGatsbyサイトを作成するには、次のコマンドを実行します。

# gatsby new my-awesome-site

上記のコマンドは、/ rootにmy-awesome-siteディレクトリを作成します。

詳細については、Gatsbyスタータードキュメントを参照してください。

発展

Gatsbyサイトをインストールしたら、プロジェクトのルートディレクトリに移動し、次のコマンドを使用して開発サーバーを起動します。

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

オプション:

  • -H、-hostホストを設定します。デフォルトはlocalhost
  • -p、-portポートを設定します。デフォルトはenv.PORTまたは8000です
  • -o、-open(デフォルトの)ブラウザでサイトを開きます
  • -S、-httpsHTTPSを使用

これで、ブラウザでmy-awesome-siteを表示できます。

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

Ubuntu20.04にGatsbyをインストールする方法

建てる

Gatsbyサイトのルートで、アプリケーションをコンパイルし、デプロイの準備をします。

# gatsby build

オプション

  • --prefix-pathsリンクパスのプレフィックスが付いたサイトを構築します(設定でpathPrefixを設定します)
  • --no-uglify JSバンドルを醜くせずにビルドサイト(デバッグ用)
  • --profile反応プロファイリングを使用してサイトを構築します。ReactProfilerを使用したサイトパフォーマンスのプロファイリングを参照してください
  • --open-tracing-config-fileトレーサー構成ファイル(OpenTracing互換)。パフォーマンストレースを参照してください
  • --graphql-トレーストレース(上記を参照)すべてのgraphqlリゾルバーは、パフォーマンスに影響を与える可能性があります。
  • --no-color、-no-colorsカラー端末出力を無効にします

それでおしまい。インストールは正常に完了しました。