使用 React、Strapi、Nginx、MongoDB 和 DigitalOcean 创建全栈 Web 应用程序步骤：步骤 1 - 创建和配置 DigitalOcean Droplet：步骤 2 - 设置域名步骤 3 - 使用 Let's Encrypt 设置 Nginx 和 SSL步骤 4 - 创建 MongoDB Atlas 集群步骤 5 - 创建和部署 Create-React-App 站点步骤 6 - 创建和部署 Create-Strapi-App API 结论

2025-05-25

使用 React、Strapi、Nginx、MongoDB 和 DigitalOcean 创建全栈 Web 应用程序

步骤：

第1步 - 创建和配置DigitalOcean Droplet：

第 2 步 - 设置您的域名

第 3 步 - 使用Let's Encrypt设置Nginx和 SSL

第 4 步 - 创建MongoDB Atlas集群

步骤 5 - 创建并部署Create-React-App站点

步骤 6 - 创建并部署Create-Strapi-App API

结论

我们将逐步介绍如何使用React.js、Nginx、Strapi和MongoDB Atlas设置和托管一个全栈应用程序。我们将使用DigitalOcean托管此应用程序，并使用MongoDB Atlas作为免费的数据库集群。

仅供参考：本教程中我们不会通过 React App 与 Strapi API 进行交互。我们只会使用 Nginx 设置样板代码，其余部分由您自行决定！

步骤：

  1. 创建并配置DigitalOcean Droplet
  2. 设置您的域名
  3. 使用Let's Encrypt设置Nginx和 SSL
  4. 创建MongoDB Atlas集群
  5. 创建并部署Create-React-App站点
  6. 创建并部署Create-Strapi-App API

第1步 - 创建和配置DigitalOcean Droplet：

您的第一步是在云端设置一个 DigitalOcean Droplet 来托管网站和 API。您可以使用任何云托管服务提供商，但具体步骤可能会因您选择的主机商而异。

首先，您需要在DigitalOcean上创建一个帐户。您可以使用此链接获取100 美元的免费信用额度，该信用额度在注册后 60 天内有效。请注意，系统会要求您提供信用卡信息。只要您没有用完 100 美元的免费信用额度，或者托管时间不超过 60 天，就不会向您收取费用。

步骤 1.1 - 创建新的 Droplet

创建帐户并登录后，查看顶部的导航栏，点击“创建”按钮。将出现一个下拉菜单，点击“Droplets”。

替代文本

在“选择镜像”下，确保已选中“发行版”选项卡。在本例中，我们将使用Ubuntu - 18.4 (LTS) x64。

替代文本

接下来，您将选择您的方案。对于此特定应用，我们将使用10 美元/月的方案。这对于Strapi来说是必需的，他们的指南指出“最低 2 GB/1 CPU”。

替代文本

接下来，您可以选择网站的托管位置。通常，您需要选择距离最常访问该网站的用户最近的网站。

替代文本

对于“身份验证”部分，选择“密码”，然后输入用于登录服务器根帐户的安全密码。

替代文本

在“完成并创建”中，您可以更改主机名，如所述，这有助于您识别您的 droplet。

替代文本

然后，选择要在其中创建此 Droplet 的项目。然后点击“创建 Droplet”按钮。

替代文本

几分钟后（DigitalOcean 设置好你的 droplet）。你的服务器现在已启动并运行。

步骤 1.2 - 登录服务器

您需要通过终端 SSH 进入您的服务器并使用您在设置 droplet 时选择的 root 密码。

要通过 SSH 连接到服务器，您需要 Droplet 的 IP 地址。在左侧导航栏中选择“Droplets” ，导航到 Droplet 的仪表盘，然后选择刚刚创建的 Droplet。您需要“ipv4”地址，点击该地址进行复制。

替代文本

现在，使用从 Droplet 仪表板复制的 ipv4 地址，您需要在终端中运行此命令（将“droplet_address”替换为刚刚复制的ipv4地址）：

ssh root@droplet_address
Enter fullscreen mode Exit fullscreen mode

