在公网 IP 部署 React 应用：Linux 虚拟机详解
2024-03-04 23:22:09
在公共 IP 上公开 React 应用程序：使用 Linux 虚拟机的逐步指南
作为开发人员，我们经常需要将应用程序公开到互联网，以供外部用户访问。对于 React 应用程序，我们可以通过将它们部署在公共 IP 上来实现这一点。这使我们可以通过互联网使用我们的应用程序的域名或 IP 地址对其进行访问。
在本文中，我们将探讨如何使用 Linux 虚拟机在公共 IP 上公开 React 应用程序。我们将涵盖设置、配置和部署应用程序的逐步指南，以及故障排除提示和最佳实践。
步骤 1：设置 Linux 虚拟机
我们将使用 Ubuntu 20.04 作为我们的操作系统。安装过程相对简单，可以从 Ubuntu 官方网站上找到。安装后，请确保你的虚拟机已连接到互联网并已分配了公共 IP 地址。
步骤 2：安装 Nginx 服务器
Nginx 是一个流行的 Web 服务器，我们将使用它来托管我们的 React 应用程序。在你的虚拟机上运行以下命令来安装 Nginx：
sudo apt update && sudo apt install nginx
步骤 3：打开 Ubuntu 防火墙
默认情况下，Ubuntu 防火墙会阻止对 Nginx 服务器的传入连接。为了允许外部访问，我们需要打开端口 80 和 443。运行以下命令：
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
步骤 4：配置 Nginx 服务器
接下来，我们需要配置 Nginx 服务器以托管我们的 React 应用程序。为此，让我们创建一个 Nginx 服务器配置：
sudo nano /etc/nginx/sites-enabled/app.com
并将以下内容粘贴到文件中：
server {
listen 80;
listen [::]:80;
root /var/www/app.com/html/dist;
index index.html index.htm index.nginx-debian.html;
location / {
try_files $uri $uri/ =404;
}
}
确保将 "app.com" 替换为你的应用程序的域名或 IP 地址。
步骤 5：将应用程序部署到 Nginx
现在，我们需要将构建的 React 应用程序部署到 Nginx。为此，请将 dist 文件夹复制到 Nginx 服务器的根目录：
sudo cp -r /path/to/app.com/dist /var/www/app.com/html/
步骤 6：测试访问
最后，让我们测试我们的应用程序是否可以在公共 IP 上访问。在你的浏览器中输入公共 IP，应用程序应该正常显示。
故障排除提示
- 确保你的虚拟机已连接到互联网并分配了公共 IP。
- 检查 Nginx 配置是否正确。
- 确保 Ubuntu 防火墙允许对端口 80 和 443 的传入连接。
- 检查你的 DNS 设置是否正确，并解析你的域名到你的公共 IP。
最佳实践
- 使用 SSL 证书来保护你的应用程序免遭未经授权的访问。
- 启用缓存以提高应用程序的性能。
- 定期监控你的服务器和应用程序是否存在安全漏洞和性能问题。
结论
通过遵循这些步骤，你可以使用 Linux 虚拟机在公共 IP 上轻松地公开你的 React 应用程序。通过这样做，你可以通过互联网向外部用户提供你的应用程序，并显着扩大其可访问性。
常见问题解答
- 我可以使用其他操作系统吗？
当然。你可以使用任何 Linux 发行版或甚至 Windows。然而，本文档基于 Ubuntu 20.04。 - 我可以使用其他 Web 服务器吗？
是的，你可以使用任何你喜欢的 Web 服务器。本文档使用 Nginx 因为它是一个流行且可靠的选择。 - 我的应用程序可以处理大量流量吗？
这取决于你的应用程序和服务器资源。如果你预计会有大量流量，则需要确保你的虚拟机有足够的内存和 CPU 能力。 - 如何监控我的应用程序？
你可以使用日志文件或监控工具来监控你的应用程序的性能和安全漏洞。 - 如何更新我的应用程序？
每次进行更改时，都必须重新部署你的应用程序。这可以通过覆盖现有 dist 文件夹或使用自动化部署工具来实现。
