aws mongodb
This is a 4 part blog series of articles. Here, you will learn the basic concepts of AWS, Nginx and Gunicorn servers and how to use them to host your React + Flask + MongoDB Web Application.
这是一个由四部分组成的博客系列文章。 在这里，您将学习AWS，Nginx和Gunicorn服务器的基本概念，以及如何使用它们托管React + Flask + MongoDB Web应用程序 。
This is the fourth and last part of the blog series in which we will learn how to create an AWS EC2 instance in which we will set-up Nginx and Gunicorn servers to host our web application (front-end in React and back-end in Flask). The other 3 posts are:
这是博客系列的第四部分也是最后一部分，我们将学习如何创建一个AWS EC2实例，在该实例中，我们将设置Nginx和Gunicorn服务器来托管我们的Web应用程序(React的前端和后端的后端)。烧瓶)。 其他3个帖子是：
Before continuing further, I hope you have already read my previous posts.
在继续之前，希望您已经阅读了我以前的文章。
启动EC2实例 (Launching EC2 instance)
Go to Services → EC2 → Instances → Launch Instance
转到服务→EC2→实例→ 启动实例
- Step 1: Choose AMI — Select “Ubuntu Server 18.04 LTS” (whatever latest one available) 步骤1：选择AMI-选择“ Ubuntu Server 18.04 LTS”(以最新版本为准)
- Step 2: Choose an Instance Type — Select t2.micro (free tier) type.Step 3: Configure Instance Details 步骤2：选择实例类型-选择t2.micro(免费)类型。步骤3：配置实例详细信息
- Skip ahead to Step 6. 跳至步骤6。
- Step 6: Configure Security Group. Enter the following details: 步骤6：配置安全组。 输入以下详细信息：
- This means that we can connect through this EC2 through SSH from any system. Our web-app will be hosted on port 80 HTTP through Nginx. The users of our app from anywhere will be able to access our app.The Flask App at the Backend will be hosted at port 5000 using Gunicorn, users or developers from any system can access the backend APIs. 这意味着我们可以从任何系统通过SSH通过此EC2连接。 我们的网络应用将通过Nginx托管在HTTP端口80上。 我们应用程序的用户可以从任何地方访问我们的应用程序。后端的Flask应用程序将使用Gunicorn托管在端口5000上，任何系统的用户或开发人员都可以访问后端API。
Click on Review and Launch.
单击查看并启动 。
Step 7: Review launch Instance — Click on Launch.
步骤7：查看启动实例-单击启动。
Click on Download Key Pair and then click on Launch Instances.
单击“ 下载密钥对” ，然后单击“ 启动实例” 。
In Launch Status, click on the View Instances button on the bottom-right.
在启动状态中 ，单击 单击右下角的“ 查看实例”按钮。
分配静态公共IPv4地址 (Assigning static Public IPv4 Address)
The EC2 instances are dynamic cloud computing services. To have a stable connection with this dynamic service, we need Elastic IP. This blog, explains in more detail about why we need Elastic IPs to get a stable Public IP address.
EC2实例是动态云计算服务。 为了与该动态服务保持稳定的连接，我们需要Elastic IP 。 该博客更加详细地说明了为什么我们需要弹性IP才能获得稳定的公共IP地址。
Click on Elastic IPs in the Navigation pane.
在导航窗格中单击弹性IP 。
Click on Allocate Elastic IP address and Allocate to create a new Elastic IP.
单击分配弹性IP地址并分配以创建新的弹性IP。
Select this newly created Elastic IP, then Actions → Associate Elastic IP address.
选择此新创建的弹性IP，然后选择操作→ 关联弹性IP地址 。
In Instance, select the EC2 instance you have just created, I have selected “P5VoiceToText_App”.
在“ 实例”中 ，选择您刚刚创建的EC2实例，我选择了“ P5VoiceToText_App”。
In Private IP Address, select the available option.
在“ 专用IP地址”中 ，选择可用选项。
Click on Associate.
单击关联 。
Go to Services → EC2 → Instances, we will see IPv4 Public IP in Description tab under the selected Instance. Note down this IP address.
转到服务→EC2→实例，我们将在所选实例下的“ 描述”选项卡中看到IPv4公用IP 。 记下该IP地址。
连接到您的实例 (Connecting to your Instance)
In the same folder where we saved the pem file from last blog, copy paste the key-pair which is the .pem file obtained from step 6.
在我们保存上一个博客的pem文件的同一文件夹中，复制并粘贴密钥对，该密钥对是从步骤6获得的.pem文件。
- Open Terminal if your system is macOS or Linux. Open Git Bash if you’re on Windows. 如果您的系统是macOS或Linux，请打开“终端”。 如果您使用的是Windows，请打开Git Bash。
- Type following: 输入以下内容：
ssh -i <pem file> ec2-user@<Public IP of the EC2 instance>- For example, I used the following command: 例如，我使用以下命令：
ssh -i P5VoiceToText_App.pem ubuntu@3.234.103.229- The IP address above is the Public IP address of the Instance we noted, the IP address and pem filename would be different for you. 上面的IP地址是我们注意到的实例的公共IP地址，该IP地址和pem文件名对您而言将有所不同。
Refer this, if you get the below error message:
如果收到以下错误消息，请参考此 ：
Warning: Permanently added '18.233.2.175' (ECDSA) to the list of known hosts.@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: UNPROTECTED PRIVATE KEY FILE! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Permissions 0644 for 'P5VoiceToText-DB.pem' are too open.It is required that your private key files are NOT accessible by others.This private key will be ignored.Load key "P5VoiceToText-DB.pem": bad permissionsec2-user@18.233.2.175:Permission denied (publickey,gssapi-keyex,gssapi-with-mic).Now we are connected to our EC2 Instance through SSH.
现在，我们通过SSH连接到EC2实例。
配置实例 (Configuring the instance)
- To update the instance, in terminal, type following commands 要更新实例，请在终端中键入以下命令
sudo apt-get update- Check if it has python 检查是否有python
python3 -V- Install pip to get necessary python libraries 安装pip以获取必要的python库
sudo apt install python3-pip- Installing front-end (React) server 安装前端(反应)服务器
sudo apt-get install nginx- Installing npm package 安装npm软件包
sudo apt install npmGet the project code. Clone your project from github or scp your project into this ubuntu instance from your desktop.
获取项目代码。 从github克隆您的项目，或从桌面将项目scp到此ubuntu实例中。
- Here, I cloned my capstone project: 在这里，我克隆了我的顶点项目：
git clone https://github.com/shefaliaj7/P5VoiceToText.git- Assign all read and write permissions to your project directory- 将所有读写权限分配给您的项目目录-
sudo chmod 777 P5VoiceToText
cd P5VoiceToText
Note- This blog can be referred to setup Nginx and Gunicorn servers on ubuntu machines and deploying React and Flask applications.
注意-可以参考此博客以在ubuntu机器上设置Nginx和Gunicorn服务器以及部署React和Flask应用程序。
托管前端 (Hosting Front-end)
- Go to your Front-end project directory. 转到您的前端项目目录。
cd Main/Frontend/voicetotext- Install npm files of your front-end project 安装前端项目的npm文件
sudo npm install- If you see below error: 如果看到以下错误：
sudo npm install -g npm@latest
sudo npm install- Build the front-end project 建立前端项目
sudo npm run build- The above command will create a build of the front-end project which will be deployed in the nginx server. 上面的命令将创建将在nginx服务器中部署的前端项目的构建。
- Configure nginx 配置nginx
cd ~
sudo rm /etc/nginx/sites-enabled/default
sudo vi /etc/nginx/sites-available/P5VoiceToText.nginx- In this file, write and save - 在此文件中，写入并保存-
server {
listen 80;
listen [::]:80;
root /home/ubuntu/P5VoiceToText/Main/Frontend/voicetotext/build;
index index.html;
access_log /var/log/nginx/reverse-access.log;
error_log /var/log/nginx/reverse-error.log;
location /{
try_files $uri $uri/ =404;
add_header Cache-Control "no-cache";
}
location /static {
expires 1y;
add_header cache-Control "public";
}
location /api {
include proxy_params;
proxy_pass http://127.0.0.1:5000;
}
client_max_body_size 20M;
proxy_connect_timeout 600s;
proxy_read_timeout 600s;
}- At line 4 above, change the value of the root directory according to your project path. This root path points to the location where the front-end build is located. 在上面的第4行，根据您的项目路径更改根目录的值。 该根路径指向前端构建所在的位置。
- At line 16–19 above, I have added a prefix “/api” for all my backend APIs. The frontend can call, through proxy, all the backend APIs with prefix “/api”, which are accessed through the Flask project running on the local machine (localhost IP) at “5000” port 在上面的第16-19行，我为所有后端API添加了前缀“ / api”。 前端可以通过代理调用所有前缀为“ / api”的后端API，这些API可通过本地计算机(localhost IP)上“ 5000”端口上运行的Flask项目进行访问
- Link the nginx sites-available and sites-enabled config files’ 链接Nginx网站可用和站点启用的配置文件
sudo ln -s /etc/nginx/sites-available/P5VoiceToText.nginx /etc/nginx/sites-enabled/P5VoiceToText.nginx- Start the nginx server 启动Nginx服务器
sudo systemctl reload nginx- Now open a browser, copy this EC2’s Public IP address on the address bar of the browser. You will see the Front-end up and running. 现在打开浏览器，将此EC2的公共IP地址复制到浏览器的地址栏中。 您将看到前端启动并运行。
Note- This youtube series can be referred to setup gunicorn server and deploy Flask Application.
注意- 此youtube系列可以称为设置gunicorn服务器和部署Flask应用程序。
托管后端 (Hosting Back-end)
- Go to the Back-end Project directory 转到后端项目目录
cd P5VoiceToText/Main/Backend/- In this directory, I have “run.py” which creates the Flask app (in P5VoiceToText sub-directory) and runs it. 在此目录中，我有“ run.py”，它将创建Flask应用程序(在P5VoiceToText子目录中)并运行它。
- Create python virtual environment in this location 在此位置创建python虚拟环境
sudo apt install python3-venv
python3 -m venv .venv
source .venv/bin/activate- Install following packages: 安装以下软件包：
pip3 install gunicorn
pip3 install Flask
pip3 install python-dotenv
pip3 install flask-cors
pip3 install flask-mongoengine
pip3 install requests- And install other relevant packages needed to run your Flask application. 并安装运行Flask应用程序所需的其他相关软件包。
In your backend code, change the IP address in your MONGODB_SETTINGS to the public IP address of the EC2 machine where we hosted MongoDB in the last blog.
在您的后端代码中，将MONGODB_SETTINGS中的IP地址更改为我们在上一个博客中托管MongoDB的EC2计算机的公共IP地址。
- Exit out of virtual environment 退出虚拟环境
deactivate
cd ~- Configure and run gunicorn server 配置并运行gunicorn服务器
sudo vi /etc/systemd/system/P5VoiceToText.service- In this file, write and save - 在此文件中，写入并保存-
[Unit]
Description=<a description of your application>
After=network.target
[Service]
User=ubuntu
WorkingDirectory=/home/ubuntu/P5VoiceToText/Main/Backend
ExecStart=/home/ubuntu/P5VoiceToText/Main/Backend/.venv/bin/gunicorn -b 127.0.0.1:5000 -t 600 "run:create_app(\"production\")"
Restart=always
[Install]
WantedBy=multi-user.target- At line 7, we need to specify the path to our back-end project. 在第7行，我们需要指定后端项目的路径。
- At line 8, we need to specify the gunicorn command to run the Flask application. Here, we ask gunicorn to run our flask application in our local machine (localhost) at port 5000 using “-b” parameter. With “-t” parameter, we specify 600s as the timeout value. With “run:create_app(\”production\”)” parameter, we ask gunicorn to run create_app function with “production” parameter. 在第8行，我们需要指定gunicorn命令来运行Flask应用程序。 在这里，我们要求gunicorn使用“ -b”参数在本地计算机(本地主机)的端口5000上运行flask应用程序。 使用“ -t”参数，我们将600s指定为超时值。 使用“ run：create_app(\” production \”)”参数，我们要求gunicorn使用“ production”参数运行create_app函数。
- Start the gunicorn server 启动gunicorn服务器
sudo systemctl daemon-reload
sudo systemctl start P5VoiceToText- You can check if the gunicorn server is active, by checking the status 您可以通过检查状态来检查Gunicorn服务器是否处于活动状态
sudo systemctl status P5VoiceToTextOpen the browser and copy this EC2’s Public IP address on the address bar of the browser. You will see the Front-end with populated data from Back-end.
打开浏览器，然后将此EC2的公共IP地址复制到浏览器的地址栏中。 您将在前端看到来自后端的填充数据。
确保安全 (Ensuring Security)
Next, to ensure security to our website we will make sure that users don’t get access to our backend and database. To do this, we need to update our security firewall rules.
接下来，为了确保我们网站的安全，我们将确保用户不会访问我们的后端和数据库。 为此，我们需要更新安全防火墙规则。
We will go to Security Groups in the Navigation Pane
我们将转到导航窗格中的“ 安全组 ”
阻止用户访问后端API。 (Preventing users from accessing Backend APIs.)
Select the security group we created while creating the instance for hosting the web-application, like in my case it’s “P5VoiceToText App”.
选择我们在创建用于托管Web应用程序的实例时创建的安全组，就我而言，它是“ P5VoiceToText App”。
Click on the Inbound rules tab and then click on Edit Inbound rules.
单击“ 入站规则”选项卡，然后单击“ 编辑入站规则” 。
Delete the highlighted rules and then click on Save Rules:
删除突出显示的规则，然后单击“ 保存规则” ：
防止用户访问数据库 (Preventing users from accessing Database)
Select the security group we created while creating the instance for hosting the mongoDB database, like in my case it’s “P5VoiceToText DB”.
选择我们在创建用于托管mongoDB数据库的实例时创建的安全组，在本例中为“ P5VoiceToText DB”。
Click on the Inbound rules tab and then click on Edit Inbound rules.
单击“ 入站规则”选项卡，然后单击“ 编辑入站规则” 。
Delete the highlighted rules and then click on Save Rules:
删除突出显示的规则，然后单击“ 保存规则” ：
- Edit the Source for third rule and change it from “10.0.0.0/16” to the security group of the instance we created for hosting web application (highlighted) 编辑第三条规则的来源，并将其从“ 10.0.0.0/16”更改为我们创建的用于托管Web应用程序的实例的安全组(突出显示)
Click on the Outbound rules tab and then click on Edit Outbound rules.
单击“ 出站规则”选项卡，然后单击“ 编辑出站规则” 。
- Edit the Source for first rule and change it to the security group of the instance we created for hosting web application (highlighted) 编辑第一条规则的源并将其更改为我们创建的用于托管Web应用程序的实例的安全组(突出显示)
This marks the end of this blog series on Hosting React + Flask + MongoDB Web Application on AWS. Through the series, we walked through the steps to host a web application, while also understanding the reason behind their implementation. The post also covered the errors where you might get stuck. Hope you find this blog series useful in gaining insights about hosting an application on AWS. Thanks you to the readers, for your time!
这标志着本系列博客关于在AWS上托管React + Flask + MongoDB Web应用程序的结尾。 在整个系列中，我们逐步完成了托管Web应用程序的步骤，同时还了解了实现它们的原因。 该帖子还涵盖了可能卡住的错误。 希望该博客系列对获取有关在AWS上托管应用程序的见解有用。 多谢您的宝贵时间！
aws mongodb
扫一扫
5203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
