阿里云轻量应用服务器部署Node.js+React+MongoDB前后端分离项目

最近用阿里云服务器部署了一个前端React，后端Node.js（Koa2），数据库MongoDB的前后端分离项目，其间踩了不少的坑，用这篇文章记录一下具体的步骤，希望对你们能有帮助。

1. 服务器的选取和购买

服务器的全部种类可以在阿里云官网产品页看到，根据我在网上的观察，大部分人使用的是ECS云服务器和轻量应用服务器，轻量应用服务器是基于ECS云服务器发展出来的产品，主要面向入门级的云计算和简单的应用，突出“轻量”二字，在我们个人的项目中使用是绰绰有余的，如果你的服务器需要进行持久的高负载操作，那么就可以使用ECS云服务器。（具体区别请参考ECS云服务器和轻量应用服务器的区别）。这里我使用的是轻量应用服务器。

进入轻量应用服务器的购买页面，服务器地域选靠近自己地区的，当然如果你的服务器地域选择在国内的话，你的域名是需要备案的（不过你也可以不使用域名访问，直接访问服务器ip），备案过程可能需要十几天的时间，如果你急着上线可以把地域选在香港，缺点就是可能和你的地区距离较远，有延迟。镜像需要选择系统镜像和应用镜像，如果没有用到任何应用构建我们的网站，这里我们选择系统镜像就好了，因为我对linux系统不是很熟悉，所以系统镜像我选择了windows2019数据中心版，套餐配置的话根据自己的需要（和财力）选择，由于本人囊中羞涩，选择了最低配的版本。其他的数据盘我们不需要额外增加，购买时长看自己的情况选择。

由于阿里云最近推出了开发者成长计划，选择三个月及以上有很大的优惠。如果你是学生，还可以去享受学生的专享福利。

2. 域名的购买

这一步并不是必须的，你可以购买域名映射到服务器来访问，也可以直接用服务器的ip来访问，而且域名的备案需要较长的时间，这一步根据自己的实际情况考虑是否需要使用域名。

域名的购买在阿里云万网，输入你想注册的域名查询（看是否已注册）并购买，根据自己的实际情况选择不同的后缀。购买域名后需要进行实名认证，使用身份证的信息，这个过程一般很快，几分钟就可以搞定。（控制台-产品与服务-域名-域名列表-查看到自己的域名并选择“管理”）。

3. 域名解析

域名进行实名认证之后，就可以进行域名解析了。（如果你的服务器在国内，需要在认证之后进行备案，而且实名认证之后一般2-3天后才能备案）所谓域名解析就是把域名和你的服务器ip绑定绑定起来，这样用户在访问域名的时候会自动解析映射到服务器ip。具体的步骤可以打开你的服务器，在左侧栏的站点设置找到“域名”，然后进行解析，这里我的域名已经解析过了。

4. 把项目代码传到服务器上

由于我使用的是mac，在mac操作远程服务器的终端比较推荐Microsoft Remote Desktop Beta，界面优雅，操作方便。Microsoft Remote Desktop Beta可以去搜索引擎搜索下载。

下载完成后输入你的服务器账号和密码连接，账号和密码可以在轻量应用服务器的“服务器运维”——“远程连接”设置，至此我们就能连接到远程的服务器了。

把项目代码传到服务器有好几个方法：

1. 使用github，在本地把代码上传到github，在服务器端拉取github上的代码
2. mac用户使用系统终端自带的命令行
3. 使用filezilla进行文件传送

这里我们推荐使用第一种方法，相信git的使用对大家来说并不陌生。在使用之前记得在服务器上安装git，git的安装直接在git官网下载即可。

5. 安装依赖

以我的项目为例，需要安装的依赖是：node、npm、MongoDB

node和npm的安装直接在官网上下载即可，而npm是node自带的，安装完node之后就有npm了，如果要升级npm到最新的版本直接执行：

npm upgrade

MongoDB的安装比较麻烦一点，如果是windows系统下安装MongoDB可以参考：windows下安装MongoDB （需要翻墙）

其他系统安装MongoDB可以自行百度

6. 项目打包

至此我们的项目已经上传到了远程服务器，并且相关的依赖也安装好了。接下来是把项目代码打包。

前端项目的打包我们一般使用webpack，我的前端项目是基于create-react-app创建的，vue-cli也是同样的道理。

首先进入到项目中安装依赖：

npm install

然后执行打包命令：

npm run build

打包完成后你可以在项目的文件目录下看到一个build文件夹，这就是我们打包好后的静态文件，当用户输入域名访问我们的页面时，需要返回这个文件夹下的index.html文件给用户。

后端我是基于koa2编写的，你使用express或者其他框架也是一样，后端我们直接运行在服务器就好了，和我们本地运行后端的原理是一样的，这里我的命令是：

npm install npm run serve

先安装依赖，然后启动服务

7. nginx配置

