Gatsbyは、React用の高速で最新のサイトジェネレーターです。これは、静的なWebサイトとアプリケーションを構築するためのReact、GraphQL、およびWebpackの機能を組み合わせたオープンソースフレームワークです。
Gatsbyは単なる静的サイトジェネレーターではありません。Web開発者はReactを使用してWebサイトを構築し、任意のデータソース(CMS、Markdownなど)を操作できます。このチュートリアルでは、Ubuntu20.04にGatsbyをインストールする方法を紹介します。
- Ubuntu 20.04 VPS
- root権限でのSSHアクセス
まず、rootユーザーとしてSSH経由でUbuntu20.04サーバーにログインします。
ssh root@IP_Address -p Port_number
「IP_Address」と「Port_number」をサーバーのそれぞれのIPアドレスとSSHポート番号に置き換える必要があります。
開始する前に、サーバーにインストールされているすべてのUbuntuOSパッケージが最新であることを確認する必要があります。これを行うには、次のコマンドを実行します。
# apt update -y # apt upgrade -y
次に、新しいシステムユーザーを作成し、それにsudo権限を付与します。このチュートリアルでは、「master」という新しいシステムユーザーを作成します。任意のユーザー名を選択できます。
# adduser master
作成したら、このコマンドを実行して、新しいユーザーをsudoグループに追加しましょう。 Ubuntuでは、sudoグループのメンバーであるユーザーはsudoコマンドを実行できます。
# usermod -aG sudo master
これで、新しいユーザー「マスター」としてログインでき、このユーザーを使用してインストールを完了します。
# su - master
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
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(継続的インテグレーションと継続的デプロイ)パイプラインをセットアップすることもできます。
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
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
これはオプションの手順ですが、完了することを強くお勧めします。 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をインストールする方法に関するこのブログ投稿を読んで楽しんだ場合は、以下のショートカットを使用してソーシャルネットワークで共有するか、コメントセクションにコメントを残してください。ありがとうございます。