在 AWS 上部署 REACT + NODE 应用到生产环境

在 Amazon EC2 服务上从头开始设置可用于生产的 Web 服务器的详细演练。

本文最初发布于此处。

范围：

我们将搭建一个包含 MySQL 数据库的全栈（Node、Express、React）应用。我们会将该应用部署到运行Ubuntu Server 16.04 LTS 的AWS EC2 实例上。该设置使用NGINX作为反向代理，并提供 React 静态文件服务，并使用PM2作为集群管理器。MySQL 数据库将部署到AWS RDS上，phymyadmin也将安装并连接到 RDS 以通过 GUI 处理查询。最后，我们会将 EC2 实例映射到域名。

背景

过去，我曾使用Heroku部署 Node 应用，使用Netlify部署静态 Web 应用，它们提供了即用型环境，隐藏了所有复杂性，使部署过程更快、更轻松。然而，设置 AWS 实例可以让你更深入地了解网站公开的幕后运作。

设置：

设置 VPC：

虚拟私有云基本上是一个包含我们的 AWS 服务（例如：Web 服务器、数据库、弹性缓存、文件服务器和消息传递服务）的虚拟位置。

使用以下链接转到 Amazon VPC 仪表板https://console.aws.amazon.com/vpc
点击“创建 VPC”按钮。页面如下：
该 VPC 已命名为react-node vpc。

CIDR是传统子网划分的替代方案，用于指定构成路由或网络部分的有效位数。

CIDR 表示法（10.10.0.0/16）表示前两个八位字节用于网络，其余两个八位字节用于定义主机。
单击创建 VPC 按钮完成 VPC 设置。

子网设置

子网或子网络是划分 VPC 中资源的一种方式。Web 服务器 (EC2) 需要能够通过互联网访问，而 RDS 只能在内部访问，因此需要公共子网和私有子网来确保安全。

创建公共子网：

该子网可以拥有 10.10.1.0 - 10.10.1.255 之间的任意地址。
创建私有子网：

此子网的地址范围可以是 10.10.2.0 - 10.10.2.255 之间的任意地址。此外，需要一个可用区才能使此子网与我们的数据库配合使用。此外，将数据库部署到 AWS 需要两个位于不同可用区的子网，因此请使用相同的流程设置第二个子网。

安全组设置

安全组充当实例的虚拟防火墙，控制入站和出站流量。

点击“安全组”选项卡，然后点击“创建安全组”。添加名称、描述，并附加之前创建的 VPC。页面如下所示：
创建安全组后，按所示编辑入站规则。

SSH用于从个人计算机登录 EC2 实例。除非有可用的静态 IP ，否则每次登录时都需要在源部分更新您的个人 IP 地址。
端口 80 和端口 443 允许正常的互联网流量。

在 AWS EC2 上创建新的 Ubuntu 服务器

转到 EC2 服务部分并单击启动实例按钮
选择“Ubuntu Server 16.04 LTS”Amazon 系统映像 (AMI)。
配置实例详细信息，如下所示：
选择已创建的 VPC 并添加公有子网。存储和标签可保留默认设置。
将现有的安全组分配给前面步骤中创建的实例。
单击“审核并启动”以启动实例。
它将提示您创建一个新的密钥对。输入名称并单击“下载密钥对”以下载私钥，该私钥将用于通过 SSH 连接到服务器。
创建成功后，导航到实例页面，右键单击新创建的实例。单击“连接”，将打开一个弹出窗口，其中详细说明了通过 SSH 连接的步骤。

RDS 设置

前往 RDS 数据库仪表板。
在创建数据库之前，将创建一个子网组用于与服务器通信。该子网组将扩展到两个可用区，以保护数据库免受服务器故障的影响。
单击子网组标签，然后单击创建 DB 子网组。
添加名称和描述，并选择已创建的 VPC。然后，为该 VPC 附加私有子网。
现在我们准备创建数据库。
在下一页中，设置 VPC 和已创建的子网组。记住您在此处设置的用户名和密码，这将用于连接到 SQL 服务器。
高级设置如下：
单击创建数据库按钮完成设置。
在创建数据库时，前往 VPC 仪表板并按照与上述相同的步骤创建一个新的安全组，并设置入站规则，如下所示：
然后，单击修改按钮并选择网络和安全部分下的安全组，将此安全组附加到数据库。

