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

投稿日: 2022-07-20 2022-10-17
タグ: deployment, javascript, React, ubuntu

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

序章

デフォルトのCreateReact App ビルドツールを使用して、Reactアプリケーションをサーバーにすばやくデプロイできます。 The 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ドキュメントを参照してください。
- とのAレコード your_domain サーバーのパブリックIPアドレスを指します。
- とのAレコード www.your_domain サーバーのパブリックIPアドレスを指します。
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

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

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

Output
Success! 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

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

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

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

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

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

ssh username@server_ip

サーバーにアクセスしたら、でWebサーバーの構成を探します。 /etc/nginx/sites-enabled. と呼ばれるディレクトリもあります 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 ファイルを正しい場所にコピーします。 The scp コマンドは、端末からリモートサーバーにファイルをコピーするための安全な方法です。コマンドはあなたを使用します ssh 構成されている場合はキー。それ以外の場合は、ユーザー名とパスワードの入力を求められます。

コマンド形式は次のようになります scp files_to_copy username@server_ip:path_on_server. 最初の引数は、コピーするファイルになります。この場合、あなたは内のすべてのファイルをコピーしています build ディレクトリ。 2番目の引数は、資格情報と宛先パスの組み合わせです。宛先パスは、 root Nginx構成で： /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シリーズのコーディング方法ページに戻ってください。

getdocs

13036

序章

前提条件

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

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

ステップ3—でビルドファイルをアップロードする scp

結論

getdocs

ステップ3—でビルドファイルをアップロードする `scp`