如何使用 Nginx 在单个 DigitalOcean droplet 上部署 React JS 和 Node.js 应用程序使用反向代理服务器块在 DigitalOcean 上部署 NodeJS 应用程序

2025-06-07

如何使用 Nginx 在单个 DigitalOcean Droplet 上部署 React JS 和 Node.js 应用程序

使用反向代理服务器块在 DigitalOcean 上部署 NodeJS 应用程序

在本文中，我们将学习如何使用 Nginx 在单个 DigitalOcean droplet 上部署使用简单服务器块的 React JS 应用程序和使用反向代理服务器块的 Node.js 应用程序。

使用简单服务器块在 DigitalOcean 上部署 React 应用程序

替代文本

步骤 1-登录DigitalOcean并创建一个新的 droplet

使用 root 访问服务器

打开你的终端并复制你的 droplet 的 ip_address 并写下下面的命令：



ssh root@server_ip_address
Enter fullscreen mode Exit fullscreen mode

现在，输入您的密码，您就登录到服务器了。

现在该设置防火墙了。

基本防火墙设置

出于安全考虑，我们必须添加一个基本的防火墙。Ubuntu
服务器使用UFW防火墙。设置一个基本的防火墙非常简单。

我们可以使用以下命令查看防火墙当前允许哪些应用程序：



sudo ufw app list
Enter fullscreen mode Exit fullscreen mode

您应该看到以下输出：



Available applications
  OpenSSH
Enter fullscreen mode Exit fullscreen mode

我们必须通过输入以下命令来允许 SSH 连接：



sudo ufw allow OpenSSH
Enter fullscreen mode Exit fullscreen mode

然后我们启用防火墙：



sudo ufw enable
Enter fullscreen mode Exit fullscreen mode

按y和ENTER。

我们可以使用以下命令查看防火墙状态：



sudo ufw status
Enter fullscreen mode Exit fullscreen mode

现在下一步，我们将配置域名。

第 2 步 - 配置域名

在本节中，我们将配置用于 React 应用程序的域名。

为此，我们必须购买一个域名（请访问GoDaddy或任何其他域名提供商）并将您的域名链接到 DigitalOcean。

我们将一步一步地完成这项工作。

在 DigitalOcean 的“添加域名”部分，像这样写入您的域名：sample.com。它不应该www.sample.com，然后单击添加域名按钮。

替代文本

之后，您必须为您的域添加 NS 记录。

我们将添加两条A记录，将其映射IP4 address到域名。

对于第一条A记录，@输入HOSTNAME您想要指向域名的服务器（即：droplet），

替代文本

对于第二条A记录，写入www并HOSTNAME选择相同的服务器

替代文本

现在转到您的域名提供商（我使用的是GoDaddy）。
转到您的个人资料，然后在Domain“部分”中单击DNS。

在该Nameservers部分中单击“更改”并输入以下名称服务器：

  • ns1.digitalocean.com
  • ns2.digitalocean.com
  • ns3.digitalocean.com

更改名称服务器可能需要一些时间。

第3步 - 安装Nginx

现在您的域名指向服务器，是时候安装和配置 Nginx 了。

替代文本

安装 Nginx

在您的终端上写入以下命令：



sudo apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

它将安装 Nginx 以及其他依赖项。

配置防火墙

在我们测试 Nginx 之前，我们需要重新配置防火墙软件以允许访问该服务。

ufw我们可以通过输入以下命令列出知道如何使用的应用程序配置：



sudo ufw app list
Enter fullscreen mode Exit fullscreen mode

您应该看到以下输出：



Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH
Enter fullscreen mode Exit fullscreen mode

Nginx HTTP现在我们通过输入以下内容来启用：



sudo ufw allow 'Nginx HTTP'
Enter fullscreen mode Exit fullscreen mode

我们可以通过输入以下命令来查看更改：



sudo ufw status
Enter fullscreen mode Exit fullscreen mode

现在我们将测试 Ngnix 是否运行正常。

测试 Web 服务器：

我们可以通过输入以下内容来测试我们的服务器：



systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

输出应该如下所示：



● nginx.service - A high performance web server and a reverse proxy server
    Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
    Active: active (running) since Mon 2016-04-18 16:14:00 EDT; 4min 2s ago
  Main PID: 12857 (nginx)
    CGroup: /system.slice/nginx.service
      ├─12857 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
      └─12858 nginx: worker process
Enter fullscreen mode Exit fullscreen mode

现在在浏览器中输入您的 ip_address，您应该会看到 Nginx 登录页面。

替代文本

Nginx 配置

使用 nano 或您喜欢的文本编辑器打开默认配置文件：



sudo nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

找到 server_name 行并将下划线替换为您的域名：



. . .

server_name example.com www.example.com;

. . .
Enter fullscreen mode Exit fullscreen mode

保存文件并退出编辑器，然后键入以下内容验证任何错误：



sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

然后输入以下命令重新加载服务器：



sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

现在通过输入以下命令允许访问 HTTP 防火墙：



sudo ufw allow 'Nginx Full'
Enter fullscreen mode Exit fullscreen mode

步骤 4 - 使用 Let's Encrypt 和 Certbot 进行 SSL 配置

Let's Encrypt 是一家证书颁发机构 (CA)，它提供了一种轻松获取和安装免费 SSL 证书的方法，从而在 Web 服务器上启用加密的 HTTPS。它通过提供软件客户端 Certbot 来简化流程，该客户端会尝试自动执行大部分（如果不是全部）所需步骤。目前，在 Apache 和 Nginx 上，获取和安装证书的整个过程都是完全自动化的。