运行此命令时，您可能会收到有关主机真实性的警告。如果发生这种情况，请接受警告并提供您选择的 root 密码。

步骤 1.3 - 创建新用户

使用root超级用户设置服务器可能会导致一些意外的破坏性操作，因为 root 用户有权运行任何命令。因此，为了在设置服务器时更加安全，我们将创建一个单独的用户（将“john”替换为您喜欢的任何用户名）。

adduser john
Enter fullscreen mode Exit fullscreen mode

步骤 1.4 - 授予新用户 root 权限

现在，您拥有一个具有默认帐户权限的新帐户，但这些权限不足以设置服务器。因此，我们将为该帐户提供以root 身份运行命令的选项。将用户添加到 sudo 组后，您可以在任何命令前面添加“sudo”，以root身份运行该命令（将“john”替换为您在上一步中选择的任何用户名）。

usermod -aG sudo john
Enter fullscreen mode Exit fullscreen mode

现在您的新帐户具有root权限，现在输入以下命令以新用户身份登录。

su - john
Enter fullscreen mode Exit fullscreen mode

步骤 1.5 - 设置基本防火墙

Ubuntu 服务器默认内置了一个名为“UFW”的基本防火墙，UFW 的全称是“Uncomplicated Firewall”（简易防火墙）。它的设置非常简单，并且能够显著提升服务器的安全性。

您可以通过输入以下内容查看 UFW 当前允许哪些应用程序：

sudo ufw app list
Enter fullscreen mode Exit fullscreen mode

对先前输入的命令的响应应该是：

Available applications
  OpenSSH
Enter fullscreen mode Exit fullscreen mode

OpenSSH是一个使用 SSH 协议进行远程登录的工具。这对于我们通过 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

该命令的输出应为：

Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Enter fullscreen mode Exit fullscreen mode

如果您收到的结果就是这样，那么到目前为止，您已经走在了托管全栈应用程序的正确道路上。接下来，是您的第二个主要步骤：设置您的域名。

第 2 步 - 设置您的域名

在此步骤中，您需要从域名注册商处购买域名。一些域名注册商包括但不限于GoDaddy、namecheap等。

我们将使用 DigitalOcean 配置您的域名并将其指向服务器。查看顶部的导航栏，然后点击“创建”按钮。将出现一个下拉菜单，点击“域/DNS”。

替代文本

点击“域名/DNS”后，输入您从第三方注册商处购买的域名。然后点击“添加域名”。

替代文本

添加域名后，您将被重定向到您输入的域名的记录页面。假设您的域名尚未指向 Digital Ocean 域名服务器，您应该会看到一个显示“下一步是什么？”的框。这意味着您需要将您的域名指向 DigitalOcean 的域名服务器。DigitalOcean 创建了一个教程，介绍如何从常用的域名注册商处将您的域名指向他们的域名服务器。

从域名注册商处更改您的名称服务器后，您现在可以使用 DigitalOceans DNS 记录将域名指向您的服务器。

对于第一条记录，在主机名字段中输入“@”，选择所需的 Droplet，然后点击创建记录。

替代文本

对于第二条记录，在主机名字段中输入“www”，选择所需的 Droplet，然后点击创建记录。

替代文本

第 3 步 - 使用Let's Encrypt设置Nginx和 SSL

现在您已将域名指向服务器。我们需要托管React.js和Strapi应用。我们将使用Nginx。

步骤3.1安装Nginx

在终端中，确保与服务器的 SSH 连接没有中断。然后运行以下命令安装 Nginx：

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

安装完成后，我们需要调整UFW（防火墙）以允许访问Nginx。

步骤3.2在UFW中启用Nginx

与我们启用 OpenSSH 以允许 SSH 连接的方式类似。首先，运行以下命令列出所有应用程序：

sudo ufw app list
Enter fullscreen mode Exit fullscreen mode

假设 Nginx 安装正确，UFW app list 命令应该响应：

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

