前后端分离项目的服务器部署

https://www.jianshu.com/p/cbb21c6f3427

前几天我的个人网站终于部署上线了，趁现在还记得，赶紧把流程记录下来。本文讲的是前后端分离的项目的服务器部署，这里就以我的个人网站为例子。我的个人网站前端是react，后端是nodejs，数据库是mongodb。

为了把项目部署上线，首先我们需要确保这个项目已经在本地跑通了，所谓跑通就是前端，后端，和服务器都已经被串在一起，而且可以正常运行了。在这个基础上，我们的部署分为以下几个步骤：

购买域名和远程服务器
域名解析，实名制认证，备案
把项目代码放在远程服务器上
程服务器安装数据库
前端编译静态文件
nginx前端配置
解决前后端跨域问题
项目在线上跑通以及后续完善

步骤很多，看起来很吓人，但是实际操作起来还是很快的，下面我们就一步一步的来讲解吧。

1. 购买域名和远程服务器

域名和远程服务器推荐在阿里云上购买, 原因是购买了他们的产品后有一系列很详细的教程，对于新手来说是很友好的。

购买后的域名需要进行实名制认证，这个过程很快，几乎是即时的，具体的认证方式阿里云上都有详细的说明。

服务器我买的是阿里云的轻量应用服务器，物美价廉，对于我的个人网站来说足够用了。购买服务器时，会让你选择服务器的地域，如果你的地域选在国内的话那你的域名是需要备案的，而这个备案过程大约需要半个月，所以着急着项目上线的同学可以把地域选在香港，是不用备案的。但是服务器放在香港的缺点就是有点延迟，所以服务器放在哪里还需要自己权衡。

购买服务器时还需要选择应用镜像和系统镜像，这里我们没有用到任何应用来构建我们的网站，所以只要选择系统镜像就好了。而选择什么系统呢？什么系统你最熟悉就选择什么系统，如果你完全是个小白，而且也不熟悉Linux系统的话，我个人不负责任的推荐windows系统。至于windows系统被嫌弃的不安全等问题，对于我这个个人网站来说都是不那么重要的。

2. 域名解析

在对域名进行实名制认证之后(如果你的服务器地域在国内，还需要进行备案)，我们就可以对域名进行解析了。所谓域名解析，就是把域名的指向设置为我们购买的服务器的ip地址。域名只是一个方便我们记住的网站的名字，而我们真正需要访问的其实是服务器的那个ip地址。你也可以这么理解：我们通过域名解析来把域名和服务器关联了起来。

域名解析很简单，如果你的域名和服务器都是在阿里云购买的，可以一键解析。具体教程阿里云上写的很清楚，这里就不再赘述。

3. 把项目代码放在远程服务器上

接下来我们需要想个办法把代码搬到远程服务器上，这里我推荐使用git。我们可以把项目放在github上之后，再在远程服务器上把代码clone下来。关于git有一个很浅显易懂的教程，是廖雪峰老师写的，这是链接。

代码clone下来以后不要忘了在服务器上安装运行代码所需要的软件和依赖包。比如我的后端是nodejs所以我就需要安装node。而依赖包的安装可以借助包管理工具npm或者是yarn。具体的方法在我的另一篇文章里有，请移步。

4. 远程服务器安装数据库

前后端就准备妥当，这时候我们需要在服务器上安装数据库了。不同的数据库安装方法不同，相同的数据库库不同的操作系统安装方法也不同，这里需要根据自己的情况去找相应的文档。

如果你也是在windows系统里安装mongodb数据库的话，可以参考这个视频。

关于如何在网上准确的找到自己所需要的资料，这里我想结合我的经验说几句。找资料首先第一想到的应该是官方文档，因为官方文档是最新的，很多数据库(比如mongodb我就踩过坑)，版本的变更安装方法也会不一样，第三方网站给出的安装方法往往都是过时的，不适用的。但如果官方文档读的云里雾里怎么办？这个时候我推荐去Youtube找视频看，把视频按发布时间排序，找最新的视频看。这样再结合官方文档应该就没有问题了。

5. 文件编译

关于编译我知道的也不多，所以这里只说一下具体我是怎么操作的，留个坑以后填。

首先是前端代码的编译，前端代码里直接npm run build或者是yarn run build就可以编译出静态文件，这里的静态文件是经过压缩的，所以代码的加载速度快。另外由于我的前端代码是用ES6标准写的，执行这个编译过程(如果你正确配置了babel)也帮我把ES6编译成了服务器可以识别的ES5代码。

然后是后端，后端也使用ES6写的，所以后端也需要用babel来编译一下。

6. nginx前端配置

这里我们使用nginx主要有两个目的，第一是我们需要nginx充当我们的前端静态文件代理服务器，第二就是我们需要nginx的反向代理帮我们解决跨域的问题，因为我们这是一个前后端分离的项目，前后端运行在不同的端口上就需要解决跨域的问题。

ngnix可以去官网下载，下载完成后找到nginx.conf文件，我的是在目录C:\nginx-1.14.2\nginx-1.14.2\conf下。打开nginx.conf文件，这里我们重点关注一下server里面的配置，有几项要根据我们的具体情况进行编辑。

  server {listen 80;server_name chenxin.art;root "C:/xinart/client/build";location / {try_files $uri /index.html;}}

首先，listen在80端口，没有问题，因为我们输入网址时默认的就是访问80端口。

server_name后面应该填上你自己的域名。

root后面应该填你的前端静态文件的存放目录。

location后面的/表示当路径在主页的时候，这里不需要改动。花括号表示访问根目录里面(也就是你填写的root目录)的index.html文件。如果你的入口文件是别的名字的话记得更改。

整个连起来，着几行代码的意思就是：当输入网址chenxin.art的时候，nginx会加载root目录里的index.html文件。相信理解以后你就知道要改哪些东西了。

到这一步为止，在浏览器中输入你的域名应该可以看到静态部分的网页了，但是你会发现所有的ajax请求都会报错，因为我们的前后端还没有真正的连通，还有一个跨域的问题需要解决。

7. 解决前后端跨域问题

我们借助nginx的反向代理来解决跨域的问题。具体操作如下：在nginx.conf文件的server配置里新增几行代码，现在你的server应该如下所示：

    server {listen 80;server_name chenxin.art;root "C:/xinart/client/build";location / {try_files $uri /index.html;}location /api {proxy_pass http://localhost:8080;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;}}

别的地方都没动，我们只是新增了一个location，而且这个location后面的路径需要改成你自己的ajax请求的路径，比如我的是/api。

proxy_pass后面的端口号也要改一下，改成你的后端运行的端口。再后面的代码我们保持原样，不用更改。

这新增的几句代码的意思是：当请求的路径以/api开头时，将请求代理到8080端口，而我的后端就运行在8080端口，所以就能够响应请求了。

到这里为止，我们的项目就算是真正的在线上跑通了。

8. 项目在线上跑通以及后续完善

项目跑通以后还有事情可以做，比如配置https，还有各种优化等等，有兴趣的同学可以自己去搜搜资料。

一点小心得

把自己个人网站的服务器部署像流水账这样写一遍也还是很有收获的，那就是很好的找出了自己不懂地方(苦笑)，那些说不清楚的地方其实就是还没有真正弄懂的地方。因为部署服务器涉及的东西太多太杂，一时半会想弄清也不现实，坑多慢慢填呀。。。

作者：陈鑫呀
链接：https://www.jianshu.com/p/cbb21c6f3427
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。