要检查一切是否正常工作，请打开一个新终端，然后按照与上面相同的方式连接，进入您的实例。

使用以下命令安装MySQL ：

sudo apt-get 安装 mysql 服务器 mysql 客户端

在安装过程中，安装程序会要求您输入 MySQL 根帐户和密码以连接到本地数据库。

安装成功后，输入命令连接主机数据库

mysql -u username -p -h hostname

输入您在设置 rds 时使用的密码。主机名（端点）可以在数据库摘要页面的“连接和安全”选项卡下的 RDS 仪表板页面中找到。

如果一切顺利，您将在终端成功连接后看到这样的屏幕。

React 和 Node 项目设置：

项目 Github 链接：https://github.com/Asim1996/blog

将项目部署到 AWS EC2 实例。

首先使用
ssh i-“keypair.pem” ubuntu@public-ip-address通过 SSH 进入您的实例
使用以下命令安装 git：

sudo apt-get update 
sudo apt-get install git

使用以下命令将您的项目克隆到服务器中：

sudo git clone link-to-repo

克隆项目后我们可以看到所有文件，如下所示

安装node和npm

我们将首先使用以下方式安装nvm（节点版本管理器）

sudo curl https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

然后使用安装节点

nvm install node-version我曾经使用过（v8.16.0）

安装后，我们可以进入服务器目录并使用npm install安装所有软件包，但首先，我们需要使用以下命令授予该文件夹的写入权限：

sudo chmod 777 path-to-directory

该项目中的目录路径为（/home/ubuntu/blog/server）

对于我们应用程序的客户端，我们将使用 yarn。设置如下：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 
sudo apt update 
sudo apt install --no-install-recommends yarn

之后，切换到客户端目录并运行yarn add来安装所有依赖项，并按照之前的操作设置所需的权限。

运行命令yarn run build以获取下一步将由 Nginx 提供的构建文件夹。

配置 NGINX 以服务 Node.js API 和 React 前端

由于我们的应用程序由两个独立的项目组成，并且都需要通过同一个端口（HTTP 80 端口）访问，因此我们将使用 NGINX 作为面向公众的 Web 服务器，接收前端和后端的请求，并根据每个请求的路径决定发送目的地。以路径/api/ * 开头的请求将被代理到运行在端口 5000 上的 Node.js API，而其他请求将服务于 React 前端应用程序及其相关文件。

通过在终端中输入以下命令来安装 Nginx：

sudo apt-get install -y nginx
要检查它是否正在运行，请访问：http://ec2-public-ip/。如果显示“欢迎使用 nginx！”，则表示 nginx 正在运行，我们可以继续下一步。
接下来，前往以下目录

cd /etc/nginx/sites-available/
删除默认文件并使用以下代码创建一个新文件：
保存文件并重新启动 nginx

sudo systemctl restart nginx
NGINX配置指南：
- server { ... }定义一个服务器块，其中包含 NGINX 内虚拟服务器的配置。
- 通过location / { ... }，我们定义了一个块，其中包含以正斜杠 (/) 开头的 URI 的请求的配置，在其中我们将 React Build 设置为根路由。然后，我们将 index.html 文件设置为主索引，并且在后续的每个请求中，我们都将提供相同的 index.html 文件。
- location /api { ... }定义了一个位置块来为以 /api 开头的 URI 的请求提供服务，该请求将使用属性 proxy_pass http://localhost:5000代理到我们的 Node 服务器；

可选：设置 phpmyadmin

通过使用安全的 Web 界面访问数据库而不是使用终端执行 DB 命令，我们可以更轻松地生活。

首先使用以下命令安装 PHP：