有三种可能的 Nginx 配置文件：

  • Nginx Full - 允许未加密和加密的流量
  • Nginx HTTP - 允许未加密的流量
  • Nginx HTTPS - 允许 SSL 加密流量

由于我们还没有设置Let's Encrypt，所以我们暂时选择“Nginx HTTP”。

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

允许“Nginx HTTP”流量后，您可以通过运行以下命令来验证更改是否成功：

sudo ufw status
Enter fullscreen mode Exit fullscreen mode

该命令的输出应为：

Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)
Enter fullscreen mode Exit fullscreen mode

步骤 3.3 测试 Nginx Web 服务器

Nginx 应该已经在运行，可以通过检查 Nginx 的状态来测试：

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 Fri 2020-08-21 14:10:55 UTC; 2 days ago
     Docs: man:nginx(8)
 Main PID: 882 (nginx)
    Tasks: 2 (limit: 2361)
   CGroup: /system.slice/nginx.service
           ├─882 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─883 nginx: worker process
Enter fullscreen mode Exit fullscreen mode

现在我们已经确认 Nginx Web 服务器已启动并正在运行，我们可以将测试提升到一个新的水平。在您选择的浏览器中，在地址栏中输入您的 droplets ipv4地址。

访问服务器 IP 地址后，您应该会看到一个“欢迎使用 nginx”页面。页面内容如下：

替代文本

现在我们已经验证我们的 Web 服务器按预期工作，我们将为您的域配置SSL证书。

步骤 3.4 使用Let's Encrypt和Certbot配置 SSL 证书

Let's Encrypt 是由互联网安全研究小组运营的非营利性证书颁发机构，免费提供用于加密的 SSL 证书。我们将使用 Certbot 来自动化流程，让获取 SSL 证书变得轻而易举。

我们将通过运行以下命令来安装Certbot的存储库：

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

按Enter 键接受添加此存储库。

然后运行以下命令来安装 Nginx 特定的 Certbot：

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

步骤 3.5 - 更新 Certbot 的 Nginx 配置

Certbot 需要知道证书中将包含哪些域。

通过运行以下命令使用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

更改server_name后，我们应该验证配置：

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

我们还将进行一些必要的更改以使 Strapi 正常运行。

在“location /”属性之前添加以下代码段：

    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://strapi;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }

    location /dashboard {
        proxy_pass http://strapi/dashboard;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
Enter fullscreen mode Exit fullscreen mode

另外，如果你计划在 React 应用中使用react-router-dom，你可能需要将 fallback 页面从“404”改为“index.html”。你也可以为每个 react-router 页面创建一个 location 路由，但显然，随着新页面的创建，每次都需要更新 location 路由。

    location / {
        try_files $uri $uri/ /index.html;
    }
Enter fullscreen mode Exit fullscreen mode

按CTRL + X退出 nano，然后按Enter保存更改。

再次，您将验证 Nginx 配置的语法：

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

关于 Strapi 和 Nginx，我们还需要做一项更改，我们需要更新托管在端口 1337 上的 Strapi 服务器的上游配置。在 upstream.conf 上运行 nano：

sudo nano /etc/nginx/conf.d/upstream.conf
Enter fullscreen mode Exit fullscreen mode

进入upstream.conf后，输入以下代码片段：

upstream strapi {
    server 127.0.0.1:1337;
}
Enter fullscreen mode Exit fullscreen mode

按CTRL + X退出 nano，然后按Enter保存更改。

在此步骤的最后一次，您将验证您的 Nginx 配置：

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

假设检查中没有发现错误，重新加载 Nginx 以初始化新配置：

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

步骤 3.6 - 更新防火墙以支持 Nginx HTTPS

现在我们几乎可以运行 Certbot 了，但首先需要做一件事。我们需要更改 UFW 配置文件以允许 Nginx Full，因为我们很快就会有 SSL，这是我们所需要的。

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

确保从 UFW 中删除以前的 HTTP Nginx 配置文件。

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

现在我们准备运行 Certbot 并获取 SSL 证书。

使用您的域名代替占位符值运行以下命令（您可以根据需要使用任意数量的域名，只需确保在每个域名前面加上“-d”即可）：

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 cancel):
Enter fullscreen mode Exit fullscreen mode

