阿里云ECS服务器部署react+express+mongodb项目

前端开发 / 贝塔创建于 4年前 / 阅读数 1184 / 评论数 1 / 1秒前

前言：写了一个react+express+mongodb的个人小站，基本前后台交互都在本机上实现，想着搞一个服务器挂上去，顺便了解一下前端项目的部署步骤以及部署事项。
搞项目，写代码写代码写代码，没别的，先得在本机上跑得飞起再说，本机上都没跑下来别谈部署服务器了。
本机跑下来了，该去搞一个服务器了。在阿里云上买一个ECS服务器，登录阿里云之后在控制台上选择ECS服务器——>购买实例——>一键购买——>选择配置，一般默认的配置就行，毕竟是个人小站嘛，然后系统镜像我选择的是Ubuntu（以前学嵌入式用过），资金不是太充足的可以选择包月，有钱人当我没说，随意！购买完成。
然后再来个域名，阿里云上也有购买域名服务。先查询自己想要的域名有没有被注册，然后寻找自己合适的域名后买下来。买下来后两个重点：1、域名解析。2、备案。不解析你无法将你服务器的IP绑定到域名上，浏览器就没法解析域名匹配到你的服务器，不备案压根访问不了网站。备案时候需要填写真实信息，别作假。
windows下下载putty、WinSCP两个软件。putty用来链接你的服务器，做命令行操作，WinSCP可以将本机本文直接拖入服务器中，免去其他操作。（这是基于Windows环境下，Mac环境输入IP直接就能连）
file
file
进入到服务器之后安装该有的软件及环境，Node、Express、mongodb、Nginx。我使用Ubuntu软件库安装软件，方便。一步一步来，先更新一下子：apt-get update，再安装node：apt-get install nodejs ，然后是nginx：apt-get install nginx；（如果nginx中途被你玩炸了，直接卸载重来，都是学习过程，不过卸载要注意，本文最底下配有nginx卸载方法。网上也有很多教程）。
打包好react项目，npm run build，之后会有一个build文件夹，里面就是打包好的项目。使用winSCP软件将build文件夹放到nginx服务器下，nginx服务器默认会读取一个index.html文件，这个文件在 /var/www/html下，你可以将build文件夹里面的东西直接放到这里面，也可以自己在其他地方建立一个文件夹来放，记住你建立的这个路径，然后去 /etc/nginx中，里面一个nginx.conf文件，这是nginx的一些配置，咱们重新建立一个web.conf文件，内容如下：

server {
        listen 8080;
        # server_name your.domain.com;

        root /myweb/web;   //这儿就是react项目打包后你放置的地址
        index index.html index.htm;

        location / {    //使用了browserHistory 就得加上这个
                try_files $uri $uri/ /index.html;
        }
        location ^~ /assets/ {
                gzip_static on;
                expires max;
                add_header Cache-Control public;
        }
        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}

（针对这个配置，还是没弄得太清楚每一个配置项的功能）
然后重启nginx服务 nginx -s reload
浏览器访问：IP:8080
ps:参考博客链接：https://blog.csdn.net/vVvlife/article/details/79403570
前端访问ok了，现在就是后端了。安装express-generator：apt-get express-generator。安装好之后就生成一个express项目：express web-back。进入到web-back中安装依赖：npm install。启动express：npm start。在浏览器中访问：IP:3000。会看到一个大的的Express。OK，express搞定。
mongodb安装，apt-get install mongodb。然后将自己的mongodb库导入，mongodb是使用json文件的格式，所以将本机导出的mongodb库放入到服务器里面去，然后在ubuntu中导入我们的库：

mongoimport --db newdb --collection restaurants --file primer-dataset.json

restaurants：集合名 dataset.json:数据库文件名
具体的导入方法以及mongodb操作：www.baidu.com。
然后将自己的express中连接数据库的js，放到express底下的app.js中，注意，我们并未安装mongoose，所以在express中的package.json中将mongoose的依赖加入，在install一下就行了。启动：npm start。在浏览器中访问：IP:3000/api。得到返回的数据就行了。
搞定了前后，但是我们是通过域名访问，不可能使用ip吧，所以nginx配置里面就得搞点事情了，在刚刚建立的web.conf中加入代理。
ps：参考博客链接：https://www.cnblogs.com/binguo666/p/9939238.html

upstream myweb{
     server 127.0.0.1:27017;
}
server {
     listen 80;
     server_name  www.buddhisf.com;

      location / {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
             proxy_set_header Host $http_host;
             proxy_set_header X-Nginx-Proxy true;

             proxy_pass http://myweb;
             proxy_redirect off;
      }
}

至此，访问自己的网站就能被nginx代理到我们express服务中获取数据啦。
本文仅提供大体思路，细节方面可能有错，勿喷感谢。大佬留步，指出问题，给点建议。