GNU/Linux >> Linux の 問題 >  >> Panels >> Panels

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

Gatsbyは、React用の高速で最新のサイトジェネレーターです。これは、静的なWebサイトとアプリケーションを構築するためのReact、GraphQL、およびWebpackの機能を組み合わせたオープンソースフレームワークです。

Gatsbyは単なる静的サイトジェネレーターではありません。Web開発者はReactを使用してWebサイトを構築し、任意のデータソース(CMS、Markdownなど)を操作できます。このチュートリアルでは、Ubuntu20.04にGatsbyをインストールする方法を紹介します。

前提条件
  • Ubuntu 20.04 VPS
  • root権限でのSSHアクセス
ステップ1.サーバーにログインします

まず、rootユーザーとしてSSH経由でUbuntu20.04サーバーにログインします。

ssh root@IP_Address -p Port_number

「IP_Address」と「Port_number」をサーバーのそれぞれのIPアドレスとSSHポート番号に置き換える必要があります。

開始する前に、サーバーにインストールされているすべてのUbuntuOSパッケージが最新であることを確認する必要があります。これを行うには、次のコマンドを実行します。

# apt update -y
# apt upgrade -y

ステップ2.システムユーザーを作成する

次に、新しいシステムユーザーを作成し、それにsudo権限を付与します。このチュートリアルでは、「master」という新しいシステムユーザーを作成します。任意のユーザー名を選択できます。

# adduser master

作成したら、このコマンドを実行して、新しいユーザーをsudoグループに追加しましょう。 Ubuntuでは、sudoグループのメンバーであるユーザーはsudoコマンドを実行できます。

# usermod -aG sudo master

これで、新しいユーザー「マスター」としてログインでき、このユーザーを使用してインストールを完了します。

# su - master
ステップ3.NodeJSとNPMをインストールします

NodeJSとNPMの両方をインストールする方法はいくつかあります。この記事では、ノードソースを使用してそれらをインストールします。その他の方法については、NodeJSとNPMのインストール方法に関するブログ投稿を確認してください。

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

完了したら、上記の新しく追加されたソースからパッケージ情報をダウンロードする必要があります。

$ sudo apt update

次に、次のコマンドを実行して、NodeJSとNPMを最終的にインストールします。

$ sudo apt install nodejs

NodeJSとNPMが正常にインストールされました。次のコマンドを使用して、インストールされているバージョンを確認できます。

$ node -v; npm -v
ステップ4.Gatsby-CLIをインストールします

Gatsby CLIは、Gatsbyアプリケーションを起動して実行するための主要なエントリポイントです。グローバルに使用できる実行可能ファイルとしてパッケージ化されています。 npmを介してGatsbyCLIをインストールできます。

$ sudo npm install -g gatsby-cli

インストールされているGatsbyCLIのバージョンを確認するには、次のコマンドを実行します。

$ gatsby --version

それでは、新しいGatsbyWebサイトを作成しましょう。「gatsby_site」を置き換えることができます 」と任意の名前を付けます。

$ gatsby new gatsby_site

しばらく待つと、新しい「gatsby_site」ディレクトリが作成されます。

以下のコマンドを呼び出して、ギャツビーを開発して実行します。

$ cd gatsby_site
$ gatsby develop -H 0.0.0.0


http://YOUR_SERVER_IP_ADDRESS:8000でGatsbyサイトにアクセスできるはずです。 、停止する場合はCTRL+Cを押します。

それでは、ギャツビーのウェブサイトを構築しましょう:

$ gatsby build

gatsby build コマンドはGatsbyCLIの一部です。 gatsby build を実行します サイトを公開する準備ができたら、本番環境に対応したバージョンのサイトを作成するコマンド。 Gatsby WebサイトをGitHubにデプロイして、CI / CD(継続的インテグレーションと継続的デプロイ)パイプラインをセットアップすることもできます。

ステップ5.PM2をインストールします