选择您的选择，然后按Enter。 Nginx 配置将被更新，并且 Nginx 将自动重新加载。

选项“2：重定向”是推荐的选择，因为它将确保您的网站/API 始终通过 https 提供服务。

您的网站现在正在通过 HTTPS 提供服务，请通过导航到您迄今为止使用的域来验证这一点。

https://domain-name.com
Enter fullscreen mode Exit fullscreen mode

步骤 3.7 - 检查 Certbot 的自动续订功能

Let's Encrypt 的 SSL 证书有效期仅为 90 天。因此，您需要确保 Certbot 能够自动续订此许可证。要测试续订，请运行以下命令：

sudo certbot renew --dry-run
Enter fullscreen mode Exit fullscreen mode

如果试运行成功完成，Certbot 将在证书到期后 30 天内（2 天检查间隔）更新您的证书。

第 4 步 - 创建MongoDB Atlas集群

首先，您需要注册一个 MongoDB Atlas 帐户。

创建帐户后，系统将提示您创建集群（一组数据库）。在本教程中，我将使用免费集群。您也可以选择其他层级，设置完全相同。

替代文本

选择与您为 DigitalOcean Droplet 选择的区域最接近的区域，这样做将最大限度地减少服务器和数据库交互所需的时间。

替代文本

接下来的设置是可选的，我建议您设置一个与您将要构建的项目相关的集群名称。

替代文本

一旦您根据自己的喜好修改了设置，请单击“创建集群”按钮。

替代文本

数据库可能需要几分钟来设置。

替代文本
数据库设置完成后，使用左侧导航导航到“网络访问”页面。

替代文本

我们需要授予 DigitalOcean 服务器访问 MongoDB 数据库的权限。如果任何 IP 地址可以修改数据库，那将是一个重大的安全风险。因此，要将服务器 IP 列入白名单，请点击“添加 IP 地址”按钮。

替代文本

接下来，输入服务器的 IPv4 地址，并为其命名，以便记住 IP 地址。完成后，点击“确认”。

替代文本

现在我们已经设置了 MongoDB Atlas 集群，并授予我们的服务器对数据库的访问权限，我们就可以继续使用 React 应用程序了。

步骤 5 - 创建并部署Create-React-App站点

我们将在本地机器上安装 React 应用，并在需要修改时将生产文件推送到服务器。但首先，我们必须创建一个目录来包含这些生产文件。请确保将“domain.com”替换为您的域名。

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

创建目录后，我们需要将目录的所有权授予您一直使用的用户帐户。$USER环境变量是您当前登录的帐户（请确保您未以 root 身份登录）。

sudo chown -R $USER:$USER /var/www/domain.com/html
Enter fullscreen mode Exit fullscreen mode

步骤 5.1 - 创建示例页面

现在我们已经为生产文件设置了目录，让我们通过创建一个基本的 HTML 文件来验证一切是否正常。

首先，通过运行以下命令创建文件：

nano /var/www/domain.com/html/index.html
Enter fullscreen mode Exit fullscreen mode

然后在html文件中输入以下内容：

<html>
  <head>
    <title>Domain.com testing!</title>
  </head>
  <body>
    <h1>The placeholder html file is working!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

按CTRL + X退出 nano，然后按Enter保存更改。

步骤 5.2 - 更新 Nginx 配置

现在我们已经创建了一个用于提供 Web 文件服务的新目录，我们需要让 Nginx 知道它将从“ /var/www/domain.com/html ”而不是默认目录“ /var/www/html ”提供文件服务

为此，我们需要通过运行以下命令再次打开 Nginx 配置文件：

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

您将修改根目录。您可以按CTRL + W组合键搜索文本，输入“root”，然后按Enter 键。您需要更改 root 行，使其反映您的域/目录。

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

