如何在 Ubuntu 20.04 上使用 Nginx 部署 React 应用程序

笔记首页 >> 教程系列 >> 如何在 Ubuntu 20.04 上使用 Nginx 部署 React 应用程序

如何在 Ubuntu 20.04 上使用 Nginx 部署 React 应用程序

作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。

介绍

您可以使用默认的Create React App构建工具将React应用程序快速部署到服务器。该脚本将应用程序编译到一个包含所有JavaScript代码、图像、样式和HTML文件的目录中。将资产放在一个位置，您可以以最少的配置部署到 Web 服务器。build

在本教程中，您将在本地机器上部署一个 React 应用程序到运行Nginx的Ubuntu 20.04服务器。您将使用 Create React App 构建应用程序，使用 Nginx 配置文件来确定部署文件的位置，并将构建目录及其内容安全地复制到服务器。在本教程结束时，您将能够构建和部署 React 应用程序。

先决条件

在你的本地机器上，你需要一个运行Node.js的开发环境；本教程在 Node.js 版本 10.22.0 和 npm 版本 6.14.6 上进行了测试。要在 macOS 或 Ubuntu 20.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 20.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。
一个用于部署的 Ubuntu 20.04 服务器，按照Ubuntu 20.04教程的初始服务器设置进行设置，包括启用 sudo 的非root用户、防火墙和本地计算机的 SSH 访问。要在DigitalOcean Droplet上获得 SSH 访问权限，请阅读如何使用 SSH 连接到 Droplet。
一个注册的域名。本教程将your_domain贯穿始终。你可以购买一个域名Namecheap，免费获得一个与Freenom，或使用你选择的域名注册商。
为您的服务器设置的以下两个 DNS 记录。如果您使用的是 DigitalOcean，请参阅我们的DNS 文档以了解有关如何添加它们的详细信息。
- your_domain指向您服务器的公共 IP 地址的 A 记录。
- 指向您服务器的公共 IP 地址的 A 记录。www.your_domain
按照如何在 Ubuntu 20.04 上安装 Nginx 安装 Nginx。确保您的域有一个服务器块。本教程将用作示例。/etc/nginx/sites-available/your_domain
建议您还使用 HTTPS 证书保护您的服务器。您可以使用如何在 Ubuntu 20.04 上使用 Let’s Encrypt 来保护 Nginx教程来完成此操作。
您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 系列构建网站、如何使用 CSS 系列构建网站和如何使用 JavaScript 编码中找到这些知识。

第 1 步——创建一个 React 项目

在此步骤中，您将使用 Create React App 创建一个应用程序并构建样板应用程序的可部署版本。

首先，在本地环境中使用 Create React App 创建一个新应用程序。在终端中，运行命令以构建应用程序。在本教程中，该项目将被称为react-deploy：

npx create-react-app react-deploy

该npx命令将运行Node包，而无需将其下载到您的机器上。该create-react-app脚本将安装您的 React 应用程序所需的所有依赖项，并将在该react-deploy目录中构建一个基础项目。有关 Create React App 的更多信息，请查看教程如何使用 Create React App 设置 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

当命令运行时，您将收到带有本地服务器信息的输出：

Output
Compiled 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 应用程序：

在本地运行的 React 项目模板

通过在终端中输入CTRL+C或⌘+C来停止项目。

现在您有一个在浏览器中成功运行的项目，您需要创建一个生产版本。create-react-app使用以下命令运行构建脚本：

npm run build

此命令会将 JavaScript 和资产编译到build目录中。命令完成后，您将收到一些输出，其中包含有关您的构建的数据。请注意，文件名包含一个哈希值，因此您的输出将略有不同：

Output
Creating 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. 还有一个目录叫做sites-allowed; 此目录包含不一定激活的配置。找到配置文件后，使用以下命令在终端中显示输出：

cat /etc/nginx/sites-enabled/your_domain

如果您的站点没有 HTTPS 证书，您将收到类似以下的结果：

Output
server {
        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 服务器，您将收到以下输出：

Output
server {

        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 请求指向目录。这意味着您会将文件复制到该位置。在下一行中，您可以看到 Nginx 将查找文件。如果您查看本地目录，您将看到一个文件，该文件将用作主要入口点。/var/www/your_domain/htmlindex.htmlbuildindex.html

注销 Ubuntu 20.04 服务器并返回到您的本地开发环境。

现在您知道 Nginx 将提供的文件位置，您可以上传您的构建。

第 3 步 – 上传构建文件 `scp`

此时，您的build文件已准备就绪。您需要做的就是将它们复制到服务器。一种快速的方法是使用scp将您的文件复制到正确的位置。该scp命令是一种从终端将文件复制到远程服务器的安全方式。ssh如果已配置，该命令将使用您的密钥。否则，系统将提示您输入用户名和密码。

命令格式将为. 第一个参数将是您要复制的文件。在这种情况下，您将复制目录中的所有文件。第二个参数是您的凭据和目标路径的组合。目标路径将与您的 Nginx 配置中的相同：。scp files_to_copy username@server_ip:path_on_serverbuildroot/var/www/your_domain/html

build使用*通配符将所有文件复制到：/var/www/your_domain/html

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

运行该命令时，您将收到显示文件已上传的输出。您的结果会略有不同：

Output
asset-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 项目的浏览器

在此步骤中，您将 React 应用程序部署到服务器。您学习了如何识别服务器上的根 Web 目录，并使用scp. 文件上传完成后，您可以在 Web 浏览器中查看您的项目。

结论

当您使用 Create React App 时，部署 React 应用程序是一个快速的过程。您运行该build命令以创建一个包含部署所需的所有文件的目录。运行构建后，您将文件复制到服务器上的正确位置，将您的应用程序实时推送到 Web。

如果您想阅读更多 React 教程，请查看我们的React 主题页面，或返回“如何在 React.js 中编码”系列页面。

觉得文章有用？

点个广告表达一下你的爱意吧！