Ubuntu20.04にNginxを使用してReactアプリケーションをデプロイする方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

デフォルトのCreateReact App ビルドツールを使用して、Reactアプリケーションをサーバーにすばやくデプロイできます。 buildスクリプトは、すべての JavaScript コード、画像、スタイル、およびHTMLファイルを含む単一のディレクトリにアプリケーションをコンパイルします。 アセットを1つの場所に配置することで、最小限の構成でWebサーバーにデプロイできます。

このチュートリアルでは、ローカルマシン上のReactアプリケーションをNginxを実行しているUbuntu20.04サーバーにデプロイします。 Create React Appを使用してアプリケーションをビルドし、Nginx構成ファイルを使用してファイルをデプロイする場所を決定し、ビルドディレクトリとその内容をサーバーに安全にコピーします。 このチュートリアルを終了するまでに、Reactアプリケーションをビルドしてデプロイできるようになります。

前提条件

• ローカルマシンでは、Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu20.04にNode.jsをインストールする方法。
• 展開用の1つのUbuntu20.04サーバー。このUbuntu20.04 チュートリアルの初期サーバー設定に従って設定します。これには、sudo対応の非 root ユーザー、ファイアウォール、およびローカルマシン。 DigitalOcean Droplet でSSHアクセスを取得するには、SSHを使用してDropletに接続する方法をお読みください。
• 登録されたドメイン名。 このチュートリアルでは、全体を通してyour_domainを使用します。 Namecheap からドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。
• 次の両方のDNSレコードがサーバー用に設定されています。 DigitalOceanを使用している場合、それらを追加する方法の詳細については、DNSドキュメントを参照してください。
  • サーバーのパブリックIPアドレスを指すyour_domainのAレコード。
  • サーバーのパブリックIPアドレスを指すwww.your_domainのAレコード。
• Ubuntu20.04にNginxをインストールする方法に従ってインストールされたNginx。 ドメインにサーバーブロックがあることを確認してください。 このチュートリアルでは、例として/etc/nginx/sites-available/your_domainを使用します。
• HTTPS証明書を使用してサーバーも保護することをお勧めします。 これは、 Ubuntu20.04チュートリアルでLet'sEncryptを使用してNginxを保護する方法を使用して行うことができます。
• また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、HTMLシリーズを使用してWebサイトを構築する方法、CSSシリーズを使用してWebサイトを構築する方法にあります。 、およびJavaScriptでコーディングする方法。

ステップ1—Reactプロジェクトを作成する

このステップでは、Create React Appを使用してアプリケーションを作成し、ボイラープレートアプリのデプロイ可能なバージョンを構築します。

まず、ローカル環境でCreateReactAppを使用して新しいアプリケーションを作成します。 ターミナルで、コマンドを実行してアプリケーションをビルドします。 このチュートリアルでは、プロジェクトはreact-deployと呼ばれます。

npx create-react-app react-deploy

npxコマンドは、Nodeパッケージをマシンにダウンロードせずに実行します。 create-react-appスクリプトは、Reactアプリに必要なすべての依存関係をインストールし、react-deployディレクトリにベースプロジェクトをビルドします。 Create React Appの詳細については、チュートリアル Create ReactAppを使用してReactプロジェクトをセットアップする方法を確認してください。

依存関係をダウンロードしてインストールするときに、コードは数分間実行されます。 完了すると、成功メッセージが表示されます。 npmの代わりにyarnを使用すると、バージョンが若干異なる場合があります。

OutputSuccess! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-deploy
  npm start

Happy hacking!

出力の提案に従って、最初にプロジェクトフォルダーに移動します。

cd react-deploy

基本プロジェクトができたので、それをローカルで実行して、サーバー上でどのように表示されるかをテストします。 npm startスクリプトを使用してプロジェクトを実行します。

npm start

コマンドを実行すると、ローカルサーバー情報を含む出力が表示されます。

OutputCompiled successfully!

You can now view react-deploy in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

ブラウザを開き、 http：// localhost：3000に移動します。 ボイラープレートReactアプリにアクセスできるようになります。

ターミナルにCTRL+Cまたは⌘+Cと入力して、プロジェクトを停止します。

ブラウザで正常に実行されるプロジェクトができたので、本番ビルドを作成する必要があります。 次のコマンドを使用してcreate-react-appビルドスクリプトを実行します。

npm run build

このコマンドは、JavaScriptとアセットをbuildディレクトリにコンパイルします。 コマンドが終了すると、ビルドに関するデータを含む出力が表示されます。 ファイル名にはハッシュが含まれているため、出力はわずかに異なることに注意してください。

OutputCreating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB  build/static/js/2.82f639e7.chunk.js
  1.4 KB    build/static/js/3.9fbaa076.chunk.js
  1.17 KB   build/static/js/runtime-main.1caef30b.js
  593 B     build/static/js/main.e8c17c7d.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

buildディレクトリには、プロジェクトに必要なすべてのファイルのコンパイル済みバージョンと縮小バージョンが含まれるようになります。 この時点では、buildディレクトリの外部について心配する必要はありません。 あなたがする必要があるのは、ディレクトリをサーバーにデプロイすることだけです。

このステップでは、新しいReactアプリケーションを作成しました。 アプリケーションがローカルで実行されていることを確認し、Create React Appbuildスクリプトを使用して製品版をビルドしました。 次のステップでは、サーバーにログオンして、buildディレクトリをコピーする場所を学習します。

ステップ2—Ubuntuサーバー上のデプロイメントファイルの場所を決定する