按CTRL + X退出 nano，然后按Enter保存更改。然后，我们将通过运行以下命令再次验证 Nginx 配置语法：

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

假设没有发现问题，我们将通过重新启动 Nginx 来使更改生效：

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

现在使用您选择的浏览器访问您的网站，以验证 Nginx 是否正在提供我们输入的 index.html。

https://domain.com
Enter fullscreen mode Exit fullscreen mode

您应该会看到此页面：

替代文本

如果可行，我们就可以导入 React 生产文件了。

步骤 5.3 - 在本地机器上生成 Create-React-App

如果您已经设置了 React 应用程序，则可以跳至步骤 5.4。

要在本地计算机上创建 React 应用程序，请确保已安装 npm 和 node，导航到所需目录，将“your-site”替换为您网站的名称，然后运行以下两个命令之一：

NPX：

npx create-react-app your-site
Enter fullscreen mode Exit fullscreen mode

纱线：

yarn create react-app your-site
Enter fullscreen mode Exit fullscreen mode

React 应用安装完成后，你可以在本地机器上测试该应用，以确保网站正常运行。为此，请确保你位于项目的父目录中，运行以下命令（将“your-site”替换为你的网站名称）：

cd your-site
Enter fullscreen mode Exit fullscreen mode

然后通过运行以下命令启动 React 应用程序：

npm run start
Enter fullscreen mode Exit fullscreen mode

当应用程序启动时，您将看到类似下面的消息：

Compiled Successfully!

You can now view your site in the browser.

Local: http://localhost:3000/
On Your Network: http://12.123.12.123:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
Enter fullscreen mode Exit fullscreen mode

现在导航到http://localhost:3000/来查看您的反应应用程序。

步骤 5.4 - 创建生产版本并推送到服务器

现在，您可以将我们之前创建的示例 index.html 文件替换为 React 站点的生产版本。首先，我们需要运行以下命令来生成生产版本：

npm run build
Enter fullscreen mode Exit fullscreen mode

完成后，我们就有了Nginx为用户提供服务所需的文件，但这些文件仍然在我们的本地机器上，所以我们需要将这些文件推送到服务器。我们可以通过运行SCP来做到这一点（确保替换“user”，“server_ip_address”和“domain.com”）：

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

文件传输完成后，打开您选择的浏览器，并导航到您的域名。您应该会看到创建 React 应用样板页面（如下所示）。

替代文本

现在，通过添加“deploy-production”脚本，我们可以更轻松地将 React 的生产版本部署到服务器。

在您的 React 应用程序（本地机器）中打开“package.json” 。

在“脚本”部分，添加“deploy-production”脚本，如下所示（确保替换“user”，“server_ip_address”和“domain.com”）：

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

