如何在Ubuntu20.04上使用Nginx部署React应用程序
作为 Write for DOnations 计划的一部分，作者选择了 Creative Commons 来接受捐赠。
介绍
您可以使用默认的 Create React App 构建工具将 React 应用程序快速部署到服务器。 build 脚本将应用程序编译到一个包含所有 JavaScript 代码、图像、样式和 HTML 文件的目录中。 通过将资产放在一个位置，您可以以最少的配置部署到 Web 服务器。
在本教程中，您将在本地计算机上将 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 和创建本地开发环境中的步骤或 的 使用 PPA 部分安装如何在 Ubuntu 20.04 上安装 Node.js。
- 一台用于部署的 Ubuntu 20.04 服务器，按照此 Ubuntu 20.04 初始服务器设置教程进行设置，包括启用 sudo 的非 root 用户、防火墙和来自您的 SSH 访问本地机器。 要在 DigitalOcean Droplet 上获得 SSH 访问权限，请通读 如何使用 SSH 连接到 Droplet。
- 一个注册的域名。 本教程将自始至终使用
your_domain。 您可以从 Namecheap 购买一个域名，通过 Freenom 免费获得一个，或者使用您选择的域名注册商。 - 为您的服务器设置了以下两个 DNS 记录。 如果您使用的是 DigitalOcean，请参阅我们的 DNS 文档 了解如何添加它们的详细信息。
- 带有
your_domain的 A 记录指向您服务器的公共 IP 地址。 - 带有
www.your_domain的 A 记录指向您服务器的公共 IP 地址。
- 带有
- 按照 How To Install Nginx on Ubuntu 20.04 安装 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，您的版本可能会略有不同：
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 App build 脚本构建了生产版本。 在下一步中，您将登录到您的服务器以了解将 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 目录中的所有文件。 第二个参数是您的凭据和目标路径的组合。 目标路径将与 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 系列页面中编码 。
