将ReactJS Web App部署到数字海洋生产中的最简单方法

对于开发人员来说,开发ReactJs应用程序可能是一场噩梦,那仅仅是来自常规的开发Web应用程序的方式,您知道做那些普通的事情,例如用一些CSS和Javascript来用HTML创建PHP代码,然后才知道一个站点已经建立! !!

在ReactJs和其他类似的Javascript框架中,它是完全不同的,在开始使用状态,道具,组件和其他功能之前,您知道它与那些开发Web应用程序的常规方法完全不同。

假设您已经完成了在本地开发应用程序并在本地运行(http:// localhost:3000 /)。 真正的交易是将其部署到实时服务器中,我曾经属于这一类,这就是为什么我想与新开发人员共享它。

如标题所述,我们正在使用Digital Ocean ,您可以在这里创建您的帐户并获得10美元的免费入门费用。

首先,我相信您已经成功完成了这些教程:

1. 在数字海洋上创建一个小滴

2. 创建非用户帐户以访问SSH

  SSH用户@ IP地址 

其中user是您创建的用户名, ipaddress是创建Droplet后提供给您的ip地址。 它将要求输入密码(只需输入密码),然后按Enter。

您可能会遇到以下问题: 权限被拒绝(公钥)。 这不是问题,只需确保先以root用户身份注销,然后再以新创建的用户身份登录。

如果您很好地按照上述教程进行操作,则应该能够成功登录到服务器。

在DigitalOcean Ubuntu 16.04上设置Node.js

我们将Node.js用于后端,并将提供React应用程序构建的静态文件。 因此需要 Node.js

请访问https://nodejs.org/en/download/package-manager/以查看文档

我们使用软件包管理来安装,这是安装Node.js v9的命令

  curl -sL https://deb.nodesource.com/setup_9.x |  sudo -E bash -sudo apt-get install -y nodejs 

成功安装Node.js之后,我们可以通过输入以下命令来检查版本: node -v ,您会看到“ v9.3.0”

我们将需要全局安装PM2,以便它可以在服务器上的任何位置运行。 PM2允许您即使关闭终端也可以保持服务器运行,因为一旦关闭终端, npm start将停止工作。

全局安装

 须藤npm install -g pm2 

要在系统启动或重新启动时启动PM2,请输入以下命令:

  pm2启动systemd 

您将获得以下输出:

  [PM2]已找到初始化系统:systemd 
[PM2]要设置启动脚本,请复制/粘贴以下命令:
sudo env PATH = $ PATH:/ usr / local / bin / usr / local / lib / node_modules / pm2 / bin / pm2启动systemd -u用户--hp / home / user

从上面的输出中复制并运行最后一个命令:

  sudo env PATH = $ PATH:/ usr / local / bin / usr / local / lib / node_modules / pm2 / bin / pm2启动systemd -u用户--hp / home / user 

现在,PM2将在启动时启动。

接下来,我们将安装Nginx作为用于反向代理的网络服务器,这将允许我们直接使用IP地址或域访问应用程序,而不是将端口附加到IP地址。 例如。 124.113.33.19:3000

  sudo apt-get更新 
须藤apt-get install nginx

默认情况下,防火墙处于不活动状态,您可以通过运行命令sudo ufw status对其进行检查。

  sudo ufw应用程序列表 

因此,让config FW允许这些端口通过

  sudo ufw允许'Nginx Full'sudo ufw允许'OpenSSH'sudo ufw enable 

启动Nginx:打开IP地址,例如:http://123.456.789,您应该看到“欢迎使用nginx!”,我们云中的所有Nginx配置都在/etc/nginx/nginx.conf中。

 须藤nginx 

停止Nginx

  sudo nginx -s停止 

重新加载Nginx

  nginx -s重新加载 

修复了Ubuntu 16.04上bcrypt的问题

  sudo apt-get install build-essential 

最后,我们将Nginx设置为反向代理服务器。 为此,运行:

  sudo vim / etc / nginx / sites-available / default 

server块内,您​​应该有一个现有的location /块。 用以下配置替换该块的内容:

  // / etc / nginx / sites-available / default ... 
位置 / {
proxy_set_header X-Real-IP $ remote_addr;
proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http:// localhost:5000;
proxy_set_header主机$ http_host;
proxy_cache_bypass $ http_upgrade;
proxy_redirect关闭;
}

保存并退出vim

通过运行以下命令进行测试,以确保配置中没有语法错误:

 须藤Nginx -t 

然后重新启动Nginx:

  sudo systemctl重启nginx 

现在,您应该可以使用IP_ADDRESS访问该应用了

由于我们已经成功设置了环境并且我们以非用户身份登录,因此我们需要最后一个阶段,即将应用程序部署到服务器。

您可以轻松地从Github,Bitbucket,Gitlab等存储库中部署代码。

有了这些,你可以git clone repository-link

完成后,将其安装到您的代码文件夹,并使用npm install安装应用程序依赖项

这将获取所有应用程序依赖项并进行安装。

在项目文件夹中,在app目录中创建server.js

  #触摸server.js 
#sudo纳米server.js

server.js

  const express = require('express'); 
const bodyParser = require('body-parser')
const path = require('path');
const app = express(); app.disable('x-powered-by');
app.use(express.static(path.join(__ dirname,'build'))); //需要在快递服务器上声明“全部捕获”路由
//捕获所有页面请求并将其定向到客户端
// react-router做路由部分
app.get('*',函数(req,res){
res.sendFile(path.join(__ dirname,'build','index.html'));
}); app.listen(
process.env.PORT || 5000,
函数(){
console.log(`前端从http:// localhost:5000`开始)
}
);

打开终端并运行诸如node server.js类的命令,该应用绝对在localhost:5000上运行。

您将看到类似以下的错误:

 错误:ENOENT:没有这样的文件或目录,stat'/home/user-name/app-name/build/index.html' 

这意味着没有构建文件夹,这意味着我们还没有将项目投入生产。 要解决这个问题:

  npm运行构建 

恭喜,您现在可以通过访问IP_ADDRESS来访问Web应用程序

您也可以通过将域名停放在IP_ADDRESS,来继续前进IP_ADDRESS,

你可以在这里学到