如何在 Ubuntu 上使用 Nginx 部署 React 应用程序
介绍
您可以使用默认的 Create React App 构建工具快速将 React 应用程序部署到服务器。 build 脚本将应用程序编译到一个包含所有 JavaScript 代码、图像、样式和 HTML 文件的目录中。通过将资产放在单个位置，您可以使用最少的配置部署到 Web 服务器。
在本教程中，您将在本地计算机上将 React 应用程序部署到运行 Nginx 的 Ubuntu 服务器。您将使用 Create React App 构建一个应用程序，使用 Nginx 配置文件来确定部署文件的位置，并将构建目录及其内容安全地复制到服务器。在本教程结束时，您将能够构建和部署 React 应用程序。
先决条件
如果您使用的是 Ubuntu 16.04 或更低版本，我们建议您升级到更新版本，因为 Ubuntu 不再提供对这些版本的支持。这本指南集将帮助您升级 Ubuntu 版本。
要学习本教程，您将需要：
运行 Ubuntu 的服务器，以及具有 sudo 权限的非 root 用户和活动防火墙。有关如何设置这些的指南，请从此列表中选择您的发行版并遵循我们的初始服务器设置指南。要获得 DigitalOcean Droplet 上的 SSH 访问权限，请阅读如何使用 SSH 连接到 Droplet。
在本地计算机上，您将需要一个运行 Node.js 的开发环境。要在 macOS 或 Ubuntu 上安装此程序，请按照如何在 Ubuntu 22.04/20.04/18.04 上安装 Node.js 的教程进行操作。
按照 Ubuntu 22.04/20.04/18.04 的本指南安装 Nginx。确保您的域有一个服务器块。本教程将使用
/etc/nginx/sites-available/your_domain作为示例。建议您还使用 HTTPS 证书来保护您的服务器。您可以通过如何在 Ubuntu 22.04/20.04/18.04 上使用 Let's Encrypt 保护 Nginx 教程来完成此操作。
已注册的域名或服务器IP。
如果您使用域名，则需要为您的服务器设置这两个 DNS 记录。如果您使用的是 DigitalOcean，请参阅我们的 DNS 文档以了解有关如何添加它们的详细信息。
- 一条 A 记录，其中
your_domain指向您服务器的公共 IP 地址。
- 一条 A 记录，其中
- 一条 A 记录，其中
www.your_domain指向您服务器的公共 IP 地址。
您还需要 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS 构建网站系列以及如何使用 JavaScript 编码中找到这些知识。
如何使用 Nginx 部署 React 应用程序
- 创建一个反应项目
- 在 Ubuntu 服务器上找到部署文件
- 上传构建文件
第 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，您的版本可能会略有不同：
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
当命令运行时，您将收到包含本地服务器信息的输出：
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 应用程序：
通过在终端中输入 CTRL+C 或 ⌘+C 来停止项目。
现在您已经有了一个在浏览器中成功运行的项目，您需要创建一个生产版本。使用以下命令运行 create-react-app 构建脚本：
npm run build
此命令会将 JavaScript 和资产编译到 build 目录中。命令完成后，您将收到一些输出，其中包含有关构建的数据。请注意，文件名包含哈希值，因此您的输出会略有不同：
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 App build 脚本构建了生产版本。在下一步中，您将登录服务器以了解将 build 目录复制到哪里。
步骤 2 — 确定 Ubuntu 服务器上的部署文件位置
在此步骤中，您将开始将 React 应用程序部署到服务器。但在上传文件之前，您需要确定部署服务器上的正确文件位置。本教程使用 Nginx 作为 Web 服务器，但方法与 Apache (Ubuntu 22.04/Ubuntu 20.04/Ubuntu 18.04) 相同。主要区别在于配置文件位于不同的目录中。
要查找 Web 服务器将用作项目根目录的目录，请使用 ssh 登录到您的服务器：
ssh username@server_ip
进入服务器后，在 /etc/nginx/sites-enabled 中查找您的 Web 服务器配置。还有一个名为 sites-allowed 的目录；该目录包含不一定激活的配置。找到配置文件后，使用以下命令在终端中显示输出：
cat /etc/nginx/sites-enabled/your_domain
如果您的网站没有 HTTPS 证书，您将收到类似以下的结果：
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 服务器，您将收到以下输出：
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 请求指向 /var/www/your_domain/html 目录。这意味着您将把文件复制到该位置。在下一行中，您可以看到 Nginx 将查找 index.html 文件。如果您查看本地 build 目录，您将看到一个 index.html 文件，它将作为主入口点。
注销Ubuntu服务器并返回本地开发环境。
现在您知道了 Nginx 将提供服务的文件位置，您可以上传您的构建。
第 3 步 — 使用 ** **scp 上传构建文件
此时，您的构建文件已准备就绪。您需要做的就是将它们复制到服务器。执行此操作的快速方法是使用 scp 将文件复制到正确的位置。 scp 命令是一种从终端将文件复制到远程服务器的安全方法。该命令使用您的 ssh 密钥（如果已配置）。否则，系统将提示您输入用户名和密码。
命令格式为 scp files_to_copy 用户名@server_ip:path_on_server。第一个参数是您要复制的文件。在本例中，您将复制 build 目录中的所有文件。第二个参数是您的凭据和目标路径的组合。目标路径将与 Nginx 配置中的 root 相同：/var/www/your_domain/html。
使用 * 通配符将所有 build 文件复制到 /var/www/your_domain/html：
scp -r ./build/* username@server_ip:/var/www/your_domain/html
运行该命令时，您将收到显示文件已上传的输出。您的结果会略有不同：
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 应用程序部署到服务器。您了解了如何识别服务器上的根 Web 目录，并使用 scp 复制了文件。文件上传完成后，您可以在网络浏览器中查看您的项目。
结论
当您使用 Create React App 时，部署 React 应用程序是一个快速的过程。您运行 build 命令来创建部署所需的所有文件的目录。运行构建后，您将文件复制到服务器上的正确位置，将应用程序实时推送到网络上。
如果您想阅读更多 React 教程，请查看我们的 React 主题页面，或返回如何在 React.js 中编码系列页面。
作者选择知识共享来接收捐赠，作为Write for DOnations计划的一部分。