添加“deploy-production”脚本后，脚本部分应如下所示：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy-production": "react-scripts build && scp -r ./build/* user@server_ip_address:/var/www/domain.com/html",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
Enter fullscreen mode Exit fullscreen mode

在本地机器上对 React 应用程序进行一些更改，然后在React 应用程序的根目录中运行“deploy-production”脚本，以确保一切正常运行。

步骤 6 - 创建并部署Create-Strapi-App API

我们将首先为 Strapi 应用程序创建一个目录，通过 SSH 进入 DigitalOcean droplet 并运行以下命令：

sudo mkdir -p /var/www/domain.com/strapi
Enter fullscreen mode Exit fullscreen mode

创建“strapi”目录后，您将通过运行以下命令导航到该目录：

cd /var/www/domain.com/strapi
Enter fullscreen mode Exit fullscreen mode

现在我们进入“strapi”目录，您可以通过运行以下两个命令之一来创建您的 Strapi 应用程序：

NPX：

npx create-strapi-app . --quick-start
Enter fullscreen mode Exit fullscreen mode

纱线：

yarn create strapi-app . --quick-start
Enter fullscreen mode Exit fullscreen mode

运行前面列出的命令后，您将看到两个安装选项，我们将选择第二个选项“Quickstart”。使用向上箭头和向下箭头进行导航，然后按Enter选择一个选项。

? Choose your installation type
 ❯ Quickstart (recommended)
   Custom (manual settings)
Enter fullscreen mode Exit fullscreen mode

步骤 6.1 - 为 MongoDB 配置 Strapi

现在您将导航到MongoDB Atlas网站，请确保您已登录。导航到您的集群仪表板。

替代文本

然后单击所需集群的连接按钮。

替代文本

选择“连接您的应用程序”。

替代文本

点击复制按钮将连接字符串保存到剪贴板。请务必将密码替换为您的 MongoDB Atlas 密码。如果您要将此代码推送到公共存储库，请确保将此连接字符串存储在.env文件中！

替代文本

现在我们有了 MongoDB Atlas 连接字符串，通过运行以下命令导航到“database.js”配置文件：

nano /config/database.js
Enter fullscreen mode Exit fullscreen mode

更新您的 database.js 以使其看起来像以下配置，确保将“your-connection-string”替换为您刚刚获得的 MongoDB Atlas 连接字符串：

{
  defaultConnection: "default",
  connections: {
    default: {
      connector: "mongoose",
      settings: {
        uri: "your-connection-string"
      },
      options: {
        ssl: true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

按CTRL + X退出 nano，然后按Enter保存更改。然后我们编辑 server.js 文件：

nano /config/server.js
Enter fullscreen mode Exit fullscreen mode

您的 server.js 配置文件应类似于下面列出的配置（确保将“domain.com”替换为您的域，并生成一个 JWT放置在 secret 属性中）：

{
  host: '0.0.0.0',
  port: 1337,
  url: 'https://domain.com/api',
  admin: {
    url: 'https://domain.com/dashboard',
    auth: {
      secret: "enter-your-jwt-here",
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

步骤 6.2 - 创建并运行 Strapi 的生产版本

现在我们已经将 Strapi 配置为与 MongoDB 和 Nginx 协同工作，我们应该准备好创建生产版本并运行 Strapi：

npm run strapi build
Enter fullscreen mode Exit fullscreen mode

然后使用该版本启动 strapi：

npm run strapi start
Enter fullscreen mode Exit fullscreen mode

启动 strapi 后，您应该会看到类似下面的消息：

 Project information

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Mon Aug 24 2020 19:13:10 GMT-0500 (Central Dayl… │
│ Launched in        │ 25432 ms                                         │
│ Environment        │ development                                      │
│ Process PID        │ 17512                                            │
│ Version            │ 3.1.3 (node v12.16.1)                            │
│ Edition            │ Community                                        │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available

Welcome back!
To manage your project 🚀, go to the administration panel at:
http://localhost/api/admin

To access the server ⚡️, go to:
http://localhost/api
Enter fullscreen mode Exit fullscreen mode

要登录 Strapi，请在您选择的浏览器中访问以下网页：

https://domain.com/dashboard
Enter fullscreen mode Exit fullscreen mode

您将看到一个注册页面，输入您想要的电子邮件地址和密码，然后注册。使用新注册信息登录后，您将看到 Strapi 仪表板：

替代文本

单击下面的图片即可查看设置 Strapi 的教程。

替代文本

设置一些类型并输入一些数据后，在您选择的浏览器中导航到您的域，然后导航到类型名称以获取数据（将“type-goes-here”替换为类型名称）。

https://domain.com/api/type-goes-here
Enter fullscreen mode Exit fullscreen mode

假设您输入了一些数据并正确输入了集合类型，您应该会得到类似于以下 JSON 的响应：

替代文本

结论

现在您已经使用 Nginx 设置了两个样板（React 和 Strapi），接下来您可以决定如何实现它们。希望本教程易于理解，并且您能够顺利完成。这是我的第一篇文章/教程，请在下方评论区留下您的任何建议。

文章来源：https://dev.to/jackrkelly/create-a-full-stack-web-application-using-react-strapi-nginx-mongodb-and-digitalocean-bkh
Devto 翻译
PREV
Node.js 中需要了解的五种设计模式
NEXT
开发 API 架构