sudo apt install php-fpm php-mysql

然后使用以下命令安装 phpMyAdmin：

sudo apt-get install phpmyadmin

在安装过程中，它会询问您希望软件自动配置哪个 Web 服务器。由于我们使用的是 Nginx，它不在可用选项中，您可以直接按 TAB 键，然后按 ENTER 键跳过此提示。下一个提示会询问您是否希望 dbconfig-common 配置 phpMyAdmin 使用的数据库。选择“是”继续。输入在 MySQL 安装期间配置的数据库管理员密码，以允许这些更改。

安装后，为了让 Nginx 网络服务器正确找到并提供 phpMyAdmin 文件，我们需要从安装文件到我们的 Nginx 文档根目录创建一个符号链接：

sudo ln -s /usr/share/phpmyadmin /var/www/html

phpMyAdmin 依赖于mcrypt PHP 模块，因此也需要启用它

sudo phpenmod mcrypt

sudo systemctl restart php7.0-fpm

在浏览器中访问 /phpmyadmin 路由之前设置身份验证提示。我们将创建一个密码文件来存储身份验证凭据。Nginx 要求使用 crypt() 函数对密码进行加密。要创建加密密码，请输入：openssl passwd

它会提示输入密码，然后返回一个加密版本，复制它，因为我们将在设置身份验证文件时使用它

导航到/etc/nginx/并创建一个包含以下内容的新文件pma_pass

username_of_your_choice:copied_encrypted_version_password

保存并关闭文件。

此后，更新 nginx 文件夹下的默认文件，如下所示：

使用sudo systemctl restart nginx 重新启动 nginx
在 phpMyAdmin 中添加我们的 RDS 服务器

导航至：

sudo nano /etc/phpmyadmin/config.inc.php

在 config.inc.php 中找到以下几行：

    /*  
    * End of servers configuration  
    */

在“服务器配置结束”行上方附加以下行：


    $i++;  
    $cfg['Servers'][$i]['host'] = 'xxxxx.xxxxxxxxxx.us-east-1.rds.amazonaws.com';  
    $cfg['Servers'][$i]['port'] = '3306';  
    $cfg['Servers'][$i]['connect_type'] = 'tcp';  
    $cfg['Servers'][$i]['extension'] = 'mysql';  
    $cfg['Servers'][$i]['compress'] = TRUE;

保存文件并退出。
打开浏览器并输入（http://ec2-public-ip/phpmyadmin/），结果如下：

可选：PM2 设置

PM2 是一个集群管理器，允许我们自动运行我们的应用程序，并在应用程序崩溃时自动重新启动它。

使用以下方式安装 pm2：

npm install pm2 -g

要启动 pm2，请导航到服务器目录并输入：

pm2 start app.js -i 0

PM2 使用上述命令自行确定要创建多少个实例。

以下是一些有用的 pm2 命令：

pm2 list：列出所有正在运行的进程
pm2 restart app 0：重启id为0的应用程序
pm2 删除应用程序 0：删除 ID 为 0 的应用程序
pm2 logs以流式方式显示所有进程日志
pm2 stop all停止所有进程

最后，测试在 AWS 上运行的新应用程序

在浏览器中输入主机名（ec2 实例公共 IP）以在网络上实时查看您的应用程序。

此外，您可以从任何域名提供商（GoDaddy、BigRock 等）处购买域名，并使用弹性 IP进行链接，即使我们在虚拟私有云中停止和启动实例，该 IP 也会保留。

要做到这一点

从 Amazon 的公共 IPv4 地址池中分配一个弹性 IP 地址。
将弹性 IP 地址与正在运行的实例关联。

前往您的域名提供商并创建A 记录并将弹性 IP 与您的域名链接以完成整个设置。

呼！就这样！感谢阅读，恭喜你坚持到最后。希望这能让新手的部署生命周期更轻松。

干杯！！

文章来源：https://dev.to/asim_ansari7/deploy-a-react-node-app-to-production-on-aws-2gdf