安装 Certbot

首先，我们将 repo 添加到服务器：



sudo add-apt-repository ppa:certbot/certbot
Enter fullscreen mode Exit fullscreen mode

按ENTER

现在输入以下命令安装 Certbot：



sudo apt install python-certbot-nginx
Enter fullscreen mode Exit fullscreen mode

从 Certbot 获取 SSL 证书

要获取 example.com 和www.example.com URL 的 SSL 证书，请使用以下命令



sudo certbot --nginx -d example.com -d www.example.com
Enter fullscreen mode Exit fullscreen mode

之后，Certbot 会询问您如何配置 HTTPS 设置。



Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cance
Enter fullscreen mode Exit fullscreen mode

选择ENTER。现在您的网站服务器已开启HTTPS。

现在输入您的域名并进行测试。

第 5 步 - 部署 React APP

首先，在您的网站名称上创建一个文件夹，就我而言，它example.com位于/var/www/。



sudo mkdir -p /var/www/example.com/html
Enter fullscreen mode Exit fullscreen mode

现在/var/www/example.com/html使用



cd /var/www/example.com/html
Enter fullscreen mode Exit fullscreen mode

并通过输入以下内容创建index.html文件：



cat > index.html
Enter fullscreen mode Exit fullscreen mode

并使用以下命令打开它：



nano index.html
Enter fullscreen mode Exit fullscreen mode

在文件内部，创建一个基本的 HTML 文件。




<html>
  <head>
    <title>Hello World!!!</title>
  </head>
  <body>
    <h1>Success! The example.com server block is working!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

保存并关闭文件。

重新配置Nginx

现在您已经在新目录中创建了内容/var/www/example.com/html，您需要告诉 Nginx 为该目录提供服务，而不是/var/www/html当前的默认目录。

通过使用以下命令将 root 添加到文件并告诉 Nginx 路径

使用以下方式打开文件：



sudo nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

并添加路径：



root /var/www/example.com/html;
Enter fullscreen mode Exit fullscreen mode

输入以下命令检查任何语法错误：



sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

并重新启动Nginx



sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

现在输入您的域名并测试您的网站。

部署 React App

现在在终端中打开您的应用程序并在应用程序的终端中运行以下命令：



scp -r ./build/* user@server_ip_address:/var/www/example.com/html
Enter fullscreen mode Exit fullscreen mode

输入密码即可。

现在打开package.json文件React App并在“scrips”部分添加以下代码：



 "deploy-production": "react-scripts build && scp -r ./build/* user@server_ip_address:/var/www/example.com/html"
Enter fullscreen mode Exit fullscreen mode

写下您的 ip_address 和您的网站名称，而不是server_ip_addressand example.com。

现在运行以下命令：



npm run deploy-production
Enter fullscreen mode Exit fullscreen mode

现在在浏览器中输入你的域名。如果没有错误，你的 React 网站就部署好了。

使用反向代理服务器块在 DigitalOcean 上部署 NodeJS 应用程序

替代文本

防火墙已经"ufw"安装Nginx配置完毕，70% 的工作已经完成。这不会花太多时间。

安装 Node

在终端上写入以下命令：



curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install node.js

node --version
Enter fullscreen mode Exit fullscreen mode

从 GitHub 克隆你的项目

从你的 GitHub 仓库复制链接，然后运行以下命令



git clone yourrepolink.git
Enter fullscreen mode Exit fullscreen mode

安装依赖项



cd yourproject
npm install
npm start (or whatever your start command)
# stop app
ctrl+C
Enter fullscreen mode Exit fullscreen mode

安装 PM2 以保持应用程序运行



sudo npm i pm2 -g
pm2 start app.js (app.js is the file name)

# To make sure app starts when reboot
pm2 startup ubuntu
Enter fullscreen mode Exit fullscreen mode

通过以下方式写入reboot并再次登录到您的服务器



ssh-copy-id bob@server_ip_address
Enter fullscreen mode Exit fullscreen mode

现在/etc/nginx/sites-available/default添加另一个服务器块，并添加server_name并写入你的子域名。在我的例子中，应该是
nodejs.example.com。



    server_name nodejs.example.com
Enter fullscreen mode Exit fullscreen mode

在下方server_name添加以下位置部分：




    location / {
        proxy_pass http://localhost:5000; #whatever port your app runs on
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
Enter fullscreen mode Exit fullscreen mode

输入以下命令检查任何语法错误：



sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

并使用以下命令重新启动服务器：



sudo service nginx restart
Enter fullscreen mode Exit fullscreen mode

现在在DigitalOcean“添加域”部分，打开CNAME任何子域名，在我的情况下，node.js您可以在 HOSTNAME 下看到nodejs.example.com并选择相同的 droplet。

现在，React App 和 Node.js 应用程序托管在单个 DigitalOcean droplet 上。

希望本文对您有所帮助。如有任何疑问，请在评论区留言。

我是一名初学者，因此请各位前辈提供任何建议，我将不胜感激。

附言：我目前正在进行#100DaysOfCode挑战。想了解我的每日进度，请在Twitter上关注我@zeeshanhshaheen

谢谢你！

文章来源：https://dev.to/zeeshanhshaheen/how-to-deploy-react-js-and-nodejs-app-on-a-single-digitalocean-droplet-using-nginx-1pcl
Devto 翻译
PREV
如何使用 CSS Grid 创建日历 创建 HTML
NEXT
捍卫 Angular 框架