Process Manager(PM2)を使用すると、アプリケーションを永久に存続させ、ダウンタイムなしでリロードし、一般的なシステム管理タスクを容易にすることができます。以下のコマンドを呼び出して、Ubuntu20.04にPM2をグローバルにインストールします。

$ sudo npm install pm2 -g

PM2をインストールした後、これらのコマンドを実行して、ポート8000​​でGatsbyWebサイトを起動できます。

$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
ステップ6.NGINXをインストールして構成する

Gatsbyのインストールが完了し、ポート番号8000のサーバーのパブリックIPでアクセスできるようになります。ただし、サーバーのIPアドレスを入力する代わりにドメイン名またはサブドメイン名を使用してGatsby Webサイトにアクセスする場合は、 URLのポート番号については、サーバーでリバースプロキシを構成する必要があります。

このステップでは、Nginxを使用してリバースプロキシ構成を実装する方法を示します。 Nginxは、カスタマイズとパフォーマンスに重点を置いた強力で高性能なWebサーバーです。

まず、次のコマンドを使用してNginxをインストールします。

$ sudo apt install nginx

Ubuntu 20.04では、Nginxはインストール時に実行を開始するように構成されています。次のコマンドを実行して確認できます:

$ sudo systemctl status nginx

インストールしたら、新しいNginxサーバーブロック構成ファイルを作成します。 yourdomain.comを置き換えます 実際のドメイン名またはサブドメイン名:

$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf

次のコンテンツをファイルに追加します:

server {

    listen 80;

    server_name yourdomain.com;
    location / {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
    location ~ /.well-known {
       allow all;
    }
}

CTRL + Oを押してファイルを保存します 次に、 CTRL + Xを押します nanoエディターを終了してから、Nginxを再起動します。

$ sudo systemctl restart nginx
ステップ7.SSL証明書をインストールする

これはオプションの手順ですが、完了することを強くお勧めします。 Let’sEncryptから無料のSSL証明書をインストールします。

$ sudo apt install python3-certbot-nginx -y

完了したら、このコマンドを実行してSSL証明書をインストールできます。

$ sudo certbot

メールアドレスを尋ねられ、Let’s Encrypt TOSに同意し、メールアドレスをElectronicFrontierFoundationと共有するかどうかを尋ねられます。次に、HTTPSをアクティブ化する名前を選択する必要があります。番号を入力してEnterキーを押して、GatsbyWebサイトを選択します。暗号化して証明書をインストールし、HTTPからHTTPSへのリダイレクトを構成するかどうかを尋ねられます。リダイレクトを選択すると、certbotがリダイレクトを作成し、問題がなければNginxをリロードします。

これで、https://yourdomain.comのHTTPSモードでGatsbyWebサイトにアクセスできるようになります。 、Gatsbyを使用してアプリケーションの構築を進めることができます。

もちろん、マネージドLinux VPSホスティングプランが私たちと一緒にホストされている場合は、Ubuntu20.04にGatsbyをインストールするために髪を引っ張る必要はありません。その場合は、サポートチームにUbuntu20.04にGatsbyをインストールするように依頼するだけです。これらは24時間年中無休で利用可能であり、Gatsbyのインストールや、追加の要件について支援することができます。

PS。 Ubuntu 20.04にGatsbyをインストールする方法に関するこのブログ投稿を読んで楽しんだ場合は、以下のショートカットを使用してソーシャルネットワークで共有するか、コメントセクションにコメントを残してください。ありがとうございます。


Panels
  1. Ubuntu18.04にISPConfig3をインストールする方法

  2. Ubuntu18.04にWebminをインストールする方法

  3. Ubuntu10.04にPanda3Dをインストールする方法

  1. UbuntuにZabbixをインストールする方法

  2. Ubuntu14.04にObserviumをインストールする方法

  3. Ubuntu14.04にATutorをインストールする方法

  1. Ubuntu16.04にTraqをインストールする方法

  2. Ubuntu16.04にPipをインストールする方法

  3. Ubuntu16.04にRをインストールする方法