我们在本地开发的时候一般采用设置setProxy.js文件的方式帮我们转发实现跨域，我们在服务器一般采用nginx反向代理的方式来实现跨域。其次我们需要使用nginx来充当我们的前端静态文件代理服务器。

nginx可以到官网下载，下载完成后解压下载好后的文件夹，打开conf文件夹里面的nginx.conf文件，我们需要修改配置的地方是：

server { listen 80; server_name 112.74.55.172; location / { root "C:\Users\Administrator\Desktop\code\sysu-competition-system\build"; index index.html index.htm; try_files $uri $uri/ /index.html; } }

首先listen 80端口没问题，因为我们输入域名或服务器ip后默认打开的就是80端口；server_name，如果你的服务器绑定了域名那么这里就填你的域名，比如sysyu-competition.top，如果你没有绑定域名那么像我一样直接填ip，localtion / 下面的root是你上一步前端打包好后生成的静态文件夹的位置；index表示build文件夹下的入口文件，不需要我们修改，用默认的配置，如果你的入口文件不是index.html，那么自己手动修改。try_files这个配置主要是避免前端页面在用户刷新的时候404了，具体的原理可以自行百度。

这个配置的意思就是当输入网址http://112.74.55.172时，命中根路径，返回root配置的静态文件给浏览器，加载页面。修改完成后，我们在nginx.exe文件夹目录输入：

nginx -t

检查配置文件是否有语法错误。如果没有的话输入：

start nginx

启动nginx，实现代理。

每次当你修改nginx.conf文件后，输入：

taskkill /IM nginx.exe /F

来杀死所有的nginx进程，再输入启动命令启动nginx，配置才会生效。这时候输入你的域名（或者服务器ip）应该能看到前端的静态页面了，但是此时前后端接口还没有连通。

8. 阿里云服务器开启端口

我们前后端运行的端口需要在阿里云上的防火墙开启，如图，我的前端运行在端口80端口，后端运行在8000端口，那么需要在 安全——防火墙——添加规则 下开启这两个端口，任何你需要使用的端口，都记得到这里开启才能访问。（如果是ECS服务器则在安全组下）

9. nginx解决前后端跨域问题

我们的前后端项目运行在不同的端口下，直接请求会引起跨域。我们借助nginx实现前后端通信的跨域问题，具体的配置信息还是在conf文件夹里面的nginx.conf文件，增加如下几行代码：

server { listen 80; server_name 112.74.55.172; location / { root "C:\Users\Administrator\Desktop\code\sysu-competition-system\build"; index index.html index.htm; try_files $uri $uri/ /index.html; } location ~/api/ { proxy_pass http://0.0.0.0:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection ‘upgrade’; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

我的前端代码中请求后端的接口格式是：

http://公网ip(域名):前端运行的端口/api/xxxxx

我们前端请求自己的ip（域名）和运行端口，并没有跨域。然后nginx命中到～/api/的请求时，就会根据proxy_pass属性把请求代理到后端运行的8000端口；这个~/api/的命中规则根据你的请求格式自行修改，proxy_pass的代理端口也根据你的后端运行端口进行修改，那么当请求被匹配到/api/时就会命中下边的规则，代理到远程服务器本地后端运行地址，从而解决跨域问题，至此我们的前后端跨域就解决了。

补充：如果你的后端服务通过设置

Access-Control-Allow-Origin:'*'

解决了前后端的跨域问题，那么你可以直接在前端的代码中去请求

http://公网ip(域名):后端运行的端口/api/xxxxx

即使没有使用nginx代理，也能实现跨域

10. 前端请求第三方API跨域问题

在我的项目中前端请求了果创云平台的第三方接口发送手机验证码，可能你们的项目中除了请求后端API外，也有阿里云或者其他平台的第三方API等需要请求，比如我的第三方接口具体的请求地址为：

http://hn216.api.yesapi.cn/?s=App.cdn.UploadOffice&app_key=............

也就是说我们需要请求到hn216.api.yesapi.cn这个域名下，直接请求这个域名肯定是跨域了，那么我们通过配置nginx来实现代理：

前端请求为：

前端代码中请求域名为112.74.55.172（也就是我们的服务器公网ip），端口为80（我们前端的运行端口，根据你的实际运行端口进行修改），这样我们请求同一个域名和端口号下的接口，没有跨域，然后nginx匹配到我们发起的/uploadToGuochuangyun/请求后，通过proxy_pass代理到hn216.api.yesapi.cn下（代理规则去除了uploadToGuochuangyun/），实现跨域，至此第三方api的跨域也解决了。

至此，我们已经解决了在阿里云轻量应用服务器上部署前后端分离项目的全部步骤，坑还是蛮多的，遇到问题去百度/google慢慢查看总是能解决的，有任何问题欢迎在评论区留言讨论。

原文链接：https://blog.csdn.net/qq_41056833/article/details/114988613?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516782390566548%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516782390566548&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-9-114988613-null-null.nonecase&utm_term=%E9%A6%99%E6%B8%AFcdn