第一次在云服务器（这里我使用的是阿里云的云服务ECS）上搭建网站，使用前后端分离的方案部署前后端工程，主要分为两部分，即前端工程的部署和后端工程的部署，这里前端工程我使用了React来编写，后端工程我使用了Node来编写（Express框架）。
1.前端工程
使用React开发前端工程是最基本的就不再阐述了，将前端工程部署在云服务器上，使用Nginx开发外网访问。
在本地React工程中，使用build命令将自己的工程打包好，打包后的文件夹为build，通过访问build中的index.html即可访问自己开发好的页面，将build文件夹整个上传至云服务器（可使用Xshell和Xftp来上传文件），放置在云服务器上某个文件夹下面。
在云服务器上安装Nginx，云服务器上的环境安装，具体可以查看阿里云的文档：https://help.aliyun.com/document_detail/97251.htm?spm=a2c4g.11186623.0.0.67f96c071QINZm#concept-fnh-v3x-5fb。
将build文件夹上传至云服务器之后，进入nginx的配置文件，默认存放在在/etc/nginx/下，使用命令vim nginx.conf开始编辑nginx的配置，将网站开放外网访问，配置具体如下：
其中配置了三个部分：
1）通过1中的配置，即可在浏览器中通过云服务器公网ip访问到/build（我这里将build文件夹放在了我云服务器的根目录（/）下）下的index.html（前端工程打包后的页面）；
2）是我自己页面中用到了视频或图片文件，通过2中的配置，即可在浏览器中通过公网ip/mp4/xxx.mp4，访问到具体的视频文件或图片文件（我的视频文件上传在云服务器上的根目录下），如图所示；
3）3中的配置是我页面中的两个路由/table和/video，当我操作页面时，会跳转不同的路由访问不同的页面，如果我不配置这两个选项，则在url切换到这些路由时，此时刷新页面，就访问不到具体的页面了（404），这是由于直接通过公网ip访问到了具体的页面，但是当公网ip+具体的路由地址时，nginx没有配置，则访问不到具体的页面。
配置好Nginx后，通过命令systemctl restart nginx来重启Nginx。
我们还需要允许外网对云服务器80端口的访问才能通过外网访问网站，因此要在云服务器的安全组中开放80端口（在云服务器CES中的安全组进行配置）。
这样前端即部署成功，可以通过公网ip来访问了。
2.后端工程
由于javascript是无法直接访问数据库，因此想要将数据库中的数据呈现在页面当中，必须要使用后端语言来访问数据库，然后开放接口，前端通过调用接口即可访问到具体数据，这里我使用Nodejs（Express框架）。
Express框架比较方便，直接通过命令生成express工程，然后在工程中访问数据库（这里面我是想通过云服务器远程访问到其他PC的数据库，这里涉及到内网穿透的知识，后续开一篇博客具体讲一下内网穿透），并且开放相应的接口，前端中通过访问接口来获取具体数据。
将Express整个工程的文件夹放在云服务器上某个文件夹下面。
在云服务器上安装Node环境，具体环境安装参考上面阿里云的文档。
安装好node后，通过命令进入express工程的文件夹下，使用npm install安装express工程的依赖，依赖安装完成后，通过npm start启动工程。由于express默认监听的是3000端口，此时在浏览器中输出地址（http://公网ip:3000/xxx）即可访问到express工程开放的xxx接口，如下post接口放回的内容。
至此前后端工程也算部署成功，但是还是存在一些问题。
问题1：由于每次需要手动通过npm start启动后端服务，这样做不到你的网页内容可以随时访问，都需要手动npm start之后才能访问到具体接口，因此需要配置后端工程自动启动， 这里可以使用pm2或nodemon来启动我的express工程，目前这一步我还没有做，等后续做了再补充到这篇博客当中。
问题2：在前端工程中访问后端工程中的接口时，此时会出现错误，在本地npm start启动的react页面通过proxy代理（代理到http://公网ip:3000）可以访问到具体的接口，但是将react工程打包后上传到云服务之，接口访问不到了，原因是：
本地工程启动后，访问post接口是可以访问到的，但是云上部署的web在访问post接口时是访问不到的，原因是：在工程中配置的代理，只能本地起作用，线上环境不走那个devserve，得重新搞代理服务器，即需要在nginx里面配置代理。这里就要发挥nginx的作用了，nginx主要就是为了做代理（正反向代理）而生，通过代理，可以做到负载均衡，减轻服务器的访问压力。问题2我暂时也还没有做，后续补充。
标签：工程,nginx,网站,接口,访问,服务器,搭建,页面 From： https://www.cnblogs.com/kkkwoniu/p/16993661.html