このステップでは、Reactアプリケーションのサーバーへのデプロイを開始します。 ただし、ファイルをアップロードする前に、展開サーバー上の正しいファイルの場所を決定する必要があります。 このチュートリアルではNginxをWebサーバーとして使用しますが、アプローチはApacheと同じです。 主な違いは、構成ファイルが別のディレクトリにあることです。

Webサーバーがプロジェクトのルートとして使用するディレクトリを見つけるには、sshを使用してサーバーにログインします。

ssh username@server_ip

サーバーにアクセスしたら、/etc/nginx/sites-enabledでWebサーバーの構成を探します。 sites-allowedというディレクトリもあります。 このディレクトリには、必ずしもアクティブ化されていない構成が含まれています。 構成ファイルを見つけたら、次のコマンドを使用して端末に出力を表示します。

cat /etc/nginx/sites-enabled/your_domain

サイトにHTTPS証明書がない場合は、次のような結果が表示されます。

Outputserver {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}

Let's Encryptの前提条件に従って、Ubuntu 20.04サーバーを保護すると、次の出力が表示されます。

Outputserver {

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot




}

いずれの場合も、Reactアプリをデプロイするための最も重要なフィールドはrootです。 これは、HTTPリクエストを/var/www/your_domain/htmlディレクトリにポイントします。 つまり、ファイルをその場所にコピーします。 次の行では、Nginxがindex.htmlファイルを検索することがわかります。 ローカルのbuildディレクトリを見ると、メインのエントリポイントとして機能するindex.htmlファイルが表示されます。

Ubuntu 20.04サーバーからログオフし、ローカル開発環境に戻ります。

Nginxが提供するファイルの場所がわかったので、ビルドをアップロードできます。

ステップ3—scpを使用してビルドファイルをアップロードする

この時点で、buildファイルを使用する準備が整いました。 あなたがする必要があるのはそれらをサーバーにコピーすることだけです。 これを行う簡単な方法は、scpを使用してファイルを正しい場所にコピーすることです。 scpコマンドは、端末からリモートサーバーにファイルをコピーするための安全な方法です。 コマンドが構成されている場合、コマンドはsshキーを使用します。 それ以外の場合は、ユーザー名とパスワードの入力を求められます。

コマンド形式はscp files_to_copy username@server_ip:path_on_serverになります。 最初の引数は、コピーするファイルになります。 この場合、buildディレクトリ内のすべてのファイルをコピーしています。 2番目の引数は、資格情報と宛先パスの組み合わせです。 宛先パスは、Nginx構成のrootと同じになります： /var/www/your_domain/html。

*ワイルドカードを使用してすべてのbuildファイルを/var/www/your_domain/htmlにコピーします。

scp -r ./build/* username@server_ip:/var/www/your_domain/html

コマンドを実行すると、ファイルがアップロードされたことを示す出力が表示されます。 結果は少し異なります。

Outputasset-manifest.json                                                                                          100% 1092    22.0KB/s   00:00
favicon.ico                                                                                                  100% 3870    80.5KB/s   00:00
index.html                                                                                                   100% 3032    61.1KB/s   00:00
logo192.png                                                                                                  100% 5347    59.9KB/s   00:00
logo512.png                                                                                                  100% 9664    69.5KB/s   00:00
manifest.json                                                                                                100%  492    10.4KB/s   00:00
robots.txt                                                                                                   100%   67     1.0KB/s   00:00
main.ab7136cd.chunk.css                                                                                      100%  943    20.8KB/s   00:00
main.ab7136cd.chunk.css.map                                                                                  100% 1490    31.2KB/s   00:00
runtime-main.1caef30b.js.map                                                                                 100%   12KB  90.3KB/s   00:00
3.9fbaa076.chunk.js                                                                                          100% 3561    67.2KB/s   00:00
2.82f639e7.chunk.js.map                                                                                      100%  313KB 156.1KB/s   00:02
runtime-main.1caef30b.js                                                                                     100% 2372    45.8KB/s   00:00
main.e8c17c7d.chunk.js.map                                                                                   100% 2436    50.9KB/s   00:00
3.9fbaa076.chunk.js.map                                                                                      100% 7690   146.7KB/s   00:00
2.82f639e7.chunk.js                                                                                          100%  128KB 226.5KB/s   00:00
2.82f639e7.chunk.js.LICENSE.txt                                                                              100% 1043    21.6KB/s   00:00
main.e8c17c7d.chunk.js                                                                                       100% 1045    21.7KB/s   00:00
logo.103b5fa1.svg                                                                                            100% 2671    56.8KB/s   00:00

コマンドが完了すると、終了します。 Reactプロジェクトは、ブラウザーのみを必要とする静的ファイルで構築されているため、サーバー側の言語をさらに構成する必要はありません。 ブラウザを開き、ドメイン名に移動します。 そうすると、Reactプロジェクトが見つかります。

このステップでは、Reactアプリケーションをサーバーにデプロイしました。 サーバー上のルートWebディレクトリを識別する方法を学び、scpを使用してファイルをコピーしました。 ファイルのアップロードが完了すると、Webブラウザでプロジェクトを表示できるようになりました。

結論

Create React Appを使用する場合、Reactアプリケーションのデプロイは簡単なプロセスです。 buildコマンドを実行して、展開に必要なすべてのファイルのディレクトリを作成します。 ビルドを実行した後、ファイルをサーバー上の正しい場所にコピーし、アプリケーションをWebにライブでプッシュします。

Reactチュートリアルをもっと読みたい場合は、 Reactトピックページを確認するか、React.jsシリーズのコーディング方法ページに戻ってください。